8 consejos para ayudarte a obtener lo mejor de Sass.

Sass crea hojas de estilo sintácticamente impresionantes, o al menos eso es lo que se supone que debe hacer.

Cuando se usa de forma efectiva, Sass ayuda a construir CSS fácilmente refactorizable y sin repeticiones. Sin embargo, cuando se usa incorrectamente, Sass puede aumentar el tamaño del archivo y agregar código innecesario o duplicado.

A continuación os dejo una serie de consejos y sugerencias para ayudarte a obtener lo mejor de Sass…

1. Estructura tu Sass

Lograr que la estructura de tu sitio sea correcta desde el principio es vital para cualquier nuevo proyecto con Sass. El uso de parciales te permite dividir nuestro código CSS en bloques de código más pequeños y manejables que son más fáciles de mantener y desarrollar.

Los archivos parciales se crean con un guión bajo y no se muestran como archivos CSS separados. Cada parcial deberá importarse utilizando un archivo maestro de Sass o master (global.scss) en la raíz de la carpeta Sass.

Por ejemplo, aquí hay una estructura de carpetas que he generado como muestra para demostrar esto:

vendor/base/
|
|-_variables.scss
|-_mixins.scss
|-_placeholders.scss
framework/
modules/
main.scss

 

Esta estructura de carpetas garantiza que sea más fácil trabajar. Por ejemplo, los nuevos módulos que se vayan generando a medida que aumenta el proyecto pueden agregarse fácilmente a la carpeta de módulos y luego agregarse a archivo global.scss usando @import.

Para que se vea más claro, aquí hay un ejemplo del archivo global.scss:

/* VENDOR – Default fall-backs and external files.
==================== */

@import ‘vendor/_normalize.scss’;

/* BASE – Base Variable file along with starting point Mixins and Placeholders.
==================== */

@import ‘base/_variables.scss’;
@import ‘base/_mixins.scss’;
@import ‘base/_placeholders.scss’;

/* FRAMEWORK – Structure and layout files.
==================== */

@import ‘framework/_grid.scss’;
@import ‘framework/_breakpoints.scss’;
@import ‘framework/_layout.scss’;

/* MODULES – Re-usable site elements.
==================== */

@import ‘modules/_buttons.scss’;
@import ‘modules/_lists.scss’;
@import ‘modules/_tabs.scss’;

2. Usa las variables de Sass de forma efectiva

Las variables son una de las características más sencillas de Sass, pero en ocasiones se usan de manera incorrecta. La creación de unos estándares en cuanto a la nomenclatura en todo el sitio es esencial cuando se trabaja con variables. Sin unos estándares, se vuelven más difíciles de entender y reutilizar.

Aquí os dejo algunos consejos para crear variables útiles:

  • No seas vago a la hora de nombrar tus variables.
  • Bien tener o atenerse a unos estándares de nomenclatura (algunos ejemplos son; modular, BEM, etc.).
  • Asegúrate de que la variable de uso está justificada.

Aquí hay algunos buenos ejemplos:

$red: #ffa600;
$purple: #f3f3f3;
$blue-light: #82d2e5;
$link-primary: $red;
$link-secondary: $blue-light;
$link-tertiary: $purple;
$radius-button: 5px;
$radius-tab: 5px;

 

Y algunos ejemplos de cómo no debería de hacerse:

$red: #ffa600;
$link-primary: #ffa600;
$listStyleNone: none;
$border-Radius: 5px;

3. Reducir el uso de Mixin

El mixin es una excelente manera de incluir secciones de código varias veces dentro de un sitio. Sin embargo, incluir un mixin es lo mismo que copiar y pegar los estilos en todo el archivo CSS. Crea una masa de código duplicado y puede aumentar el tamaño del archivo CSS de forma considerable.

Por lo tanto, solo se deben usar mixins si, por ejemplo, es necesario crear estilos modificados rápidamente.

Aquí un ejemplo:

@mixin border-rounded-corner($arcs) {
-moz-border-radius: $arcs;
-webkit-border-radius: $arcs;
border-radius: $arcs;
}

 

El mixin border-rounded-corner se puede utilizar en cualquier ocasión simplemente cambiando el valor de $arcs, lo cual convierte a este mixin en un elemento que vale la pena:

.primary-button {
@include border-rounded-corner(5px);
}.secondary-button {
@include border-rounded-corner(8px);
}

 

Esto podría considerarse un mal ejemplo:

@mixin secondary-button {
padding-top: 10px;
color: #696969;
background-color: orange;
font-size: 16px;
width: 150px;
margin: 5px 0;
text-align: justify;
display: block;
}

 

