Al igual que CSS, las reglas de estilo también son la base de SASS. Se utiliza de forma similar a CSS. Seleccione los elementos a los que se les aplicará estilo con un selector y luego declare sus propiedades, lo que afecta aún más el aspecto de esos elementos.
Ejemplo:
Código Sass:
.header padding: 3px 10px font-size: 40px font-family: sans-serif border: 2px solid green
Esto daría como resultado la siguiente salida CSS:
.header{
padding: 3px 10px;
font-size: 40px;
font-family: sans-serif;
border: 2px solid green;
}
Pero, la ventaja ya que simplemente se repite. SASS desea que su código sea fácil, no solo que se repita. Entonces, en SASS, puede evitar repetir el mismo selector una y otra vez. Puede escribir fácilmente una regla de estilo dentro de la otra. SASS realiza automáticamente el trabajo deseado. Esta función de SASS se conoce como anidamiento .
Ejemplo: Código Sass
navbar ul padding: 2px list-style: square li display: inline-block a display: block padding: 4px 10px font-family: sans-serif
Esto daría como resultado la siguiente salida CSS:
navbar ul{
padding: 2px;
list-style: square;
}
navbar li{
display: inline-block;
}
navbar a{
display: block;
padding: 4px 10px;
font-family: sans-serif;
}
Las reglas de anidamiento son bastante útiles, pero a veces pueden crear una gran cantidad de CSS. Cuanto más anide, más ancho de banda se necesita para generar CSS, y su navegación hará más trabajo para renderizarlo. Por lo tanto, los selectores deben mantenerse poco profundos.
Algunos ejemplos más útiles: Las reglas anidadas son muy útiles para manejar las listas de selectores. Las listas de selectores hacen referencia a la lista de selectores separados por comas. Estos se compilan como el siguiente ejemplo:
Código SASS:
.abc, .def ul, p padding: 2px font-family: sans-serif border: 1px
Esto daría como resultado la siguiente salida CSS:
.abc ul, .abc p, .def ul, .def p {
padding: 2px;
font-family: sans-serif;
border: 1px
}
Interpolación: para insertar valores como variables y funciones en los selectores, puede usar la interpolación . La interpolación es muy útil al crear mixins , ya que le permite generar selectores a partir de los parámetros proporcionados por sus usuarios.
Ejemplo: Código Sass
@mixin full-form($name, $glyph)
span.full-form-#{$name}
font-family: sans-serif
padding: 4px
border: 10px
content: $glyph
@include full-form("GFG", "GeeksForGeeks")
Esto daría como resultado la siguiente salida CSS:
span.full-form-GFG {
font-family: sans-serif;
padding: 4px;
border: 10px;
content: "GeeksForGeeks";
}
Sass solo analiza los selectores después de que la interpolación se resuelve por completo, lo que significa que es seguro usar la interpolación para generar cualquier parte del selector sin preocuparse de que no funcione.