Utilidades de Pre Procesamiento en SASS

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)

.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%;
}

 

.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)

$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)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

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)

%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;
}

 

.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.