Від автора: значення 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-файл у браузері, ви повинні побачити наступне: