Sass - Operações numéricas

Descrição

O SASS permite operações matemáticas como adição, subtração, multiplicação e divisão. Você não pode usar unidades incompatíveis, como px * px ou ao adicionar um número com px e em para produzir CSS inválido. Portanto, o SASS exibirá um erro se você usar unidades inválidas no CSS. O SASS oferece suporte a operadores relacionais como <,>, <=,> = e operadores de igualdade = =,! =.

Divisão e /

SASS permite a operação de divisão (/) em números como fazemos em CSS normal. Você pode usar a operação de divisão (/) em três situações.

Se o valor for armazenado em uma variável ou retornado por função.
Se os parênteses estiverem fora da lista e o valor dentro, o valor ficará entre parênteses.
Se o valor é uma parte da expressão aritmética.

Subtração, Números Negativos e -

Usando SASS, você pode realizar algumas operações como subtração de números (10px - 5px), negação de um número (-5), operador de negação unário (- $ myval) ou usando identificador (tamanho da fonte). Em alguns casos, eles são úteis como -

você pode usar espaços de ambos os lados - ao realizar a subtração de números
você pode usar o espaço antes do -, mas não depois do número negativo ou uma negação unária
você pode colocar a negação unária entre parênteses separados por espaço (5px (- $ myval))

Examples are −

Ele pode ser usado em identificadores como font-size e SASS permite apenas identificadores válidos.
Ele pode ser usado com dois números sem espaço, ou seja, 10-5 é semelhante a 10 - 5.
Pode ser usado como início de um número negativo (-5).
Ele pode ser usado sem considerar espaço, como 5 - $ myval é semelhante a 5 - $ myval.
Ele pode ser usado como operador de negação unário (- $ myval).

Exemplo

O exemplo a seguir demonstra o uso de operações numéricas no arquivo SCSS -

<html>
   <head>
      <title>Number Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <p class = "para1">SASS stands for Syntactically Awesome Stylesheet..</p>
         <h2>Hello...Welcome to Sass</h2>
         <h3>Hello...Welcome to Sass</h3>
         <p class = "para2">Hello...Welcome to Sass</p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.scss .

style.scss

$size: 25px;

h2{
   font-size: $size + 5;
}

h3{
   font-size: $size / 5;
}

.para1 {
   font-size: $size * 1.5;
}

.para2 {
   font-size: $size - 10;
}

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

h2 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}

Resultado

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

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

↰ Previous page