Sass - dyrektywy funkcyjne

W tym rozdziale będziemy się uczyć Function Directives. W SASS możesz stworzyć własną funkcję i używać jej w kontekście twojego skryptu lub możesz użyć z dowolną wartością. Funkcje są wywoływane przy użyciu nazwy funkcji i dowolnych parametrów.

Przykład

Poniższy przykład demonstruje użycie dyrektywy function w pliku 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>

Następnie utwórz plik 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); }

Możesz powiedzieć SASS, aby obserwował plik i aktualizował CSS za każdym razem, gdy plik SASS się zmieni, używając następującego polecenia -

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

Następnie wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

#set_width {
   padding-left: 95px; 
}

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

Zapisz powyższy kod html w formacie function_directive.html plik.
Otwórz ten plik HTML w przeglądarce, wyjście zostanie wyświetlone, jak pokazano poniżej.

Na wyjściu widać, że stosowane jest wypełnienie z lewej strony.

Podobnie jak mixin, function może również uzyskiwać dostęp do globalnie zdefiniowanych zmiennych, a także akceptować parametry. Wartość zwracaną dla funkcji należy wywołać przy użyciu@return. Możemy wywołać funkcje zdefiniowane przez SASS, używając parametrów słów kluczowych.

Wywołaj powyższą funkcję, jak pokazano poniżej.

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

Konwencje nazewnictwa

Aby uniknąć konfliktów nazw, nazwy funkcji mogą być poprzedzone przedrostkami, aby można je było łatwo rozróżnić. Podobnie jak mixins, zmienne argumenty są również obsługiwane przez funkcje zdefiniowane przez użytkownika. Funkcje i inne identyfikatory SASS mogą używać zamiennie znaków podkreślenia (_) i myślników (-).

Na przykład, jeśli funkcja jest zdefiniowana jako adjust_width, może być używany jako adjust-width, i wzajemnie.