Русская Википедия:Sass

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Шаблон:Карточка программы

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

См. также

Литература

Примечания

Шаблон:Примечания

Ссылки

Шаблон:Языки таблиц стилей

Партнерские ресурсы
Криптовалюты
Магазины
Хостинг
Разное

Источник — http://wikihandbk.com/ruwiki/index.php?title=Русская_Википедия:Sass&oldid=8801100