Лекция
Привет, сегодня поговорим про sass/scss, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое sass/scss , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.
Sass (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Язык Sass имеет два синтаксиса:
Одна из ключевых особенностей Sass — вложенные правила, которые облегчают процесс создания и редактирования вложенных селекторов.
#header
background: #FFFFFF
.error
color: #FF0000
a
text-decoration: none
&:hover
text-decoration: underline
Будет скомпилировано в:
#header {
background: #FFFFFF;
}
#header .error {
color: #FF0000;
}
#header a {
text-decoration: none;
}
#header a:hover {
text-decoration: underline;
}
Sass добавляет к CSS константы и примеси. Об этом говорит сайт https://intellect.icu . Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей то же самое можно сделать с блоком атрибутов стиля.
$linkColor: #00F a color: $linkColor
Будет скомпилировано в:
a {
color: #00F;
}
Пример использования примесей, подобие функций:
@mixin border-radius($radius,$border,$color) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
border:$border solid $color
}
.box { @include border-radius(10px,1px,red); }
Будет скомпилировано:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
border: 1px solid red;
}
Надеюсь, эта статья про sass/scss, была вам полезна, счастья и удачи в ваших начинаниях! Надеюсь, что теперь ты понял что такое sass/scss и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3
Из статьи мы узнали кратко, но содержательно про sass/scss
Комментарии