En un artículo anterior te explicamos sobre SASS y tus primeros pasos con este pre procesador de codigo CSS y quedamos en hablarte sobre otros conceptos básicos como Nesteds, Parcials, Mixins, Operators, etc. , pues en este artículo lo haremos, vamos al artículo.
Operadores
En SASS podemos trabajar de manera sencilla con operadores Matemáticos, Suma (+), Resta (-), Multiplicación(*), División(/) y Porcentaje(%). Vamos darle ancho y alto a los siguientes elementos realizando operaciones de aritmética. Tenemos una pagina con un header, sidebar al lado izquierdo, contenido en el centro, sidebar al lado derecho y footer
| SASS |
CSS (Salida) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.contenedor { width: 100%; } header[role="head"] { background-color: #000; height: 150px / 100% * 100%; } .sidebarizquierdo[role="sidebarizquierdo"] { background-color: #fff; width: 300px / 1200px * 100%; } .contenidocentro[role="contenidocentro"] { background-color: #fff; width: 600px / 1200px * 100%; } .sidebarderecho[role="sidebarderecho"] { background-color: #444; width: 300px / 1200px * 100%; } footer[role="foot"] { background-color: #000; height: 100px / 100% * 100%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.contenedor { width: 100%; } header[role="head"] { background-color: #000; height: 150px; } .sidebarizquierdo[role="sidebarizquierdo"] { background-color: #fff; width: 25%; } .contenidocentro[role="contenidocentro"] { background-color: #fff; width: 50%; } .sidebarderecho[role="sidebarderecho"] { background-color: #444; width: 25%; } footer[role="foot"] { background-color: #000; height: 100px; } /*# sourceMappingURL=operadores.css.map */ |
|
Variables
En SASS tienes la posibilidad de usar variables que almacenan determinados valores que podemos reutilizarlos cuando sea necesario. Cada variable debe tener el símbolo $ para que sea considerada como variable en SASS. Por ejemplo podemos crear determinadas variables y luego usarlas aplicándolas a los elementos que sean necesarios
| SASS |
CSS (Salida) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$tamaño-fuente: 15px; $color: #333; $fuente-negrita: 600; $fuente: Arial, sans-serif; .contenedor { font-size: $tamaño-fuente; color: $color; font-weight: $fuente-negrita; font: $fuente; } .contenedor2 { font-size: $tamaño-fuente; color: $color; font-weight: $fuente-negrita; font: $fuente; } |
|
|
|
.contenedor { font-size: 15px; color: #333; font-weight: 600; font: Arial, sans-serif; } .contenedor2 { font-size: 15px; color: #333; font-weight: 600; font: Arial, sans-serif; } /*# sourceMappingURL=variables.css.map */ |
|
Nesting (Anidado)
En HTML cada elemento tiene una jerarquía que hace que los elementos este ordenados, por ejemplo tenemos un menú de navegación y tiene una jerarquía nav > ul > li > a veamos lo practico y rápido que es escribirlo en SASS
| SASS |
CSS (Salida) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } |
|
Importar
Con SASS podemos importar hojas de estilos CSS, si te gusta mantener el orden, veamos un ejemplo si tenemos un archivo _colores.scss y otro archivo estilos.scss , podemos importar el archivo _colores.scss al archivo estilos.scss
Al importar un archivo no es necesario colocar la extensión .scss del archivo ya que SASS lo detecta automáticamente.
| SASS |
CSS (Salida) |
|
|
// _colores.scss header{ color: #999; } footer { color: #777; } |
|
|
|
// estilos.scss @import 'colores'; header { font-size: 13px; font: Arial, sans-serif; } footer { font-size: 15px; font: Candara, sans-serif; } |
|
Extender / Herencia
Es lo mas útil de SASS, con esta característica puedes heredar una propiedad creada previamente, por ejemplo si tenemos estilos para nuestros encabezados H1, H2, H3, H4, H5 y H6 les extendemos o heredamos ciertas propiedades creadas previamente
| SASS |
CSS (Salida) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
%formato-encabezado { font: Myriad, sans-serif; color: #444; font-weight: bold; } .h1 { @extend %formato-encabezado; text-decoration: underline; text-transform: capitalize; } .h2 { @extend %formato-encabezado; text-decoration: underline; text-transform: capitalize; } .h3 { @extend %formato-encabezado; text-decoration: underline; text-transform: capitalize; } .h4 { @extend %formato-encabezado; text-decoration: underline; text-transform: capitalize; } .h5 { @extend %formato-encabezado; text-decoration: underline; text-transform: capitalize; } .h6 { @extend %formato-encabezado; text-decoration: underline; text-transform: capitalize; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.h1, .h2, .h3, .h4, .h5, .h6 { font: Myriad, sans-serif; color: #444; font-weight: bold; } .h1 { text-decoration: underline; text-transform: capitalize; } .h2 { text-decoration: underline; text-transform: capitalize; } .h3 { text-decoration: underline; text-transform: capitalize; } .h4 { text-decoration: underline; text-transform: capitalize; } .h5 { text-decoration: underline; text-transform: capitalize; } .h6 { text-decoration: underline; text-transform: capitalize; } /*# sourceMappingURL=herencia.css.map */ |
|
Con estas utilidades de SASS se te hará mas fácil trabajar con CSS en tu proyecto, esperamos los puedas implementar sin problemas, Diviértete !
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.
