Интернет магазин шабонов
Форма входа

Статьи сайта

Простое и легкое руководство о том, как понять Sass.

Недавно Thoriq Firdaus написал большую статью о начале работы с Sass, который показал, как установить и использовать этот в высшей степени полезный язык CSS препроцессора.

В этой статье мы постараемся вам дать немного больше понимания о том, что вы можете сделать с Sass и как разработчики используют его каждый день, чтобы создать лучший и более модульный код CSS. Thoriq Firdaus также показал, как можно использовать Sass из командной строки с помощью команды sass --watch.

Переменные


Одним из первых вещей, который вы должны будете переворить в голове является переменными. Переменные для хранения кусочков и частей многоразовой информации, например как значение цвета:
Код
$primary_color: #666666;  
   
  .button {  
  color: $primary_color;  
  }  
   
  .important {  
  color: $primary_color;  
  }

На первый взглят может показаться, что здесь нет никакой пользы, но представьте себе, что у вас более 3000 строк кода. В случае изменения своей цветовой схемы вам нужно будет заменить каждое значение цвета в CSS. С Sass вы можете просто изменить значение переменной $primary_color.

Переменные используются для хранения имен шрифтов, размеров, цветов и множество другой информации. Что это позволяет сделать, это перекрасить весь проект, изменить шрифты и другие ключевые аспекты, не касаясь фактических правил CSS. Все, что вам нужно сделать, это изменить некоторые переменные.

Вложение


Другая основная особенность Sass дает Вам возможность создать правила вложений. Давайте предположим, что вы создаете меню навигации. Вы имеете элемент nav который содержит неупорядоченный список, элементы списка и ссылки. В CSS вы можете сделать что-то вроде этого:
Код
#header nav {  
  /* Правила для области навигации */  
  }  
   
  #header nav ul {  
  /* Правила для меню */  
  }  
   
  #header nav li {  
  /* Правила для элементов списка */  
  }  
   
  #header nav a {  
  /* Правила для ссылок */  
  }

В селекторах мы много повторяемся. Если элементы имеют общие корни, то можем использовать вложенность и написать наши правила более простым способом.
Вот как указаный выше код может выглядеть в Sass:
Код
#header {  
  nav {  
  /* Правила для области навигации */  
  }  
   
  ul {  
  /* Правила для меню */  
  }  
   
  li {  
  /* Правила для элементов списка */  
  }  
   
  a {  
  /* Правила для ссылок */  
  }  
  }


Вложения чрезвычайно полезны, поскольку заставляют стилям быть более читабельными. С помощью вложения вместе с надлежащими отступами можно добиться очень четкой структуры кода, даже если у вас есть достаточно большое количество кода.
Один из недостатков вложенности, это то, что может привести к ненужной специфичности. В приведенном выше примере я ограничелся #header nav a. Вы также можете использовать #header nav ul li a которого, вероятно, будет слишком много.

В Sass, это намного легче, поскольку все, что вам нужно сделать, это поместить ваши правила. Ниже показаный код гораздо меньше читаем и вполне корректен.
Код
#header {  
  nav {  
  /* Правила для области навигации */  
  ul {  
  /* Правила для меню */  
  li {  
  /* Правила для элементов списка */  
  a {  
  /* Правила для ссылок */  
  }  
  }  
  }  
  }  
  }

Продление набора правил


Данные правила будут знакомы вам, если вы работаете с объектно-ориентированными языками. Лучше всего понять это на примере, давайте создадим 3 кнопки, которые будут иметь небольшие изменения друг друга.
Код
.button {  
  display: inline-block;  
  color: #000;  
  background: #333;  
  border-radius:4px;  
  padding:8px 11px;  
  }  
   
  .button-primary {  
  @extend .button;  
  background: #0091C2  
  }  
   
  .button-small {  
  @extend .button;  
  font-size:0.9em;  
  padding:3px 8px;  
  }

В .button-primary и .button-small все классы расширены от класса .button означая то, что они берут на себя все его свойства, а затем определяются самостоятельно.
Это бывает очень полезно во многих ситуациях, когда могут быть использованы вариации элемента. Сообщения (предупреждения / успех / ошибка), кнопки (цвета, размеры), типы меню и так далее, все это может использовать расширенную функциональность для большей эффективности CSS.
Одно предостережение которое выступает, это то, что они не будут работать в media запросах.

Mixins


Данный способ является еще одной любимой особенностью пользователей препроцессора. Многоразовые наборы правил - идеальное решение для правил конкретного производителя или для длинных правил CSS.

