Учебники

Sass — Директивы функций

Январь 26, 2019

В этой главе мы будем изучать директивы функций . В SASS вы можете создавать свои собственные функции и использовать их в контексте скрипта или использовать с любым значением. Функции вызываются с использованием имени функции и с любыми параметрами.

пример

В следующем примере демонстрируется использование директивы функции в файле 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>

Далее создайте файл 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); }

Вы можете указать SASS смотреть файл и обновлять CSS при каждом изменении файла SASS, используя следующую команду: 

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

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом —

style.css 

#set_width {
   padding-left: 95px; 
}

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

  • Сохраните приведенный выше HTML-код в файле function_directive.html .

  • Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле function_directive.html .

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Директивы Sass Function

В выводе вы можете видеть, что применяется левый отступ.

Так же, как и mixin, функция также может обращаться к глобально определенным переменным, а также принимать параметры. Вы должны вызвать возвращаемое значение для функции, используя @return . Мы можем вызвать SASS-определенные функции, используя ключевые параметры.

Вызовите вышеуказанную функцию, как показано ниже. 

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

Соглашения об именах

Чтобы избежать конфликтов имен, имена функций могут иметь префикс, чтобы их можно было легко дифференцировать. Как и миксины, переменные аргументы также поддерживаются пользовательскими функциями. Функции и другие идентификаторы SASS могут использовать подчеркивания (_) и дефисы (-) взаимозаменяемо.

Например, если функция определена как Adjust_width , она может быть использована как Adjust -width , и наоборот.

44
Share: