Sass - Sintaxis

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 $.

↰ Previous page Next page ↱