Sass - Direttive di funzione

In questo capitolo, studieremo Function Directives. In SASS è possibile creare la propria funzione e utilizzarla nel contesto dello script o utilizzarla con qualsiasi valore. Le funzioni vengono chiamate utilizzando il nome della funzione e con qualsiasi parametro.

Esempio

L'esempio seguente mostra l'uso della direttiva funzione nel file SCSS:

function_directive.htm

<html>
   <head>
      <title>Nested Rules</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" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

$first-width: 5px; $second-width: 5px;

@function adjust_width($n) { @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(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

#set_width {
   padding-left: 95px; 
}

Produzione

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

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

Nell'output, puoi vedere che viene applicato il riempimento sinistro.

Proprio come mixin, la funzione può anche accedere a variabili definite a livello globale e può anche accettare parametri. È necessario chiamare il valore restituito per la funzione utilizzando@return. Possiamo chiamare le funzioni definite da SASS utilizzando parametri di parole chiave.

Chiama la funzione sopra come mostrato di seguito.

#set_width { padding-left: adjust_width($n: 10); }

Convenzioni di denominazione

Per evitare conflitti di denominazione, è possibile aggiungere un prefisso ai nomi delle funzioni in modo che possano essere facilmente differenziati. Come i mixin, anche gli argomenti variabili sono supportati dalle funzioni definite dall'utente. Le funzioni e altri identificatori SASS possono utilizzare caratteri di sottolineatura (_) e trattini (-) in modo intercambiabile.

Ad esempio, se una funzione è definita come adjust_width, può essere utilizzato come adjust-width, e viceversa.