От автора: директива @mixin используется для определения миксинов. Она включает необязательные переменные и аргументы, которые следуют после имени миксина.
Пример
Следующий пример иллюстрирует, как используются миксины Sass в файле SCSS: sample.htm
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <title> Mixin example of sass</title> <link rel = "stylesheet" type = "text/css" href = "sample.css"/> </head> <body> <div class = "cont"> <h1>Example using include</h1> <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3> </div> </body> </html> |
Затем создайте файл sample.scss.
|
1 2 3 4 5 6 |
@mixin style { .cont{ color: #77C1EF; } } @include style; |
С помощью следующей команды вы можете указать SASS просматривать файл и обновлять CSS каждый раз, когда изменяется файл SASS:
|
1 |
sass --watch C:\ruby\lib\sass\sample.scss:sample.css |
Затем выполните приведенную выше команду; она автоматически создаст файл sample.css со следующим кодом —
|
1 2 3 |
.cont { color: #77C1EF; } |
Результат на выходе
Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше HTML-код в файле sample.htm.
Откройте этот HTML-файл в браузере, вы должны увидеть следующее:
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
