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

Дата публикации: 2017-10-04

От автора: значения Sass Script могут приниматься в качестве аргументов миксинов, которые передаются при включении миксина, они становятся доступными в миксине в качестве переменных. Аргумент — это имя переменной, которое добавляется через запятую при определении миксина. Существует два типа аргументов.

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

Аргументы-переменные

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

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

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

@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;
}

.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...);
}

@mixin colors($background) {

background-color: $background;

}

$values: magenta, red, orange;

.container {

@include colors($values...);

}

Приведенный выше код будет скомпилирован в такой файл CSS:

.container {
   background-color: magenta;
}

.container {

background-color: magenta;

}

Пример. В следующем примере продемонстрировано использование аргументов в файле SCSS: argument.htm

<html>
   <head>
      <title> Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "argument.css"/>
   </head>
   <body>
      <div class = "style">
         <h1>Example using arguments</h1>
         <p>Different Colors</p>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

<html>

<head>

<title> Mixin example of sass</title>

</head>

<body>

<h1>Example using arguments</h1>

<p>Different Colors</p>

<ul>

<li>Green</li>

</ul>

</div>

</body>

</html>

Затем создайте файл argument.scss.

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

@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

1	sass --watch C:\ruby\lib\sass\argument.scss:argument.css

Затем выполните приведенную выше команду; она автоматически создаст файл arguments.css со следующим кодом:

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

.style {

background-color: #77C1EF;

border: 2px solid black;

width: 450px;

}

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

Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код: сохраните приведенный выше HTML-код в файле arguments.htm. Откройте этот HTML-файл в браузере, вы должны увидеть следующее:

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