От автора: для включения миксинов в документ используется директива @include. Она обязательно должна содержать имя миксина, а также опционально через Sass include могут передаваться дополнительные аргументы. Стили, определяемые миксином, могут быть включены в текущее правило.
В следующем примере продемонстрировано включение миксина в файле SCSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <title> Mixin example of sass</title> <link rel = "stylesheet" type = "text/css" href = "sample.css"/> </head> <body> <div class = "cont"> <h2>Example using include</h2> <h3>Different Colors</h3> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </div> </body> </html> |
Затем создайте файл sample.scss.
|
1 2 3 4 5 6 7 8 9 10 |
@mixin style { .cont{ background-color: #77C1EF; color: #ffffff; } h3 { color: #ffffff; } } @include style; |
С помощью следующей команды вы можете указать SASS просматривать файл и обновлять CSS каждый раз, когда изменяется файл SASS:
|
1 |
sass --watch C:\ruby\lib\sass\sample.scss:sample.css |
Затем выполните приведенную выше команду; она автоматически создаст файл sample.css со следующим кодом:
|
1 2 3 4 5 6 7 8 |
.cont { background-color: #77C1EF; color: #ffffff; } h3 { color: #ffffff; } |
Результат на выходе
Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше html-код в файле sample.htm.
Откройте этот HTML-файл в браузере, вы должны увидеть следующее:
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
