Utilidades de Pre Procesamiento en SASS

Frontend | | Comunidad: Crear un Post, Eventos Devs, Foro

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

SASSCSS (Salida)

 

 

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

SASSCSS (Salida)

 

 

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

SASSCSS (Salida)

 

 

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.

SASSCSS (Salida)

 

 

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

SASSCSS (Salida)

 

 

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments