Sass

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

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

Разработчик

Nathan Weizenbaum, Chris Eppstein, Hampton Catlin

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

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

Первый выпуск

2007

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

3.4.15 (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; 
}

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

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

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