Sass - Guía rápida

¿Qué es SASS?

SASS (Syntactically Awesome Stylesheet) es un preprocesador de CSS, que ayuda a reducir la repetición con CSS y ahorra tiempo. Es un lenguaje de extensión CSS más estable y potente que describe el estilo de un documento de forma limpia y estructural.

Inicialmente fue diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006. Más tarde, Weizenbaum y Chris Eppstein usó su versión inicial para extender el Sass con SassScript.

¿Por qué utilizar SASS?

  • Es un lenguaje de preprocesamiento que proporciona una sintaxis con sangría (su propia sintaxis) para CSS.

  • Proporciona algunas características, que se utilizan para crear hojas de estilo que permiten escribir código de manera más eficiente y fácil de mantener.

  • Es un superconjunto de CSS, lo que significa que contiene todas las características de CSS y es un preprocesador de código abierto, codificado en Ruby.

  • Proporciona el estilo del documento en un formato estructurado bueno que el CSS plano. Utiliza métodos reutilizables, declaraciones lógicas y algunas de las funciones integradas, como la manipulación del color, las matemáticas y las listas de parámetros.

Características de SASS

  • Es más estable, potente y compatible con versiones de CSS.

  • Es un superconjunto de CSS y está basado en JavaScript.

  • Se conoce como azúcar sintáctico para CSS, lo que significa que facilita que el usuario lea o exprese las cosas con mayor claridad.

  • Utiliza su propia sintaxis y se compila en CSS legible.

  • Puede escribir CSS fácilmente en menos código en menos tiempo.

  • Es un preprocesador de código abierto, que se interpreta en CSS.

Ventajas de SASS

  • Permite escribir CSS limpio en una construcción de programación.

  • Ayuda a escribir CSS rápidamente.

  • Es un superconjunto de CSS, que ayuda a los diseñadores y desarrolladores a trabajar de manera más eficiente y rápida.

  • Como Sass es compatible con todas las versiones de CSS, podemos usar cualquier biblioteca CSS disponible.

  • Es posible utilizar sintaxis anidada y funciones útiles como manipulación de color, matemáticas y otros valores.

Desventajas de SASS

  • Se necesita tiempo para que un desarrollador aprenda las nuevas funciones presentes en este preprocesador.

  • Si muchas personas están trabajando en el mismo sitio, entonces deberían usar el mismo preprocesador. Algunas personas usan Sass y algunas personas usan CSS para editar los archivos directamente. Por lo tanto, resulta difícil trabajar en el sitio.

  • Hay posibilidades de perder los beneficios del inspector de elementos integrado del navegador.

En este capítulo, aprenderemos el procedimiento paso a paso para instalar Ruby, que se utiliza para ejecutar los archivos SASS.

Requisitos del sistema para SASS

  • Operating System - multiplataforma

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

  • Programming Language - rubí

Instalación de Ruby

Step 1 - Abre el enlace https://www.ruby-lang.org/en/downloads/, verá una pantalla como se muestra a continuación:

Descargue la versión estable actual del archivo zip.

Step 2 - A continuación, ejecute la configuración para instalar Ruby en el sistema.

Step 3- A continuación, agregue la carpeta bin Ruby a su Variable de usuario PATH y Variable de sistema para trabajar con el comando gem.

Path User Variable -

  • Haga clic derecho en el My Computer icono.

  • Seleccione Properties.

  • A continuación, haga clic en el Advanced pestaña y haga clic en Environment Variables.

En la ventana de Variables de entorno , haga doble clic en la RUTA como se muestra en la captura de pantalla que se muestra a continuación:

Obtendrá un cuadro Editar variable de usuario como se muestra. Agregue la ruta de la carpeta ruby ​​bin en el campo Valor variable comoC:\Ruby\bin. Si la ruta ya está configurada para otros archivos, coloque un punto y coma después de eso y agregue la ruta de la carpeta Ruby como se muestra a continuación.

Haga clic en el OK botón.

System Variable -

  • Haga clic en el New botón.

