A demo Sass project

SASS VS SCSS

El formato original de SASS no usa llaves, es más conciso pero algo más peligroso si no controlas bien el indentado.

Más info

Son dos formatos hermanos, pero es más habitual trabajar con SCSS, ya que, aparte de la legibilidad, es directamente compatible con CSS.

INSTALL

MAC
sudo gem install sass

LINUX
sudo apt-get install ruby-full gem install sass

COMPILAR

sass --watch directorioSASS/ficheroPrincipal.scss:directorioCSS/nombreFichero.css

El nombre del fichero CSS se puede omitir, usará el mismo nombre del fichero SCSS

COMPILAR Y MINIFICAR
sass --watch directorioSASS/ficheroPrincipal.scss:directorioCSS/nombreFichero.css --style compressed

MAIN FEATURES

• Variables: ver fichero _variables.scss
• Nesting: ver cualquier componente
• Partials: recuerda usar '_' delante de los ficheros para no generar nuevas hojas de CSS y compilar a un único fichero. Es más limpio.
• Imports: importa en tu fichero principal los parciales, recuerda que el orden importa, ver main.scss
• Mixins: pequeños bloques reutilizables con parámetros, ver _transitions.scss
• Herencia: propiedades que se pueden importar dentro de otros selectores, ver _flex.scss o _positions.scss

ESTRUCTURA DEL PROYECTO

Siguiendo, a mi manera, los principios de la metodología ITCSS, me resulta útil organizarme los ficheros según su alcance y tipo de objeto al que modifican.

De menor a mayor proridad:

1. Settings para variables de color, tipografías...
2. Tools para mixins y extend/herencias
3. Generic para third-party, resets, etc.
4. Elements para las etiquetas HTML (body, p, a, etc)
5. Components para los elementos específicos que componen el site
6. Utilities para clases específicas con prioridad alta