SASS для Начинающих: Миксины, Наследование, Операторы

В этом уроке мы рассмотрим миксины, наследование и математические операторы в SASS.

01. SASS Миксины — Создание многоразовых CSS правил

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

SASS Миксины — Пример

Давайте создадим обычную миксину для border-radius. Чтобы ее создать нам нужно сперва определить, что она является миксиной с помощью @mixin. Название, начинающееся со сзначка $ — это переменная, которая может быть чем угодно. В нашем случае $radius — это переменная. Если вы напишете $rdus вместо $radius это тоже сработает.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Только что мы создали простую миксину, но пока еще ее не использовали. Для этого нужно написать @include, а затем имя самой миксины. Давайте используем нашу border-radius миксину к классу .card.

.card{
  min-height: 200px;
  @include border-radius(4px);
}

SASS компилирует этот код в нативный CSS.

Вот как он будет выглядеть:

.card {
  min-height: 200px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px; 
}

Мы можем создать множество различных миксин как в примере выше и использовать их по необходимости.

Давайте создадим еще одну миксину для ссылки (анкора), в которой будут заданы стили для различных состояний: hover, link, visited и active.

@mixin link ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;
    }
    &:active {
      color: $active;
    }
  }
}

Если вы еще не поняли, как использовать эти миксины, то все очень просто. Измените переменную color в миксине ссылки на цвет, который вам нравится. Предположим, у нас есть ссылка внутри класса .card:

.card{
  @include link(red, green, yellow, pink);
}

SASS компилирует это в:

.card a {
  color: red; 
}
.card a:visited {
   color: green; 
}
.card a:hover {
  color: yellow; 
}
.card a:active {
  color: pink; 
}

02. SASS Наследование — CSS правила от одного селектора к другому

SASS Наследование позволяет переносить CSS правила одного селектора к другому. Затем к новому селектору можно добавить дополнительные правила.

.selector-2{
@extend .selector-1;
background:#fff000;
}

SASS Наследование — Пример

В этом примере я покажу, как использовать SASS наследование на реальном приложении. Наиболее стандартный пример — это кнопка. Предположим, что у вас есть .btn класс для кнопки и еще множество других кнопок по всему сайту. Давайте сперва зададим стандартное правило для кнопки с классом .btn:

.btn{
 text-decoration:none;
 color:#666;
 border:1px solid #f0f0f0;
 height:40px;
 line-height:40px;
 padding:0 20px;
}

Если нам нужна другая кнопка с зеленым фоном и белым текстом, то мы просто возьмем стили стандартной кнопки с помощью @extend и добавим необходимые правила:

.green-btn{
@extend .btn;
background:green;
color:#FFF;
border-color:green;
}

Так будет выглядеть CSS для SASS кода выше:

.btn, .green-btn {
  text-decoration: none;
  color: #666;
  border: 1px solid #f0f0f0;
  height: 40px;
  line-height: 40px;
  padding: 0 20px; 
}

.green-btn {
  background: green;
  color: #FFF;
  border-color: green; 
}

Заполняющие селекторы (placeholder selectors): %example

В SASS есть уникальный селектор, которого не существует в обычном CSS, который называют “заполняющим селектором”. Этот селектор создан для того, чтобы использовать его с @extend. С его помощью мы можем писать стили, которые не хотим использовать в HTML. Предположим, что класс .btn не используется в HTML и у нас есть только .btn-green, .btn-red и так далее. Мы можем добиться такого же результата с помощью следующего кода:

%btn{
 text-decoration:none;
 color:#666;
 border:1px solid #f0f0f0;
 height:40px;
 line-height:40px;
 padding:0 20px;
}

И использовать:

.green-btn{
@extend %btn;
background:green;
color:#FFF;
border-color:green;
}

Так выглядит CSS вывод:

.green-btn {
  text-decoration: none;
  color: #666;
  border: 1px solid #f0f0f0;
  height: 40px;
  line-height: 40px;
  padding: 0 20px; 
}

.green-btn {
  background: green;
  color: #FFF;
  border-color: green; 
}

ВАЖНО: В принципе, использовать наследование не самая лучшая идея, так как для этих же целей отлично служат миксины. Если вы считаете, что использование наследования необходимо, то не забывайте про заполняющие селекторы, с помощью которых можно значительно сократить код.

03. SASS Операторы — Математические вычисления с помощью SASS

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

Примечание: существует еще один оператор, которые мы уже используем для определения переменных в SASS. 

SASS Операторы — Пример

Использование базовых операторов:

h3{
  font-size: 5px + 5; // Правильный оператор
  line-height: 1rem + 0.5rem; // Еще один правильный оператор
  min-width: 50% + 5px; // Неправильный оператор, так как используются разные единцицы измерения
}

Никогда не совмещайте разные единицы измерения в операторах! 

Умножение:

.box{
  width: 20% * 2; // Правильно
  height: 60px * 2px; // Неправильно
  min-width: 20% * 10px; // Неправильно
}

Обратите внимание, что нельзя умножить 60px на 2px, потому что получится 120pxpx. Как и в примере со сложением мы не можем умножать проценты на пиксели.

.box{
width: 100px/2;
}

При делении 100px/2 и 100px/2px вы получите разные результаты:

.box{
width: 100px/2; // = 50px 
height:100px/2px // = 50 
min-width: 100%/10px // Неправильно - 10%px 
}