Sass

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск
Sass
Тип

Компилирующий обработчик шаблонов

Разработчик

Nathan Weizenbaum, Chris Eppstein, Hampton Catlin

Операционная система

Кроссплатформенная

Последняя версия

3.2.12 (Media Mark)

Лицензия

MIT License

Сайт

sass-lang.com

Sass (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Язык Sass имеет два синтаксиса:

  • старый — sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
  • новый — SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.

Вложенные правила[править | править вики-текст]

Одна из ключевых особенностей 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
}

Переменные в CSS[править | править вики-текст]

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

$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; }

См. также[править | править вики-текст]

Литература[править | править вики-текст]

Ссылки[править | править вики-текст]