srcmini@mixin指令定义了混合。它用于在mixin名称之后可选地包括变量和参数。
让我们以一个示例来演示如何定义一个mixin。在这里, 我们获取一个名为” simple.html”的HTML文件, 其中包含以下代码。
<html>
<head>
<title>Define a mixin example</title>
<link rel="stylesheet" type="text/css" href="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
执行完上述命令后, 它将使用以下代码自动创建一个名为” simple.css”的CSS文件。
. cont {
color: #FF0000 ;}你可以看到自动创建的CSS文件。
输出
应用CSS后, 请查看输出。
评论前必须登录！
注册