Sass:@if指令

描述

@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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月27日 下午7:04
下一篇 2021年1月28日 下午5:40

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注