Sass Style Guide

readme.md

Sass Style Guide

Lineamientos para escribir Sass para ser mantenible y escalable

1. Sintaxis
2. Cadenas de texto
3. Números
4. Operaciones Matematicas
5. Colores
6. Variables & Colores

Sintaxis

La manera que queremos que nuestro código se vea y se escriba es especialmente importante cuando se trabaja con un equipo grande donde cada quien esta acostumbrado a escribir en diferentes estilos y organizar archivos de diferentes maneras.

La siguiente es una guia de estilos básica que puede seguirse por un equipo de trabajo para unificar esfuerzos.

• Se deben usar dos (2) espacios de indentación, no tabs;
• Reglas multilínea de CSS correctamente escritas;
• Idealmente no se debe tener más de 80 caracteres por línea;
• Reducir el uso significativo de espacios vacíos;

// Correcto
.menu {
  display: block;
  overflow: hidden;
  padding: 0 1em;
}

// Incorrecto
.menu {
    display: block; overflow: hidden;

    padding: 0 1em;
}

Cadenas de texto

• Las cadenas de texto siempre deberan de estar entre comillas simples.

// Correcto
$font-stack: 'Helvetica Neue Light', 'Helvetica', 'Arial', sans-serif;

// Incorrecto
$font-stack: "Helvetica Neue Light", "Helvetica", "Arial", sans-serif;

// Incorrecto
$font-stack: Helvetica Neue Light, Helvetica, Arial, sans-serif;

• Por la misma razón las URLs también deberian estar entre comillas simples.

// Correcto
.menu {
  background-image: url('/images/menu-bg.jpg');
}

// Incorrecto
.menu {
  background-image: url(/images/menu-bg.jpg);
}

Números

Ceros

• Los números deben mostrar ceros a la izquierda antes de un valor decimal menor que uno.

// Correcto
.menu {
  padding: 2em;
  opacity: 0.5;
}

// Incorrecto
.menu {
  padding: 2.0em;
  opacity: .5;
}

Unidades

• Cuando se trata de valores especificos como (px) , un valor 0 no debería tener una unidad.

// Correcto
$length: 0;

// Incorrecto
$length: 0em;

• La excepción a esta regla es cuando sumamos ya que podemos obtener diferentes valores si no somos específicos.

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

Operaciones Matematicas

• Cálculos numéricos de nivel superior siempre deben envolverse en paréntesis.

// Correcto
.menu {
  width: (100% / 3);
}

// Incorrecto
.menu {
  width: 100% / 3;
}

Colores

• Cuando usamos colores en RGB o HSL, siempre añadir un solo espacio después de una coma (,) y sin espacio entre paréntesis ((, ) ) y contenido.

// Correcto
.menu {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Incorrecto
.menu {
  color: rgba(0,0,0,0.1);
  background: hsl( 300, 100%, 100% );
}

Variables & Colores

• Cuando se utiliza un color más de una vez podemos almacenarlo en una variable con un nombre significativo que representa el color.

$dark-pink: #c69;

• Cuando se utiliza el color para un tema la mejor práctica es asignar esa variable a otra que nos ayude a saber en donde se debe de usar.

$main-theme-color: $dark-pink;