Sass - Diretiva @if

Descrição

A diretiva @if aceita as expressões SassScript e usa os estilos aninhados sempre que o resultado da expressão for diferente de falso ou nulo .

Sintaxe

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

Exemplo

O exemplo a seguir demonstra o uso da diretiva @if no arquivo 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>

Em seguida, crie o arquivo style.scss .

style.scss

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

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

A seguir, execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

p {
   border: 1px dotted; 
}

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima no arquivo @ if_directive.html .
Abra este arquivo HTML em um navegador, uma saída conforme abaixo é exibida

↰ Previous page