Sass - Directives de fonction

Dans ce chapitre, nous étudierons Function Directives. Dans SASS, vous pouvez créer votre propre fonction et les utiliser dans votre contexte de script ou peut être utilisée avec n'importe quelle valeur. Les fonctions sont appelées en utilisant le nom de la fonction et avec tous les paramètres.

Exemple

L'exemple suivant illustre l'utilisation de la directive de fonction dans le fichier 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>

Ensuite, créez le fichier 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); }

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

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

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

#set_width {
   padding-left: 95px; 
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans function_directive.html fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Dans la sortie, vous pouvez voir que le remplissage à gauche est appliqué.

Tout comme mixin, la fonction peut également accéder à des variables définies globalement et peut également accepter des paramètres. Vous devez appeler la valeur de retour de la fonction en utilisant@return. Nous pouvons appeler les fonctions définies par SASS en utilisant des paramètres de mot-clé.

Appelez la fonction ci-dessus comme indiqué ci-dessous.

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

Conventions de nommage

Pour éviter les conflits de dénomination, les noms de fonction peuvent être préfixés afin de pouvoir être facilement différenciés. Comme les mixins, les arguments variables sont également pris en charge par des fonctions définies par l'utilisateur. Les fonctions et autres identificateurs SASS peuvent utiliser des traits de soulignement (_) et des tirets (-) de manière interchangeable.

Par exemple, si une fonction est définie comme adjust_width, il peut être utilisé comme adjust-width, et vice versa.

↰ Previous page Next page ↱