Sass控制指令是Sass的一种重要特性，它可以帮助我们更好地管理和控制CSS代码。它可以让我们使用条件语句、循环语句和函数来构建复杂的样式表。
Sass控制指令包括@if、@for、@each、@while和@mixin。这些控制指令都有自己的特定用途，并且可以帮助我们在CSS中实现一些复杂的功能。
// @if 条件语句
@if $variable == true {
// CSS code here
}
// @for 循环语句
@for $i from 1 through 10 {
// CSS code here
}
// @each 遍历语句
@each $item in $list {
// CSS code here
}
// @while 循环语句
$i: 6; // 初始化循环计数器
@while $i > 0 { // 条件为真时执行循环体
// CSS code here
$i: $i - 1; // 更新循环计数器
}
// @mixin 混合语句
@mixin my-style {
color: #f00;
font-size: 12px;
}
.my-class {
@include my-style; // 调用 mixin 语句，将 my-style 的样式应用到 .my-class 类上面。
} @ at-root 指令是嵌套规则的集合，它能够在文档的根位置创建样式块。
默认情况下， @ at-root 选择器不包括选择器。 通过使用 @ at-root ，我们可以将样式移动到嵌套指令之外。
例如，使用以下代码创建一个SASS文件:
@media print {
.style {
height: 8px;
@at-root (without: media) {
color: #808000;;
}
}
上面的代码将编译成CSS文件，如下所示:
@media print {
.style {
height: 8px;
}
}
.style {
color: #808000;
}
以下示例演示如何在SCSS文件中使用 - @
<!doctype html>
<head>
<title>At-root Example</title>
<link rel="stylesheet" href="atroot.css" type="text/css" />
</head>
<body class="container">
<h2>Example using at-root</h2>
<p class="style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
接下来，创建文件 atroot.scss 。
h2{
color: #808000;
background-color: #DB7093;
@at-root {
.style{
font-size: 20px;
font-style: bold;
color: #B8860B;
}
}
}
您可以通过使用以下命令让SASS查看文件，并在SASS文件更改时更新CSS:
sass --watch C:rubylibsassatroot.scss:atroot.css
接下来执行上面的命令，它将用下面的代码自动创建 atroot.css 文件:
h2 {
color: #808000;
background-color: #DB7093;
}
.style {
font-size: 20px;
font-style: bold;
color: #B8860B;
}
让我们执行以下步骤，看看上面的代码如何工作:
让我们执行以下步骤，看看上面的代码如何工作:
在浏览器中打开此HTML文件，将显示如下输出。
描述命名空间用于在通用名称下对mixin进行分组。 使用命名空间可以避免名称冲突，并从外部封装mixin组。例子以下示例演示如何在L...
描述使用 extend 选择器匹配嵌套选择器。例子下面的例子演示了在LESS文件中使用扩展嵌套选择器：extend_syntax.htm!doctype html...
描述每当一个mixin定义在另一个mixin中时，它也可以用作返回值。例子下面的示例演示了如何在LESS文件中使用mixin htmlheadlink r...
描述可选允许您在文件不存在时导入文件。 如果要导入的文件不存在并且未使用可选关键字，则LESS会抛出 FileError 错误并停止编译...
描述Data-uri是统一资源标识符(URI)模式，其在网页中嵌入资源。 当没有给出MIME类型时，节点使用mime包来控制正确的MIME类型。参...
描述它降低了元素中颜色的亮度。 它有以下参数： color ：它代表颜色对象。amount ：它包含0-100%之间的百分比。 方法：它是可选...
描述它丢弃来自中所选元素的颜色饱和度。它具有以下参数︰ color ：它代表一个颜色对象。例子下面的示例演示了在LESS文件中使用...
描述 average 函数计算每个通道(RGB)的两种输入颜色的平均值。参数： color1：颜色对象。 color2：颜色对象。返回：颜色。例子下...
