Diferencias de sintaxis entre SASS y SCSS

por

A continuación veremos los tipos de sintaxis en SASS, los detalles de la sintaxis de SASS y CSS o SCSS, las reglas para escribir múltiples selectores de SASS, las construcciones de lenguaje prohibido en SASS y el sintaxis de comentarios en SASS.

Diferencia entre las sintaxis de SASS y SCSS
Diferencia entre las sintaxis de SASS y SCSS

Tabla de contenidos

Diferencia entre sintaxis SASS y SCSS

El preprocesador de SASS tiene 2 sintaxis diferentes: SASS y CSS y la sintaxis con sangría, o simplemente SASS . La sintaxis de SCSS usa exactamente las mismas reglas que CSS, pero tiene algunas características que amplían CSS. El SCSS admite muchos enlaces CSS, incluidos algunos para representar documentos HTML correctamente en navegadores más antiguos como el internet explorer. Para que el compilador SASS comprenda que está escribiendo código SCSS, guarda los archivos con la extensión punto scss.

Algunos tipos de sintaxis del preprocesador SASS

La segunda sintaxis de SASS es similar a la sintaxis de Alex y usa sangría. La segunda sintaxis se conoce comúnmente como sintaxis SASS. La sintaxis de SASS es anterior a SCSS. El propósito de la sintaxis SASS es acortar el código CSS, por lo que el anidamiento de los selectores SASS se indica mediante sangría, y las propiedades CSS están separadas entre sí por saltos de línea, en lugar de punto y coma, como se hace en CSS o SCSS. Para decirle al compilador SASS que el código está escrito usando la sintaxis SASS, use la extensión punto sass.

La diferencia entre SASS y SCSS radica en las reglas de codificación; no hay diferencia funcional entre SASS y SCSS. El compilador SASS puede convertir SASS a SCSS :

# Convertir SASS a SCSS
$ sass-convert style.sassstyle.scss

# Convierta SCSS a SASS
$ sass-convert style.scssstyle.sass

Si ejecuta estos comandos, el archivo CSS no se generará, solo está convirtiendo una sintaxis en otra.

Características de la sintaxis con sangría de SASS

La antigua sintaxis SASS o simplemente la sintaxis SASS es actualmente una alternativa a SCSS:

  • La sintaxis de SASS usa sangría en lugar de llaves en CSS;
  • en lugar del conocido punto y coma, la sintaxis de SASS utiliza un carácter de avance de línea;
  • Los selectores CSS en SASS siempre se escriben en una nueva línea, y las propiedades CSS están separadas entre sí por saltos de línea, y cada propiedad debe tener sangría: así es como el compilador SASS entiende que la propiedad pertenece al selector.

Veamos un ejemplo de sintaxis SASS:

$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color

Arriba, hemos declarado variables globales SASS, ignórelas por ahora. Tenga en cuenta que el cuerpo del selector de CSS está escrito al principio de la línea sin sangría, y los estilos del cuerpo están sangrados desde el principio de la línea.

Características de la sintaxis SCSS

Si está familiarizado con la sintaxis CSS, entonces no tendrá ningún problema con la sintaxis SCSS, como ya hemos mencionado, la sintaxis SCSS es completamente idéntica a CSS , pero tiene algunas características que amplían las capacidades de CSS, que nosotros conocerá más tarde. A continuación se muestra un ejemplo del uso de la sintaxis SCSS:

body {
 
font: 100% $font-stack;
 
color: $primary-color;
 }

No es diferente de todos los CSS habituales.

Múltiples selectores SASS

A menudo necesitamos asegurarnos de que diferentes elementos HTML en la página tengan los mismos estilos, SASS, como CSS, le permite establecer los mismos estilos para varios elementos en la página simplemente especificando selectores separados por comas, si estamos hablando de SCSS , o simplemente escribiendo selectores con nueva línea si estamos hablando de sintaxis SASS. Veamos un ejemplo.

Creemos una página HTML simple . Cree un archivo index.html con el siguiente marcado y guárdelo en la carpeta Alex:

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>SASS y SCSS Sintaxis</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<h1>Pruebas de sass y scss</h1>
<p class="paragraph1">Pertenece al párrafo 1.</p>
<h1>Prueba de título</h1>
<p class="paragraph2">Este pertenece al párrafo 2.</p>
<p>Más contenido de texto, oraciones, párrafos.</p>
</body>
</html>

Tenemos la necesidad de hacer que el texto de los párrafos HTML sea rojo, pero no en todos, sino sólo en aquellos donde hay un atributo de clase HTML. Implementemos esto:

.class1,
.class2{
color:red;
}

Como puede ver, el código dado a continuación es el mismo que CSS, pero guárdelo en la carpeta Alex\lib\ sass, lo llamaremos style.scss. Puede compilar código SCSS en CSS con el comando, hablamos de esto cuando consideramos instalar el compilador SASS en Windows :

C: \ Alex ​​\ lib \ sass \ style.scss: style.css

Ahora, el compilador de SASS compilara el archivo automáticamente tan pronto como se realicen los cambios y se guarden en el archivo punto scss. El archivo css se ubicará en el directorio de Alex. Después de compilar el archivo SCSS en CSS, puede abrir el documento HTML y ver: La página está diseñada con código SASS

Como puede ver, no hay nada complicado en la sintaxis de SASS, y más aún en la sintaxis de SCSS , especialmente si ya está familiarizado con CSS.

Sintaxis prohibida en SASS

SASS ya es una tecnología bastante antigua utilizada por muchos desarrolladores y, como cualquier otro lenguaje, SASS ha sufrido cambios a medida que evolucionaba. Por el momento, la tercera versión de SASS es relevante, pero las versiones anteriores tenían una sintaxis ligeramente diferente y usaban algunas construcciones de lenguaje que no se recomiendan para su uso en la última versión. A continuación, encontrará algunos operadores SASS que no debe usar en su código.

Operador SASSDescripción
=Operador de asignación SASS.
|| =Este operador se usó para asignar un valor predeterminado a una variable.
!Anteriormente, se usaba el signo de exclamación en SASS en lugar del signo de dólar al declarar una variable.

Sintaxis de comentarios de SASS

SASS, como cualquier otro idioma, te permite escribir comentarios, con intaxis SASS admite dos tipos de comentarios :

  • los comentarios en línea en SASS se indican mediante símbolos // y generalmente se usan para algún tipo de explicación en el código;
  • Los comentarios del bloque SASS se indican mediante / *… * /. Los comentarios de bloque de SASS se utilizan generalmente para deshabilitar varias líneas de código; los comentarios de bloque de SASS pueden abarcar tantas líneas como desee.

El compilador SASS simplemente ignora los comentarios de bloque y los deja como están. Nota: CSS no admite comentarios en línea, por lo que el compilador SASS eliminará todos los comentarios en línea del archivo CSS de salida.