Este mixin no tiene una razón de ser suficiente y, por lo tanto, se podría considerar mejor como un placeholder, lo cual nos lleva al punto 4.

4. Acercarse a los placeholders

A diferencia de los mixins, los placeholders se pueden usar varias veces sin necesidad de agregar código duplicado. Esto los convierte en una opción mucho más amigable para generar CSS sin necesidad de repetirse:

%bg-images {
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}.image-one {
@extend %bg-images;
background-image:url(/imgs/image-1.jpg»);
}.image-two {
@extend %bg-images;
background-image:url(/imgs/image-2.jpg»);
}

 

Mientras que el código compilado de CSS sería:

.image-one, .image-two {
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}.image-one {
background-image:url(/imgs/image-1.jpg») ;
}.image-two {
background-image:url(/imgs/image-2.jpg») ;
}

 

El código repetido del placeholder se imprime solo una vez y solo los estilos únicos se aplican a los selectores individuales. Si no se utiliza, los placeholders no se imprimen para nada.
Vinculando esto con el punto 3 anteriormente mencionado, los placeholders se pueden usar junto con los mixins para reducir el código duplicado y mantener la flexibilidad de un mixin…

/* PLACEHOLDER
============================================= */%btn {
padding: 10px;
color:#fff;
curser: pointer;
border: none;
shadow: none;
font-size: 14px;
width: 150px;
margin: 5px 0;
text-align: center;
display: block;
}/* BUTTON MIXIN
============================================= */@mixin btn-background($btn-background) {
@extend %btn;
background-color: $btn-background;
&:hover {
background-color: lighten($btn-background,10%);
}
}/* BUTTONS
============================================= */.cta-btn {
@include btn-background(green);
}.main-btn {
@include btn-background(orange);
}.info-btn {
@include btn-background(blue);
}

 

5. Usa funciones para  realizar cálculos

Las funciones se utilizan para realizar cálculos. Una función en Sass no genera ningún CSS. En su lugar, devuelve un valor que se puede utilizar en el CSS. Esto es útil para los cálculos que se realizarán en todo el sitio web.
Por ejemplo, las funciones son útiles para calcular el porcentaje de ancho de un elemento dado:

@function calculate-width ($col-span) {
@return 100% / $col-span
}.span-two {
width: calculate-width(2); // spans 2 columns, width = 50%
}.span-three {
width: calculate-width(3); // spans 3 columns, width = 33.3%
}

6. Mantener en orden nuestro código

Colocar todos los mixins, funciones, placeholders y variables en su archivo parcial correspondiente. Mantener estos bloques de código juntos asegura que sean más fáciles de editar y reutilizar en un futuro.

Además de ello, los elementos de todo el sitio deben mantenerse juntos en una carpeta base o principal. Esta carpeta base o principal debe contener variables globales como las fuentes y combinaciones de colores:

$font-primary: ‘Roboto’, sans-serif;
$font-secondary: Arial, Helvetica, sans-serif;$color-primary: $orange;
$color-secondary: $blue;
$color-tertiary: $grey;
}

Las combinaciones, funciones y variables específicas del módulo deben mantenerse dentro del archivo parcial del módulo correcto:

$tab-radius: 5px;
$tab-color: $grey;

7. Limitar el anidamiento

El uso excesivo de reglas anidadas en Sass puede causar muchos problemas, desde código complejo hasta sobre especificidad. Esto además puede causar problemas aumentando la necesidad de incluir la etiqueta important, que generalmente debe evitarse.
Existen, por tanto, algunas reglas de oro para anidar:

  • Nunca deben de existir más de 3 niveles de profundidad (No es que no se pueda, sino que para nada es recomendable).
  • Asegurarse de que el código generado en  CSS sea limpio y reutilizable.
  • Usar el agrupamiento cuando tenga sentido, no como una opción predeterminada.

8. Mantener los estándares simples

El propósito de Sass es escribir código CSS más manejable. Antes de crear nuevos mixins, variables o funciones, asegúrate de que su presencia mejora el desarrollo y no complica mas las cosas. Todas las funciones de Sass son útiles cuando se emplean en las situaciones correctas y con moderación. Crear una lista interminable de variables sin un uso claro, o una función compleja que es difícil de entender para cualquier otra persona que no sea el autor, no es la intención y no ayudará a mejorar nuestro CSS.

Conclusión

Por mi parte, esto es todo en cuanto a mi lista para ayudarte a mejorar tu código SASS. Puede que no estés de acuerdo con todos los puntos, Sass es todavía una tecnología bastante nueva, por lo que continuamos aprendiendo nuevas prácticas con ella. Si tienes cualquier sugerencias, idea, experiencia, etc no dudes en dejarme un comentario.

Leave a Reply

Your email address will not be published.