锐客网

  1. 首页 > 睿知 > it技术 > >

SASS将内容块传递给Mixin

IT知识SASS-SCSS

内容块被传递到样式中的位置的mixin。 Sass 3.2版中添加了此功能。样式包含在@content指令位置的mixin中。
内容块在范围中指定, 并且范围在定义块的mixin中传递。
Le举例说明如何将内容块传递到SCSS文件中的mixin。
使用以下代码创建一个名为” simple.html” 的HTML文件。

< html> < head> < title> Pass content block to mixin example< /title> < link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.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>

现在, 创建一个名为” simple.scss” 的SCSS文件, 其代码如下：
@mixin element{ @content; } @include element{ .block{ color: blue; } }

打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
萨斯– watch simple.scss：simple.css
SASS将内容块传递给Mixin

文章图片
执行完上述命令后, 它将使用以下代码自动创建一个名为” simple.css” 的CSS文件。
.block { color: blue; }

你可以看到自动创建的CSS文件。
SASS将内容块传递给Mixin

文章图片
输出
【SASS将内容块传递给Mixin】应用CSS后, 请查看输出。
SASS将内容块传递给Mixin

文章图片

    推荐阅读


    上一篇：Sass 4种输出样式详细用法

    下一篇：Sass预处理用法示例