Sass - Directivas de funciones

En este capítulo, estudiaremos sobre Function Directives. En SASS, puede crear su propia función y usarlas en el contexto de su script o puede usarse con cualquier valor. Las funciones se llaman mediante el nombre de la función y con cualquier parámetro.

Ejemplo

El siguiente ejemplo demuestra el uso de la directiva de función en el archivo 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>

A continuación, cree el archivo 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); }

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

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

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

#set_width {
   padding-left: 95px; 
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en function_directive.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

En la salida, puede ver que se está aplicando el relleno izquierdo.

Al igual que mixin, la función también puede acceder a variables definidas globalmente y también puede aceptar parámetros. Debe llamar al valor de retorno de la función usando@return. Podemos llamar a las funciones definidas por SASS usando parámetros de palabras clave.

Llame a la función anterior como se muestra a continuación.

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

Convenciones de nombres

Para evitar conflictos de nombres, los nombres de las funciones pueden tener un prefijo para que puedan diferenciarse fácilmente. Al igual que los mixins, los argumentos de variables también son compatibles con funciones definidas por el usuario. Las funciones y otros identificadores SASS pueden usar guiones bajos (_) y guiones (-) indistintamente.

Por ejemplo, si una función se define como adjust_width, se puede utilizar como adjust-width, y viceversa.

↰ Previous page Next page ↱