Изучаем 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
Теперь вам достаточно просто сохранить файл, и он автоматически скомпилируется.
А у меня на этом все. Надеюсь, вас заинтересовала данная тема и всем удачи!
-
Создано 01.09.2015 13:40:36
-
Михаил Русаков
Комментарии (4):
Ну и чем вся эта технология с кучей команд и ненужных компиляций лучше обычного заполнения файла style.css в привычном месте расположения, ведь браузер его так же понимает без всяких проблем?
Ответить
этим http://sass-lang.com/guide для меня больше всего нравится это $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
Ответить
Если вы хотите понять, зачем нужны препроцессоры, то перейдите по ссылке на статью про Less. Конечно, sass и less несколько отличаются, но понять, зачем все это нужно, думаю, вы сможете.
Ответить
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 ------ДОБАВЛЕНО--------------- мдя, переносов строк конечно же нет....кому они нужны
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.