Interpolado
La
interpolación es algo que podemos utilizar casi en cualquier lugar de una hoja de Sass/SCSS para incrustar el resultado de una expresión SassScript en CSS, si bien su uso más común es inyectar valores en
Strings. Para ello, debemos encerrar dicha expresión mediante
#{ } en cualquiera de los siguientes lugares:
- Selectores en reglas de estilo
- Nombres de propiedades en declaraciones
- Valores de propiedades personalizadas
- Directivas (@)
- Herencias (@extends)
- @imports de CSS
- Strings con o sin comillas
- Funciones especiales
- Funciones de CSS
- Comentarios de tipo loud
Un ejemplo de uso en selectores:
SCSS
89-interpolado.scss
Sass
90-interpolado.sass
CSS
91-interpolado.css
Y otro de uso en
Strings:
SCSS
92-interpolado.scss
Sass
93-interpolado.sass
CSS
94-interpolado.css
Referencias