PERSONALIZACIÓN AVANZADA DE CSS/SCSS

Esta sección en el menú de Colores te permite personalizar tu aplicación más profundamente con CSS / SCSS. Este es un ejemplo con una modificación en base del Layout 6 usando la personalización avanzada con CSS / SCSS en una aplicación:

Screen Shot 2016-09-08 at 15.24.59

La versión sin estas personalizaciones:

Screen Shot 2016-09-08 at 16.32.12

¿Qué es CSS?

CSS es un lenguaje de programación (aun que sea sencillo) para formatear y dar forma a una página. Les letras iniciales significan Cascading Style Sheet (Hoja de Estilo Cayendo en Cascada) y define cómo los elementos de HTML5 se demuestran. Hay más información aquí.

¿Qué es SCSS?

SCSS es un súper-conjunto de CSS3. Agrega más opciones al CSS clásico usando, primariamente, anidación y variables.

Por ejemplo, aquí están dos hojas de estilo escritos en CSS y SCSS:

código CSS:

#body {
margin: 0;
border: 1px solid red;
}
#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}
#body h {
text-transform: capitalize;
}

 

Lo mismo escrito en código SCSS:

$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid $colorYellow;
p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
}
}
h {
text-transform;
}
}

¿Cuál es la diferencia entre los dos?

1. Si miras al código arriba, puedes ver que hay un variable $colorYellow: yellow;, y este variable está llamado en el CSS mismo como un valor del propiedad “color”, como puedes ver: color: $colorYellow;

El poder de hacerlo así es que puedes llamar un variable en tu CSS, y entonces tendrías que solamente en el valor de este variable para cambiar el valor de todos los selectores que usan este variable. La diferencia con CSS clásico es que tendrías que cambiar el valor de la propiedad para cada selector en vez de cambiarlo una sola vez para todos los selectores.

2. Si comparas los dos códigos arriba, los dos tienen 3 selectores, dos de ellos son hijos de un selector principal. En SCSS los hijos pueden estar anidados en el padre. Eso hace que el código sea más fácil a escribir, leer, y mantener. O sea que en vez de escribir en CSS:

#body {
margin: 0;
}
#body p {
font-size: 12px;
}

en SCSS escribirías:

#body {
margin: 0;
p {
color: $colorYellow;
font-size: 12px;
}
}

3. Puedes ver lo mismo para algunas propiedades las cuales pueden ser divididas entre propiedades padres e hijos. Por ejemplo, en SCSS font-weight se convierte en una propiedad hija de la propiedad padre “font.”

en CSS:

#body p {
font-size: 13px;
font-weight: bold;
}

en SCSS:

#body p {
font {
size: 13px;
weight: bold;
}
}

Artículos relacionados