Sass - Diretivas de Função

Neste capítulo, estudaremos sobre Function Directives. No SASS, você pode criar sua própria função e usá-las em seu contexto de script ou pode ser usado com qualquer valor. As funções são chamadas usando o nome da função e com quaisquer parâmetros.

Exemplo

O exemplo a seguir demonstra o uso da diretiva de função no arquivo 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>

Em seguida, crie o arquivo 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); }

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

A seguir, execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

#set_width {
   padding-left: 95px; 
}

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima em function_directive.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Na saída, você pode ver que o preenchimento esquerdo está sendo aplicado.

Assim como o mixin, a função também pode acessar variáveis definidas globalmente e também pode aceitar parâmetros. Você deve chamar o valor de retorno para a função usando@return. Podemos chamar as funções definidas pelo SASS usando parâmetros de palavras-chave.

Chame a função acima conforme mostrado abaixo.

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

Convenções de Nomenclatura

Para evitar conflitos de nomenclatura, os nomes das funções podem ser prefixados para que possam ser facilmente diferenciados. Como mixins, argumentos variáveis também são suportados por funções definidas pelo usuário. Funções e outros identificadores SASS podem usar sublinhados (_) e hifens (-) de forma intercambiável.

Por exemplo, se uma função é definida como adjust_width, pode ser usado como adjust-width, e vice versa.