Sintaxis 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.
Tenemos tres opciones para compilar sass en css:
- Usar plataforma sass interactiva - sassmeister.
- Utilice la extensión Visual Studio Code - Compilador de Sass en vivo.
- Uso de la app - scout-app.
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Sintaxis 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.
Tenemos tres opciones para compilar sass en css:
- Usar plataforma sass interactiva - sassmeister.
- Utilice la extensión Visual Studio Code - Compilador de Sass en vivo.
- Uso de la app - scout-app.
¿Todo estuvo claro?