Всем привет! Сегодня начнем изучать 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
Теперь вам достаточно просто сохранить файл, и он автоматически скомпилируется.
А у меня на этом все. Надеюсь, вас заинтересовала данная тема и всем удачи!
