Utilidades de Pre Procesamiento en SASS

3 minuto(s)

En esta página:

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 / 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 */

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

$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 */

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

}

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

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

// _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;
}

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

%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 */