Sass - Funktionsanweisungen

In diesem Kapitel werden wir darüber lernen Function Directives. In SASS können Sie Ihre eigene Funktion erstellen und in Ihrem Skriptkontext verwenden oder mit einem beliebigen Wert verwendet werden. Funktionen werden unter Verwendung des Funktionsnamens und mit beliebigen Parametern aufgerufen.

Beispiel

Das folgende Beispiel zeigt die Verwendung der Funktionsanweisung in der SCSS-Datei -

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>

Erstellen Sie als Nächstes die Datei 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); }

Mit dem folgenden Befehl können Sie SASS anweisen, die Datei zu überwachen und das CSS zu aktualisieren, wenn sich die SASS-Datei ändert.

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

Führen Sie als nächstes den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

#set_width {
   padding-left: 95px; 
}

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

Speichern Sie den oben angegebenen HTML-Code in function_directive.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Eine Ausgabe wird wie unten gezeigt angezeigt.

In der Ausgabe sehen Sie, dass die linke Auffüllung angewendet wird.

Genau wie beim Mixin kann die Funktion auch auf global definierte Variablen zugreifen und Parameter akzeptieren. Sie sollten den Rückgabewert für die Funktion mit aufrufen@return. Wir können die SASS-definierten Funktionen mithilfe von Schlüsselwortparametern aufrufen.

Rufen Sie die obige Funktion wie unten gezeigt auf.

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

Regeln der Namensgebung

Um Namenskonflikte zu vermeiden, können Funktionsnamen vorangestellt werden, damit sie leicht unterschieden werden können. Wie Mixins werden auch variable Argumente von benutzerdefinierten Funktionen unterstützt. Funktionen und andere SASS-Kennungen können Unterstriche (_) und Bindestriche (-) austauschbar verwenden.

Zum Beispiel, wenn eine Funktion definiert ist als adjust_widthkann es verwendet werden als adjust-width, und umgekehrt.