A continuación, el New System Variable El bloque se muestra como se muestra a continuación.

  • Entrar RubyOpten el campo Nombre de variable yrubygemsen el campo Valor de variable . Después de escribir el nombre y el valor de la variable , haga clic en elOK botón.

Step 4 - Abra el símbolo del sistema en su sistema e ingrese la siguiente línea -

gem install sass

Step 5 - A continuación, verá la siguiente pantalla después de instalar SASS correctamente.

Ejemplo

El siguiente es un ejemplo simple de SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Ahora, crearemos un archivo como style.scss , que es bastante similar a CSS y la única diferencia es que se guardará con la extensión .scss. Los archivos .htm y .scss deben crearse dentro de la carpetaruby. Puede guardar su archivo .scss en la carpetaruby\lib\sass\ (antes de este proceso, cree una carpeta como sass en el directorio lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

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

Cuando ejecute el comando anterior, creará el archivo style.css automáticamente. Siempre que cambie el archivo SCSS, el archivo style.css se actualizará automáticamente.

El archivo style.css tendrá el siguiente código cuando ejecute el comando anterior:

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

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

  • Guarde el código dado arriba en hello.html archivo.

  • Abra este archivo HTML en un navegador.

En este capítulo, estudiaremos sobre SASS Syntax. SASS admite dos sintaxis a saberSCSS y Indented syntax.

  • los SCSS (Sassy CSS)es una extensión de la sintaxis CSS. Esto significa que cada CSS válido es también un SCSS válido. SCSS facilita mucho el mantenimiento de hojas de estilo grandes y puede reconocer la sintaxis específica del proveedor. Muchos archivos CSS y SCSS usan la extensión.scss.

  • Indented - Esta es una sintaxis anterior y, a veces, simplemente se llama como SASS. Usando esta forma de sintaxis, CSS se puede escribir de forma concisa. Los archivos SASS usan la extensión.sass.

Sintaxis con sangría de SASS

La sintaxis con sangría SASS o simplemente SASS es una alternativa a la sintaxis SCSS basada en CSS.

  • Utiliza sangría en lugar de{ y } para delimitar bloques.

  • Para separar declaraciones, usa líneas nuevas en lugar de punto y coma (;) .

  • La declaración de propiedad y los selectores deben colocarse en su propia línea y las declaraciones dentro{ y }debe colocarse en una nueva línea y sangrar .

Por ejemplo, considere el siguiente código SCSS:

.myclass {
   color = red;
   font-size = 0.2em;
}

los indentedLa sintaxis es una sintaxis anterior, que no se recomienda para su uso en nuevos archivos Sass. Si usa este archivo, mostrará un error en el archivo CSS como lo hemos usado= en lugar de establecer propiedades y variables.

Compile el código dado anteriormente usando el siguiente comando:

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

A continuación, ejecute el comando anterior; mostrará un error en el archivo style.css como se muestra a continuación:

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Diferencias de sintaxis de SASS

La mayoría de las sintaxis CSS y SCSS funcionan perfectamente en SASS. Sin embargo, existen algunas diferencias, que se explican en las siguientes secciones:

Sintaxis de propiedad

Las propiedades CSS se pueden declarar de dos formas:

  • Las propiedades se pueden declarar similares a CSS pero sin semicolon(;).

  • colon(:) se antepondrá a cada nombre de propiedad.

Por ejemplo, puede escribir como:

.myclass
   :color red
   :font-size 0.2em

Ambas formas anteriores (declaración de propiedades sin punto y coma y dos puntos prefijados al nombre de la propiedad) se pueden utilizar de forma predeterminada. Sin embargo, solo se permite especificar una sintaxis de propiedad cuando se usa la opción : property_syntax .

Selectores multilínea

En la sintaxis con sangría, los selectores se pueden colocar en una nueva línea siempre que aparezcan después commas.

Ejemplo

El siguiente ejemplo describe el uso de selectores multilínea en el archivo SCSS:

<html>
   <head>
      <title>Multiline Selectors</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>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

A continuación, cree el archivo style.scss . Tenga en cuenta la extensión .scss .

style.scss

.class1,
.class2{
   color:red;
}

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:

El style.css generado es el que se muestra a continuación:

style.css

.class1,
.class2 {
   color: red;
}

Salida

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

  • Guarde el código html dado anteriormente en el archivo .html multiline_selectors .

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

Comentarios

Los comentarios ocupan una línea completa y encierran todo el texto anidado debajo de ellos. Están basados ​​en líneas en sintaxis con sangría. Para obtener más información sobre los comentarios, consulte este enlace .

@importar

En SASS el @importLa directiva se puede escribir con / sin comillas. A diferencia de SCSS, deben usarse con comillas.

Por ejemplo, en SCSS el @import La directiva se puede utilizar como:

@import "themes/blackforest";
@import "style.sass";

Esto se puede escribir en SASS como:

@import themes/blackforest
@import fontstyle.sass

Directivas Mixin

SASS admite taquigrafía para directivas como @mixin y @include. En vez de@mixin y @include puedes usar = y + caracteres, que requieren menos escritura y hacen que su código sea más simple y más fácil de leer.

Por ejemplo, puede escribir las directivas mixin como:

=myclass
   font-size: 12px;
p
   +myclass

El código anterior es el mismo que:

@mixin myclass
   font-size: 12px;
p
   @include myclass

Sintaxis obsoleta

SASS admite el uso de alguna sintaxis antigua. Sin embargo, usar esta sintaxis en SASS esnot recommended. Se mostrará una advertencia si usa esta sintaxis y se elimina en versiones posteriores. Algunas de las sintaxis antiguas se muestran en la siguiente tabla.

S. No. Operador y descripción
1

=

Se usó en lugar de: al establecer variables y propiedades en valores de SassScript.
2

||=

Se usó en lugar de: cada vez que asigna un valor predeterminado de una variable.
3

!

En lugar de $,! se utilizó como prefijo de variable. La funcionalidad no cambiará cuando se use en lugar de $.

SASS es más potente y estable que proporciona potencia al lenguaje básico mediante el uso de la extensión de CSS. Puede utilizar SASS de tres formas diferentes:

  • Como herramienta de línea de comandos
  • Como módulo Ruby
  • Como complemento para el marco de habilitación de Rack

Si está utilizando SASS en Windows, debe instalar Rubyprimero. Para obtener más información sobre la instalación de Ruby, consulte el capítulo Instalación de SASS .

La siguiente tabla muestra los comandos que se utilizan para ejecutar el código SASS:

S. No. Comando y descripción
1

sass input.scss output.css

Se utiliza para ejecutar el código SASS desde la línea de comandos.
2

sass --watch input.scss:output.css

Le informa a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS.
3

sass --watch app/sass:public/stylesheets

Se utiliza para observar el directorio completo, si SASS contiene muchos archivos en un directorio.

Complemento Rack / Rails / Merb

Rackes una interfaz de servidor web, que se utiliza para desarrollar aplicaciones web en Ruby. Para obtener información sobre Rack, visite este enlace .

Puede habilitar el SASS en el Rails 3 versión usando el environment.rb archivo presente bajo el configcarpeta. Habilite SASS para Rails 3 usando el siguiente código:

config.gem "sass"

Puede usar la siguiente línea para el Gemfile para Rails 3 (y la versión superior), como:

gem "sass"

Railses un marco web de código abierto que utiliza estándares web como JSON, HTML, CSS y JavaScript para mostrar la interfaz de usuario. Para trabajar con Rails, debe tener un conocimiento básico de Ruby y programación orientada a objetos. Obtenga más información sobre el marco de on Rails aquí .

Si desea habilitar el SASS en Rack aplicación, agregue las siguientes líneas a la config.ru archivo, que está presente en el directorio raíz de la aplicación -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbes un marco de aplicación web, que proporciona velocidad y modularidad a Rails. Para saber más sobre Merb, simplemente abra este enlace .

Puede habilitar el SASS en Merb agregando la siguiente línea al config/dependencies.rb archivo -

dependency "merb-haml"

Almacenamiento en caché

SASS almacena en caché documentos como plantillas y parciales, que se pueden reutilizar sin analizarlos a menos que hayan cambiado. Hace que la compilación de archivos SASS sea más rápida y funciona incluso mejor cuando las plantillas se dividen en archivos separados, que se importan todos en un archivo grande. Si elimina los archivos en caché, se volverán a generar la próxima vez que los compile.

Opciones

Puede configurar las opciones en el archivo environment.rb de Rails o en el archivo config.ru de la aplicación Rack usando la siguiente línea:

Sass::Plugin.options[:style] = :compact

También puede configurar opciones en el init.rb archivo de Merb utilizando la siguiente línea -

Merb::Plugin.config[:sass][:style] = :compact

Hay algunas opciones disponibles con SASS y SCSS como se describe en la tabla que se muestra a continuación:

S. No. Opción y descripción
1

:style

Muestra el estilo de la salida.
2

:syntax

Puede usar sintaxis con sangría para sass y sintaxis de extensión CSS para scss .
3

:property_syntax

Utiliza sintaxis con sangría para hacer uso de propiedades. Si no es correcto, arrojará un error. Por ejemplo, considere "background: # F5F5F5" en el que background es un nombre de propiedad y # F5F5F5 es su valor de propiedad. Debe utilizar dos puntos después del nombre de la propiedad.
4

:cache

Acelera la compilación de archivos SASS. Se establece en verdadero de forma predeterminada.
5

:read_cache

Solo lee archivos SASS si la caché no está configurada y read_cache está configurada.
6

:cache_store

Se puede usar para almacenar y acceder al resultado en caché configurándolo en una instancia de Sass :: CacheStores :: Base .
7

:never_update

Nunca debería actualizar el archivo CSS si los archivos de plantilla cambian. De forma predeterminada, se establece en falso.
8

:always_update

Debería actualizar el archivo CSS cada vez que cambien los archivos de plantilla.
9

:always_check

Debe buscar las actualizaciones cada vez que se inicia el servidor. Volverá a compilar y sobrescribirá el archivo CSS, si hay una actualización en el archivo de plantilla SASS.
10

:poll

Utiliza el backend de sondeo para Sass :: Plugin :: Compiler # watch (que observa la plantilla y la actualización de los archivos CSS) configurándolo en verdadero.
11

:full_exception

Muestra la descripción del error cada vez que ocurre una excepción en el código SASS dentro del archivo CSS generado. Muestra un número de línea donde ocurrió un error junto con la fuente en el archivo CSS.
12

:template_location

Proporciona la ruta para el directorio de plantillas en la aplicación.
13

:css_location

Proporciona la ruta para las hojas de estilo CSS en la aplicación.
14

:unix_newlines

Proporciona nuevas líneas al estilo Unix al escribir archivos configurándolo en verdadero.
15

:filename

Es el nombre del archivo que se muestra y se utiliza para informar errores.
dieciséis

:line

Especifica la primera línea de la plantilla SASS y muestra los números de línea para los errores.
17

:load_paths

Se utiliza para cargar las rutas de la plantilla SASS que se incluyen mediante la directiva @import .
18

:filesystem_importer

Se utiliza para importar archivos desde el sistema de archivos que usa la subclase Sass :: Importers :: Base para manejar rutas de carga de cadenas.
19

:sourcemap

Genera mapas de origen que instruyen al navegador a encontrar los estilos SASS. Utiliza tres valores:

  • :auto- Contiene URI relativos. Si no hay un URI relativo, entonces usa "file:" URI.

  • :file - Utiliza "file:" URI, que funcionan localmente, no en un servidor remoto.

  • :inline - Contiene texto de origen en el mapa de origen que se utiliza para crear archivos de mapas de origen de gran tamaño.
20

:line_numbers

Muestra el número de línea de los errores informados en el archivo CSS configurándolo en verdadero.
21

:trace_selectors

Ayuda a rastrear los selectores de importaciones y mixins cuando se establece en verdadero.
22

:debug_info

Proporciona información de depuración del archivo SASS utilizando el número de línea y el archivo cuando se establece en verdadero.
23

:custom

Hace que los datos estén disponibles para las funciones SASS en las aplicaciones separadas.
24

:quiet

Deshabilita las advertencias configurándolo en verdadero.

Selección de sintaxis

Puede determinar qué sintaxis está utilizando en la plantilla SASS utilizando la herramienta de línea de comandos de SASS. De forma predeterminada, SASS utiliza una sintaxis con sangría que es una alternativa a la sintaxis SCSS basada en CSS. Puede usar el programa de línea de comandos SCSS, que es similar al programa SASS, pero por defecto, considera que la sintaxis es SCSS.

Codificaciones

SASS utiliza la codificación de caracteres de las hojas de estilo especificando las siguientes especificaciones CSS:

  • Primero, verifica el byte Unicode, luego la declaración @charset y luego la codificación de cadena Ruby.

  • A continuación, si no se establece nada, entonces considera la codificación del juego de caracteres como UTF-8 .

  • Determine la codificación de caracteres de forma explícita mediante la declaración @charset . Simplemente use "@charset encoding name" al comienzo de la hoja de estilo y SASS asumirá que esta es la codificación de caracteres dada.

  • Si el archivo de salida de SASS contiene caracteres que no son ASCII, usará la declaración @charset .

En este capítulo, estudiaremos sobre CSS Extensions. Las extensiones CSS se pueden utilizar para mejorar la funcionalidad de las páginas web. La siguiente tabla enumera algunas de las extensiones CSS utilizadas en SASS:

S. No. Extensión y descripción CSS
1 Reglas anidadas

Es una forma de combinar varias reglas CSS entre sí.
2 Hacer referencia a los selectores de padres: &

Es el proceso de seleccionar el selector principal mediante el & personaje.
3 Propiedades anidadas

Permite el anidamiento de propiedades en otras propiedades, lo que conduce a la agrupación de otro código relacionado.
4 Selectores de marcador de posición

Sass admite el selector de marcador de posición mediante el selector de clase o id haciendo uso de la directiva @extend .

En este capítulo, estudiaremos sobre Sass Comments. Los comentarios son declaraciones no ejecutables, que se colocan en el código fuente. Los comentarios facilitan la comprensión del código fuente. SASS admite dos tipos de comentarios.

  • Multiline comments- Estos se escriben usando / * y * /. Los comentarios de varias líneas se conservan en la salida CSS.

  • Single line comments - Estos están escritos usando //seguido de comentarios. Los comentarios de una sola línea no se conservan en la salida CSS.

Ejemplo

El siguiente ejemplo demuestra el uso de comentarios en el archivo SCSS:

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

A continuación, cree el archivo style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Salida

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

  • Guarde el código html dado anteriormente en sass_comments.html archivo.

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

Para estudiar sobre la interpolación en comentarios de varias líneas, haga clic en este enlace .

Sass - Interpolación en comentarios multilínea

Descripción

La interpolación dentro de los comentarios de varias líneas se resuelve en el CSS resultante. Puede especificar variables o nombres de propiedades entre llaves.

Sintaxis

$var : "value";
/* multiline comments #{$var} */

Ejemplo

El siguiente ejemplo demuestra el uso de la interpolación en comentarios de varias líneas en el archivo SCSS:

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

A continuación, cree el archivo style.scss .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

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

/* Framework version for the generated CSS is 7.8. */

Salida

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

  • Guarde el código html dado anteriormente en sass_comments_interpolation.htm archivo.

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

SASS utiliza un pequeño conjunto de extensiones conocidas como SassScript que se pueden incluir en los documentos de SASS para calcular variables a partir de valores de propiedad y utiliza propiedades de variables, aritmética y otras funciones. SassScript también se puede usar con selectores y nombres de propiedades mientras se usan mixins (Mixins permite reutilizar estilos CSS en toda la hoja de estilo).

La siguiente tabla enumera algunas de las extensiones CSS utilizadas en SASS:

S. No. Extensión y descripción CSS
1 Shell interactivo

Evalúa la expresión de SassScript mediante la línea de comandos.
2 Variables

Representa los datos como valores numéricos, caracteres o direcciones de memoria.
3 Tipos de datos

Declara el tipo de datos para cada objeto de datos.
4 Operaciones

Proporciona operaciones como operaciones numéricas, de color, de cadena, booleanas y de lista.
5 Paréntesis

Es un par de signos que suelen estar marcados con corchetes () o corchetes [].
6 Funciones

Es compatible con el uso de funciones proporcionando algunos argumentos de palabras clave.
7 Interpolación

Proporciona variables de SassScript y nombres de propiedades mediante #{ } sintaxis.
8 y en SassScript

Permite el anidamiento de propiedades en otras propiedades, lo que conduce al grupo de otro código relacionado.
9 Valores predeterminados variables

Permite el anidamiento de propiedades en otras propiedades, lo que conduce al grupo de otro código relacionado.

La siguiente tabla enumera todas las reglas y directivas que puede utilizar en SASS.

S. No. Directivas y descripción
1 @importar

Importa los archivos SASS o SCSS, directamente toma el nombre del archivo para importar.
2 @medios de comunicación

Establece la regla de estilo para diferentes tipos de medios.
3 @ampliar

La directiva @extend se usa para compartir reglas y relaciones entre selectores.
4 @ en la raíz

La directiva @ at-root es una colección de reglas anidadas, que pueden crear un bloque de estilo en la raíz del documento.
5 @depurar

La directiva @debug detecta los errores y muestra los valores de expresión de SassScript en el flujo de salida de error estándar.
6 @advertir

La directiva @warn se utiliza para dar consejos de precaución sobre el problema; muestra los valores de expresión de SassScript en el flujo de salida de error estándar.
7 @error

La directiva @error muestra el valor de la expresión de SassScript como error fatal.

En este capítulo, estudiaremos sobre Control Directives & Expressions. El estilo basado en algunas condiciones o la aplicación del mismo estilo muchas veces con variaciones se puede lograr mediante el uso de directivas y expresiones de control, que son compatibles con SassScript. Estas directivas de control son opciones avanzadas que se utilizan principalmente en mixins. Requieren una flexibilidad considerable, ya que forman parte de las bibliotecas de Compass.

La siguiente tabla enumera las directivas y expresiones de control utilizadas en SASS:

S. No. Directiva de control y expresión con descripción
1 Si()

Según la condición, la función if () devuelve solo un resultado de dos resultados posibles.
2 @Si

La directiva @if acepta expresiones de SassScript y usa los estilos anidados siempre que el resultado de la expresión no sea falso o nulo .
3 @para

La directiva @for le permite generar estilos en un bucle.
4 @cada

En @each directiva, se define una variable que contiene el valor de cada elemento en una lista.
5 @mientras

Toma expresiones de SassScript y, hasta que la declaración se evalúa como falsa, genera estilos anidados de forma iterativa.

Los mixins permiten crear un grupo de estilos, que son reutilizables en toda su hoja de estilo sin necesidad de recreación de clases no semánticas. En CSS, los mixins pueden almacenar múltiples valores o parámetros y llamar a la función; ayuda a evitar escribir códigos repetitivos. Los nombres de Mixin pueden usar guiones bajos y guiones indistintamente. Las siguientes son las directivas presentes en Mixins:

S. No. Directiva y descripción
1 Definiendo un Mixin

La directiva @mixin se usa para definir el mixin.
2 Incluyendo un Mixin

La directiva @include se usa para incluir los mixins en el documento.
3 Argumentos

Los valores de SassScript se pueden tomar como argumentos en mixins, que se dan cuando se incluye mixin y está disponible como variable dentro de mixin.
4 Pasar bloques de contenido a un mixin

El bloque de estilos se pasa al mixin.

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.

En este capítulo, estudiaremos sobre SASS Output Style. El archivo CSS que genera el SASS consta de un estilo CSS predeterminado, que refleja la estructura del documento. El estilo CSS predeterminado es bueno, pero puede que no sea adecuado para todas las situaciones; por otro lado, SASS admite muchos otros estilos.

Admite los siguientes estilos de salida diferentes:

:anidado

El estilo anidado es el estilo predeterminado de SASS. Esta forma de estilo es muy útil cuando se trata de archivos CSS de gran tamaño. Hace que la estructura del archivo sea más legible y fácil de entender. Cada propiedad tiene su propia línea y la sangría de cada regla se basa en qué tan profundamente está anidada.

Por ejemplo, podemos anidar el código en el archivo SASS como se muestra a continuación:

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:expandido

En el tipo expandido de estilo CSS, cada propiedad y regla tiene su propia línea. Toma más espacio en comparación con el estilo CSS anidado. La sección Reglas consta de propiedades, todas ellas previstas dentro de las reglas, mientras que las reglas no siguen ninguna sangría.

Por ejemplo, podemos expandir el código en el archivo SASS como se muestra a continuación:

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compacto

El estilo CSS compacto ocupa menos espacio de forma competitiva que Expanded y Nested. Se centra principalmente en los selectores más que en sus propiedades. Cada selector ocupa una línea y sus propiedades también se colocan en la misma línea. Las reglas anidadas se colocan una al lado de la otra sin una nueva línea y los grupos de reglas separados tendrán nuevas líneas entre ellos.

Por ejemplo, podemos compactar el código en el archivo SASS como se muestra a continuación:

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:comprimido

El estilo CSS comprimido ocupa la menor cantidad de espacio en comparación con todos los demás estilos discutidos anteriormente. Proporciona espacios en blanco solo para separar selectores y una nueva línea al final del archivo. Esta forma de diseñar es confusa y no es fácil de leer.

Por ejemplo, podemos comprimir el código en el archivo SASS como se muestra a continuación:

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

Puede ampliar la funcionalidad de SASS para proporcionar diferentes tipos de funciones y personalizaciones para los usuarios. Para hacer uso de estas funciones, el usuario debe tener conocimientos de Ruby.

Definición de funciones SASS personalizadas

Puede definir sus propias funciones SASS mientras usa Ruby API. Puede agregar sus funciones personalizadas agregándolas a los métodos de Ruby como se muestra en el siguiente código:

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

En el código que puede ver, la función, declare, especifica los nombres de los argumentos para la función. Si falla, no aceptará ningún argumento incluso si la función está funcionando y también acepta argumentos de palabra clave arbitrarios. Puede obtener valores de Ruby utilizando el descriptor de acceso de valor y acceder a los objetos de color utilizando rgb, rojo, verde o azul .

Almacenes de caché

SASS almacena la caché de los documentos analizados, que se pueden reutilizar sin volver a analizar. Usos de SASS:cache_locationpara escribir archivos de caché en el sistema de archivos. Hace que la compilación de archivos SASS sea más rápida y, si elimina los archivos en caché, se volverán a generar la próxima vez que los compile. Puede definir su propio almacén de caché configurando el:cache_storeopción. Esto escribirá archivos de caché en el sistema de archivos o compartirá archivos de caché en procesos o máquinas de ruby. SASS usa una instancia de la subclase de Sass :: CacheStores :: Base para almacenar y recuperar los resultados de la caché.

Importadores personalizados

SASS usa @import para importar archivos SCSS y SASS y pasa rutas a la regla @import para encontrar un código de ruta apropiado para rutas especificadas. Los importadores de SASS usan el sistema de archivos para cargar el código y lo agregan a la carga usando una base de datos o un esquema de nombres de archivos diferente.

El importador único puede cargar un solo archivo y puede colocarse en la matriz : load_paths junto con las rutas del sistema de archivos. Mientras usa @import , SASS busca rutas cargadas, que importan la ruta para el importador. Cuando se encuentra la ruta, se utiliza el archivo importado. Un usuario puede heredar los importadores deSass::Importers::Base.