Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Sintaxis Sass | Preprocessors
Advanced CSS Techniques

Sintaxis SassSintaxis Sass

Para empezar a escribir código sass, necesitamos crear un archivo con la extensión .scss. (por ejemplo, feature.scss).

Consideremos la sintaxis sass en el siguiente código css. Vamos a manipular el botón que tendrá algún efecto hover. Escribimos el código css para ello:

Reescribamos el mismo código en sintaxis sass:

La diferencia es que utilizamos estilos para un elemento dentro del primer par de corchetes {}. Además, no usamos el nombre de la clase del elemento dos veces. En su lugar, utilizamos el símbolo ampersand (&).

Nota

En caso de cualquier duda o malentendido de algunas características de sass, es muy recomendable utilizar documentación de sass.

Compilación

Los navegadores no entienden la sintaxis del preprocesador. Sólo entiende la sintaxis html, css y javascript. Entonces, ¿cómo funciona? Tenemos que compilar el archivo sass en el archivo css. Después de la compilación, veremos el resultado.

“sass

Tenemos tres opciones para compilar sass en css:

¿Todo estuvo claro?

Sección 7. Capítulo 2
course content

Contenido del Curso

Advanced CSS Techniques

Sintaxis SassSintaxis Sass

Para empezar a escribir código sass, necesitamos crear un archivo con la extensión .scss. (por ejemplo, feature.scss).

Consideremos la sintaxis sass en el siguiente código css. Vamos a manipular el botón que tendrá algún efecto hover. Escribimos el código css para ello:

Reescribamos el mismo código en sintaxis sass:

La diferencia es que utilizamos estilos para un elemento dentro del primer par de corchetes {}. Además, no usamos el nombre de la clase del elemento dos veces. En su lugar, utilizamos el símbolo ampersand (&).

Nota

En caso de cualquier duda o malentendido de algunas características de sass, es muy recomendable utilizar documentación de sass.

Compilación

Los navegadores no entienden la sintaxis del preprocesador. Sólo entiende la sintaxis html, css y javascript. Entonces, ¿cómo funciona? Tenemos que compilar el archivo sass en el archivo css. Después de la compilación, veremos el resultado.

“sass

Tenemos tres opciones para compilar sass en css:

¿Todo estuvo claro?

Sección 7. Capítulo 2
some-alt