Примеры работы с SCSS

28.12.2019

В данной заметке опишу самые часто используемые возможности SCSS.

Подключение других файлов

 
@import "reset.scss";

- вставляет содержимое файла reset.scss в указанное место скомпилированного css.

Переменные:

 
$main_color : #ff00ff;

.block {
     background-color: $main_color;
}

Переменные можно вынести в отдельный конфигурационный файл и подключить его через @import "config.scss";.

Вложенность

Базовое использование:

 
.block {
    margin-bottom: 20px;
    .link {
        color : green;
    }
}

Также поддерживаются стандартные операторы, такие как >, +...

 
.block {
    .link {
        color : green;
    }

    >.link {
        color : aqua;
    }
}

Если внутри правила нужно обратиться к самому элементу, например, для hover, нужно использовать &:

 
.block {
    &:hover {
        background-color: magenta;
    }
}

Другой случай, когда можно использовать &, это наличие дополнительного класса, скажем .block.active:

 
.block {
    &:hover {
        background-color: magenta;
    }
    &.active {
        background-color: chocolate;
    }
}

Еще можно воспользоваться такой записью div &, для обозначения вложенности:

 
.link {
    div & {
        border: 1px solid red;
    }
}

- эта запись эквивалентна:

 
div {
   .link {
        border: 1px solid red;
    }
}

в результате компиляции обоих вариантов поручим:

 
div .link {
  border: 1px solid red;
}

Такой способ записи служит именно для упрощения компоновки кода.

Шаблоны

Синтаксис:

 
%tplPromoBlock {
    background-color: #C0C0C0;
    width: 200px;
    height: 150px;
    margin: 0 auto;
    padding: 100px;
}

Дальше его можно добавить нужному блоку @extend %tplPromoBlock;:

 
.block {
    margin-bottom: 20px;
    &:hover {
        background-color: magenta;
    }
    @extend %tplPromoBlock;
}

Стоит обратить внимание на:

Шаблоны нужно размещать вначале кода, иначе их значение нельзя будет переопределить свойствами блока.
Вместо шаблона %tplPromoBlock; можно использовать обычный класс .PromoBlock;, разница в том, что шаблон не добавляется в скомпилированный css как отдельный блок.

Миксины (mixin)

Миксины очень похожи на функции, т.к. в них можно предавать переменные и на выходе будет результат их выполнения.

Объявление:

 
@mixin soBGColor($color) {
    background-color: $color;
}

Вызов происходит через @include:

 
%tplPromoBlock {
    @include soBGColor(#C0C0C0);
}

Математические выражения

Также есть возможность использовать математические операции, например посчитать ширину блока:

 
%tplPromoBlock {
    @include soBGColor(#C0C0C0);
    width: 300px / 1200px * 100%;
}

учитывая, что вычисления могут быть внутри миксинов и зависеть от переданных параметров, то возможностей открывается масса.

Циклы:

Также есть возможность использовать циклы:

 
@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em + $i;
    }
}

Общий код:

index.html (Download)

 <!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="styles/main.css">
</head>
<body>


<div class="block_1">
    <p>
        <a class="link" href="#">Link 1</a>
    </p>
    <p>
        <a class="link" href="#">Link 2</a>
    </p>
    <a class="link" href="#">Link -!-</a>
</div>

<div class="block_2">
    <p>
        <a class="link" href="#">Link 3</a>
    </p>
    <p>
        <a class="link" href="#">Link 4</a>
    </p>
</div>

</body>
</html>

main.scss (Download)

 // Подключение "reset"
@import "reset.scss";

// Настройки по умолчанию:
@import "config.scss";


@mixin soBGColor($color) {
    background-color: $color;
}

/*
    Main
*/
body {
    color: $main_color;
}

%tplPromoBlock {
    @include soBGColor(#C0C0C0);
    width: 300px / 1200px * 100%;
    height: 150px;
    margin: 0 auto;
    padding: 100px;
}

.block_1 {
    margin-bottom: 20px;
    .link {
        color : green;
    }
    >.link {
        color : aqua;
    }
    &:hover {
        @include soBGColor(magenta);
    }
    &.active {
        @include soBGColor(chocolate);
    }
    @extend %tplPromoBlock;
}

.block_2 {
    .link {
        color : blue;
    }
    @extend %tplPromoBlock;
}


//.link {
//    div & {
//        border: 1px solid red;
//    }
//}

@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em + $i;
    }
}

config.scss (Download)

 $main_color : #ff00ff;

Категории: Web, CSS