<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Изучаем Sass. Установка и настройка.

Изучаем Sass. Установка и настройка.

Всем привет! Сегодня мы начнем изучать Sass, и в конце серии статей вы будете прекрасно владеть данным препроцессором.

Итак, Sass - самый зрелый, стабильный, мощный и профессиональный препроцессор в мире. Именно так о нем пишут разработчики на официальном сайте, и это действительно так. Конечно, существуют и другие препроцессоры, которые тоже очень хороши, к примеру, less, поэтому я лишь опишу, как его использовать, какие у него есть особенности, и вы сможете решить, стоит ли вам использовать этот препроцессор или нет.

Итак, перейдите по ссылке и установите препроцессор Sass. В установке нет ничего сложного, и на сайте все описано очень подробно, так что останавливаться на этом мы не будем, а сразу перейдем к использованию.

Создадим структуру проекта следующего вида:

  • sass
    • assets
    • public
      • css
      • index.html

Содержание index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sass</title>
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, ipsum!</p>
</body>
</html>

Папка css пуста. В ней будет скомпилированный .css файл. Давайте этим и займемся. Создайте в папке assets папку styles, а в этой папке файл app.scss. Напишем в этом файле простой код стилизации:

p {
  color: green;
}

Теперь скомпилируем этот файл в тот формат, который понимает браузер. Откройте терминал и напишите следующее:

// Формат введения команд: sass [input] [output]
sass assets/styles/app.scss public/css/app.css

Теперь у нас появился самый обычный css файл в папке css, а браузер применил заданный нами стиль. Чтобы не компилировать файл каждый раз, когда вы вносите изменения, вручную, давайте автоматизируем этот процесс.

sass --watch assets/styles/app.scss:public/css/app.css

Теперь вам достаточно просто сохранить файл, и он автоматически скомпилируется.

А у меня на этом все. Надеюсь, вас заинтересовала данная тема и всем удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

GALAPERIDOL GALAPERIDOL 01.09.2015 19:31:32

Ну и чем вся эта технология с кучей команд и ненужных компиляций лучше обычного заполнения файла style.css в привычном месте расположения, ведь браузер его так же понимает без всяких проблем?

Ответить

ildar.khasanshin ildar.khasanshin 01.09.2015 19:58:43

этим http://sass-lang.com/guide для меня больше всего нравится это $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Ответить

php_programmer php_programmer 02.09.2015 03:11:44

Если вы хотите понять, зачем нужны препроцессоры, то перейдите по ссылке на статью про Less. Конечно, sass и less несколько отличаются, но понять, зачем все это нужно, думаю, вы сможете.

Ответить

FiftyStars FiftyStars 08.09.2015 17:28:01

GALAPERIDOL, кратко или подробно? Если кратко, то: 1) использование переменных 2) разбиение файла на части в последующим импортом(в различных других файлах) 3) возможность создания файлов настройки, когда поменяв значение переменной в одном месте, сайт может измениться до неузнаваемости. 4) миксины. Пример вендорной миксины: @mixin box-sizing($value){ box-sizing: $value; -moz-box-sizing: $value; -webkit-box-sizing: $value; } Далее, чтобы назначить элементу все эти 3 свойства, например border-box мы пишем @include box-sizing(border-box) вместо: box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + вложенность элементов + встроенные функции для работы с различными типами данных +++++ много всего советую посмотреть на оф сайте что во что компилируется. В sass это может быть код в 3 строки, после компиляции в css это может стать 30 строками. Думаю все же 3 строки написать и в будущем редактировать проще чем 30 ------ДОБАВЛЕНО--------------- мдя, переносов строк конечно же нет....кому они нужны

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.