@mixin 指令用于定义mixin，它可选地包括mixin名称后面的变量和参数。
以下示例演示如何在SCSS文件中使用 @mixin :
<html> <head> <title> Mixin example of sass</title> <link rel="stylesheet" type="text/css" href="sample.css"/> </head> <body> <div class="cont"> <h1>Example using include</h1> <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3> </div> </body> </html>
接下来，创建文件 sample.scss 。
@mixin style {
.cont{
color: #77C1EF;
}
}
@include style;
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:rubylibsasssample.scss:sample.css
接下来执行上面的命令，它将自动创建 sample.css 文件，代码如下:
.cont {
color: #77C1EF;
}
让我们执行以下步骤，看看上面的代码如何工作:
将上述html代码保存在 sample.htm 文件中。
在浏览器中打开此HTML文件，将显示如下输出。
下表列出了您可以在SASS中使用的所有规则和指令。序号指令和描述1@import 它导入SASS或SCSS文件，它直接获取要导入的文件名。2@m...
描述扩展连接到一个选择器，它看起来类似于具有选择器作为参数的伪类。 当规则集具有许多选择器时，则关键字扩展可以应用于任何...
描述它添加属性值到最后。例子下面的例子演示了在LESS文件中使用合并逗号功能：!doctype htmlhead titleMerge Comma/title link ...
描述 @import(less)会将文件导入为LESS文件，而不管文件扩展名是什么。 这是在版本1.4.0 中发布的。例子下面的示例演示了在LESS...