📅  最后修改于: 2020-12-25 04:05:11             🧑  作者: Mango
@if指令根据表达式的结果指定代码语句的执行。 @if语句可以与多个@if else语句和一个@else语句一起使用。
@if指令有两种类型:
Sass @if指令接受SassScript表达式,并且如果表达式返回除false或null之外的其他任何值,则使用嵌套样式。
例如:如果您使用以下SCSS文件。
SCSS语法:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译后,它将创建一个具有以下代码的CSS文件:
CSS语法:
p {
border: 1px solid; }
让我们以一个示例来演示Sass @if指令的用法。我们有一个名为“ simple.html”的HTML文件,其中包含以下数据。
HTML档案:simple.html
@if Directive Example
Welcome to JavaTpoint
A solution of all technology.
创建一个名为“ simple.scss”的SCSS文件,其中包含以下数据。
SCSS文件:simple.scss
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
将两个文件都放在根文件夹中。
现在,打开命令提示符并运行watch命令,以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码: sass –watch simple.scss:simple.css
它将在同一目录中自动创建一个名为“ simple.css”的普通CSS文件。
例如:
创建的CSS文件“ simple.css”包含以下代码:
p {
border: 1px solid; }
现在,执行上面的html文件,它将读取CSS值。
输出: