描述
该@if指令用于选择性地执行基于评估的表达式的结果的代码语句。该@if语句可以由几个@else if语句。让我们从下表中研究它们。
@if
描述
该@if指令接受SassScript表情和使用嵌套样式每当表达式的结果以外的任何其他虚假或者无效。
句法
@if expression { //CSS codes are written here }
例
以下示例演示了SCSS文件中@if指令的使用-
<html>
<head>
<title>Control Directives & Expressions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = "container">
<h2>Example for Control Directive & Expressions</h2>
<p>SASS stands for Syntactically Awesome Stylesheet. </p>
</div>
</body>
</html>接下来，创建文件style.scss。
style.scss
p {
@if 10 + 10 == 20 { border: 1px dotted; }
@if 7 < 2 { border: 2px solid; }
@if null { border: 3px double; }
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行以上命令；它将使用以下代码自动创建style.css文件-
style.css
p {
border: 1px dotted;
}@else if
描述
该@else如果语句用来与@if指令。每当@if语句失败时，将尝试@else if语句，如果它们也失败，则将执行@else。
句法
@if expression {
// CSS codes
} @else if condition {
// CSS codes
} @else {
// CSS codes
}
例
以下示例演示了@else if指令的使用-
<html>
<head>
<title>Control Directives & Expressions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = "container">
<h1>Example for Control Directive & Expressions</h1>
<p>SASS stands for Syntactically Awesome Stylesheet.</p>
</div>
</body>
</html>接下来，创建文件style.scss。
style.scss
$type: audi;
p {
@if $type == benz {
color: red;
} @else if $type == mahindra {
color: blue;
} @else if $type == audi {
color: green;
} @else {
color: black;
}
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行以上命令；它将使用以下代码自动创建style.css文件-
style.css
p {
color: green;
}作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1695.html
支付宝 
微信 