Как насчет создания правила переливания для элементов при наведении:
Код
@mixing hover-effect {  
  -webkit-transition: background-color 200ms;  
  -moz-transition: background-color 200ms;  
  -o-transition: background-color 200ms;  
  transition: background-color 200ms;  
  }  
   
  a {  
  @include hover-effect;  
  }  
   
  .button {  
  @include hover-effect;  
  }

Mixins также позволяет использовать переменные для определения значений. Мы могли бы переписать приведенный выше пример, чтобы дать нам контроль над точным временем перехода. Допустим нам хочется, чтобы для кнопок переход был чуть-чуть медленнее.
Код
@mixin hover-effect( $speed ) {  
  -webkit-transition: background-color $speed;  
  -moz-transition: background-color $speed;  
  -o-transition: background-color $speed;  
  transition: background-color $speed;  
  }  
   
  a {  
  @include hover-effect(200ms);  
  }  
   
  .button {  
  @include hover-effect(300ms);  
  }


Placeholder Selectors


Заполнители селекторов были введены с Sass 3.2, которые могли вызвать немного наворотов в генерируемом CSS коде. Взгляните на этот код, который создает сообщения об ошибках:
Код
.message {  
  font-size:1.1em;  
  padding:11px;  
  border-width:1px;  
  border-style:solid;  
  }  
   
  .message-danger {  
  @extend .button;  
  background: #C20030;  
  color:#fff;  
  border-color: #A8002A;  
  }  
   
  .message-success {  
  @extend .button;  
  background: #7EA800;  
  color:#fff;  
  border-color: #6B8F00;  
  }

Наиболее вероятно, что класс сообщения никогда не будет использоваться в нашем HTML: он был создан чтобы быть, но не используется как есть. Это приводит к наворотам в генерируемом CSS. Для того, чтобы ваш код был более эффективным вы можете использовать селектор заполнителя, который обозначен со знаком процента:
Код
%message {  
  font-size:1.1em;  
  padding:11px;  
  border-width:1px;  
  border-style:solid;  
  }  
   
  .message-danger {  
  @extend %button;  
  background: #C20030;  
  color:#fff;  
  border-color: #A8002A;  
  }  
   
  .message-success {  
  @extend %button;  
  background: #7EA800;  
  color:#fff;  
  border-color: #6D9700;  
  }


Операции


Трудно удержаться от каламбура, но я буду воздерживаться от каких-либо медицинских шуток. Операторы позволяют сделать некоторую математику в коде CSS и может быть чертовски полезным. Пример Sass разметки идеально подходит для этой демонстрации:
Код
.container { width: 100%; }  
   
  article {  
  float: left;  
  width: 600px / 960px * 100%;  
  }  
   
  aside {  
  float: rightright;  
  width: 300px / 960px * 100%;  
  }


Приведенный выше пример создает систему сетки на основе 960px с минимальными хлопотами. Следовательно он будет красиво компилироваться следующей CSS:
Код
.container {  
  width: 100%;  
  }  
   
  article {  
  float: left;  
  width: 62.5%;  
  }  
   
  aside {  
  float: rightright;  
  width: 31.25%;  
  }


Путем вычитания серого оттенка можно затемнить цвет, что делает отношения видимыми:
Код
$primary: #7EA800;  
   
  .message-success {  
  @extend %button;  
  background: $primary;  
  color:#fff;  
  border-color: $primary - #111;  
  }


Легче вычитается цвет, в результате оттенок будет темнее.

Функции


Есть большое количество функций для использования: функции число, строка и функций, Список функций, цветовых функций и многое другое.
Функция lighten и darken может быть использована для изменения цвета на более легкий или более темный цвет. Это лучше, чем вычитание оттенков, которое делает все еще более модульным и очевидным. Взгляните на наш пример, используя функцию затемнения.
Код
$primary: #7EA800;  
   
  .message-success {  
  @extend %button;  
  background: $primary;  
  color:#fff;  
  border-color: darken( $primary, 5 );  
  }

Второй аргумент функции требует процент затемнения. Вот несколько других самоочевидных функций цвета: desaturate, saturate, invert, grayscale.

Функция ceil, как и в PHP, возвращает число, округленное до ближайшего целого числа. Это может быть использовано при расчете ширины столбцов или если вы не хотите использовать много знаков после запятой в конечном CSS.
Код
.title {  
  font-size: ceil( $heading_size * 1.3314 );  
}


Особенности в Sass дать нам великую силу, чтобы написать лучше CSS с меньшим усилием. Правильное использование Mixins, Extends, функций и переменных сделает наши стили более легкими в обслуживании, более разборчивыми и легче писать.

Источник: http://www.hongkiat.com/
Добавлять комментарии могут только зарегистрированные пользователи.