Sass(定义混合示例详解)

@mixin指令定义了混合。它用于在mixin名称之后可选地包括变量和参数。
让我们以一个示例来演示如何定义一个mixin。在这里, 我们获取一个名为” simple.html” 的HTML文件, 其中包含以下代码。

< html> < head> < title> Define a mixin example< /title> < link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/> < /head> < body> < div class="cont"> < h1> Define a mixin directive.< /h1> < h3> It is used to include optionally the variables and arguments after the name of the mixin.< /h3> < /div> < /body> < /html>

取一个具有以下代码的SCSS文件名” simple.scss” :
@mixin style {.cont{ color: #FF0000 ; }}@include style;

打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
萨斯– watch simple.scss:simple.css
Sass(定义混合示例详解)

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

【Sass(定义混合示例详解)】你可以看到自动创建的CSS文件。
Sass(定义混合示例详解)

文章图片
输出
应用CSS后, 请查看输出。
Sass(定义混合示例详解)

文章图片

    推荐阅读