Sass - Directiva @if

Descripción

La directiva @if acepta las expresiones de SassScript y usa los estilos anidados siempre que el resultado de la expresión no sea falso o nulo .

Sintaxis

@if expression {  //CSS codes are written here }

Ejemplo

El siguiente ejemplo demuestra el uso de la directiva @if en el archivo SCSS:

<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>

A continuación, cree el archivo style.scss .

style.scss

p {
   @if 10 + 10 == 20   { border: 1px dotted;   }
   @if 7 < 2     { border: 2px solid;  }
   @if null    { border: 3px double; }
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

p {
   border: 1px dotted; 
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en el archivo @ if_directive.html .
Abra este archivo HTML en un navegador, se muestra una salida como la siguiente

↰ Previous page