Sass - Operazioni sui numeri

Descrizione

SASS consente operazioni matematiche come addizione, sottrazione, moltiplicazione e divisione. Non è possibile utilizzare unità incompatibili come px * px o durante l'aggiunta di un numero con px e em porta a produrre CSS non validi. Pertanto, SASS visualizzerà un errore se si utilizzano unità non valide in CSS. SASS supporta operatori relazionali come <,>, <=,> = e operatori di uguaglianza = =,! =.

Divisione e /

SASS consente operazioni di divisione (/) sui numeri come facciamo nei normali CSS. È possibile utilizzare l'operazione di divisione (/) in tre situazioni.

Se il valore è memorizzato in una variabile o restituito dalla funzione.
Se le parentesi sono al di fuori dell'elenco e il valore è all'interno, il valore verrà racchiuso tra parentesi.
Se il valore è una parte dell'espressione aritmetica.

Sottrazione, numeri negativi e -

Utilizzando SASS, è possibile eseguire alcune operazioni come la sottrazione di numeri (10px - 5px), la negazione di un numero (-5), l'operatore di negazione unario (- $ myval) o l'utilizzo dell'identificatore (font-size). In alcuni casi, sono utili come:

è possibile utilizzare spazi su entrambi i lati di - quando si esegue la sottrazione di numeri
puoi usare lo spazio prima del -, ma non dopo il numero negativo o una negazione unaria
puoi racchiudere la negazione unaria tra parentesi separate da spazio (5px (- $ myval))

Examples are −

Può essere utilizzato in identificatori come font-size e SASS consente solo identificatori validi.
Può essere utilizzato con due numeri senza spazio, ad esempio 10-5 è simile a 10-5.
Può essere utilizzato come inizio di un numero negativo (-5).
Può essere utilizzato senza considerare lo spazio, ad esempio 5 - $ myval è simile a 5 - $ myval.
Può essere usato come operatore di negazione unario (- $ myval).

Esempio

L'esempio seguente mostra l'uso delle operazioni sui numeri nel file 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>

Quindi, crea il file 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;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

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

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

h2 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato in number_operations.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

↰ Previous page