Sass Script — аргументи миксинов

342

Від автора: значення Sass Script можуть прийматися в якості аргументів миксинов, які передаються при включенні міксина, вони стають доступними в миксине в якості змінних. Аргумент — це ім’я змінної, яке додається через кому при визначенні міксина. Існує два типи аргументів.

Аргументи ключового слова

Аргументи-змінні

Аргументи ключового слова

Для включення у міксин може використовуватися аргумент — точне слово. Такі аргументи можуть передаватися в будь-якому порядку, а значення аргументів за замовчуванням можуть бути опущені. Наприклад, створіть файл SASS з наступним кодом:

@mixin bordered($color, $width: 2px) {
color: #77C1EF;
border: $width solid black;
width: 450px;
}
.style {
@include bordered($color:#77C1EF, $width: 2px);
}

Наведений вище код буде складати в такий файл CSS:

.style {
color: #77C1EF;
border: 2px solid black;
width: 450px;
}

Аргументи-змінні

Аргументи-змінні використовуються для передачі у міксин довільної кількості аргументів. Вони містять аргументи ключового слова, передані у функцію або міксин. До аргументів ключового слова, переданим у міксин, можна отримати доступ за допомогою функції ключове_слово($аргументи), яка повертає значення, відповідні String.

Наприклад, створіть файл SASS з наступним кодом:

@mixin colors($background) {
background-color: $background;
}
$values: magenta, red, orange;
.container {
@include colors($values…);
}

Наведений вище код буде складати в такий файл CSS:

.container {
background-color: magenta;
}

Приклад. У наступному прикладі продемонстровано використання аргументів у файлі SCSS: argument.htm

Mixin example of sass

Example using arguments

Different Colors

  • Red
  • Green
  • Blue

Потім створіть файл argument.scss.

@mixin bordered($width: 2px) {
background-color: #77C1EF;
border: $width solid black;
width: 450px;
}
.style {
@include bordered(2px);
}

За допомогою наступної команди ви можете вказати SASS переглядати файл і оновлювати CSS кожен раз, коли змінюється файл SASS:

sass –watch C:\ruby\lib\sass\argument.scss:argument.css

Потім виконайте наведену вище команду; вона автоматично створить файл arguments.css з наступним кодом:

.style {
background-color: #77C1EF;
border: 2px solid black;
width: 450px;
}

Результат на виході

Давайте виконаємо наступні дії, щоб побачити, як працює наведений вище код: збережіть наведений вище HTML-код у файлі arguments.htm. Відкрийте HTML-файл у браузері, ви повинні побачити наступне:

Sass Script — аргументи миксинов