Wordyblend logo

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

Frontend разработка

В этом уроке мы рассмотрим миксины, наследование и математические операторы в 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. 

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 
}

Предыдущий урок: Вложенные стили, фрагменты и импорт в SASS