SASS/SCSS

Материал из Энциклопедия о программировании
Перейти к: навигация, поиск

Empty content!

SASS (Syntactically Awesome Stylesheets) и SCSS (Sassy CSS) — метаязык-расширение CSS на его основе, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов. Также это одноимённый модуль и препроцессор для CSS, включенный в HAML.

Возможности

SASS/SCSS значительно расширяет возможности обычного CSS, и делает работу более удобной и быстрой. Он предоставляет такие возможностями как переменные, вложенности, миксины, наследование и др.

Вариации

SASS/SCSS имеет 2 варианта синтаксиса:

  1. SASS — отсутствие фигурных скобок, и точек с запятой в конце стейтментов. Вложенные элементы реализованы с помощью отступов, а окончание стейтментов - с помощью переносов строк;
  2. SCSS — фигурные скобки и точки с запятой в конце стейтментов, как в CSS.

Особенности

Вложенные правила

Одна из ключевых особенностей SASS — вложенные правила, которые облегчают процесс создания и редактирования вложенных селекторов.

#header
	background: #FFF
	.err
		color: #FF0000  
	a
		text-decoration: none
	&:hover
		text-decoration: underline

Будет транслировано в:

#header {
	background: #FFF; 
}
#header .err {
	color: #FF0000; 
}
#header a {
	text-decoration: none; 
}
#header a:hover {
	text-decoration: underline; 
}

Переменные

SASS/SCSS имеет константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей то же самое можно сделать с блоком атрибутов стиля.

$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» см. также сдед.: