Sass（包含mixin用法）

2022-05-07 IT知识 SASS-SCSS

@include指令用于将mixin定义的样式包含到文档中。使用混入的名称, 并将可选参数传递给混入。
让我们以一个示例来演示如何在SCSS文件中包括一个混合。在这里, 我们获取一个名为” simple.html” 的HTML文件, 其中包含以下代码。

< html> < head> < title> Mixin example of sass< /title> < link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/> < /head> < body> < div class="cont"> < h2> Include a mixin example< /h2> < h3> Different Colors< /h3> < ul> < li> Red< /li> < li> Green< /li> < li> Blue< /li> < /ul> < /div> < /body> < /html>

取一个具有以下代码的SCSS文件名” simple.scss” ：

@mixin style {.cont{ background-color: #77C1EF; color: #ffffff; }h3 { color: #ffffff; }}@include style;

打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
【Sass（包含mixin用法）】萨斯– watch simple.scss：simple.css

Sass（包含mixin用法）

文章图片
执行完上述命令后, 它将创建一个名为？simple.css？的CSS文件。带有以下代码的文件。

.cont {background-color: #77C1EF; color: #FF0000; }h3 {color: #FF0000; }

你可以看到自动创建的CSS文件。

Sass（包含mixin用法）

文章图片
输出
应用CSS后, 请查看输出。

Sass（包含mixin用法）

文章图片

推荐阅读

上一篇：Sass继承/扩展用法详解

下一篇：Sass @media指令用法示例