От автора: блок стилей передается в миксин, чтобы затем быть помещенным в стилях. Стили включаются в миксин в месте, где расположена директива Sass content.
Диапазон переменных и блоки контента
Блок контента оценивается в диапазоне, который передается в миксин, где блок был определен. В следующем примере продемонстрирована передача блоков контента в миксин в файле SCSS: pass_content.htm
|
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 = "block"> <h1>Example using passing content blocks</h1> <p>Different Colors</p> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </div> </body> </html> |
После этого создайте файл sample.scss.
|
1 2 3 4 5 6 7 8 |
@mixin element { @content; } @include element { .block { color: green; } } |
С помощью следующей команды вы можете указать SASS просматривать файл и обновлять CSS каждый раз, когда изменяется файл SASS:
|
1 |
sass --watch C:\ruby\lib\sass\sample.scss:sample.css |
Затем выполните приведенную выше команду; она автоматически создаст файл sample.css со следующим кодом:
|
1 2 3 |
.block { color: green; } |
Результат на выходе
Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше HTML-код в файле pass_content.scss.
Откройте этот HTML-файл в браузере, вы должны увидеть следующее:
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
