Cómo usar Sass para construir un proyecto con múltiples temas

El flujo de trabajo del desarrollador frontend ha experimentado grandes cambios en los últimos años. Más complejidad, mayores requisitos y proyectos más grandes nos llevan a nuevas tecnologías como los preprocesadores. Personalmente, me encanta el flujo de trabajo de mi preprocesador y no me gustaría perderme a Sass por mis proyectos en estos días; sin él, sería un desastre.

Una situación en particular en la que Sass me ha ayudado es crear una única interfaz sólida que puede tener diferentes temas: cambiar colores, imágenes o fuentes con facilidad. Hoy voy a describir mi flujo de trabajo, espero que les sea algo útil.

Estructura básica

Aquí está la estructura de un proyecto de ejemplo. Puedes usar cualquier parte que lógicamente sientas que debería incluirse. La clave está en tener una carpeta separada para temas y un nuevo archivo .scss para cada tema.

Carpeta-Estructura

1

|- _scss/

2

|-|- _base/

3

|-|-|- _config.scss

4

5

|-|- _layouts/

6

|-|-|- _l-grid.scss

7

|-|-|- _l-default.scss

8

9

|-|- _modules/

10

|-|-|- _m-accordions.scss

11

|-|-|- _m-teasers.scss

12

13

|-|-_themes/

14

|-|-|- _light-theme/

15

|-|-|-|- light.scss

16

17

|-|- application.scss

Construye la base con un archivo principal

En el archivo application.scss tu importas todos sus parciales, ignorando la carpeta _themes/ en este punto. Esto construye la base sobre la cual podemos crear diferentes temas.

1

@charset 'UTF-8';

2

3

// 1.Base

4

@import '_base/_config.scss';

5

6

// 2.Layouts

7

@import '_layouts/_l-grid',

8

        '_layouts/_l-default';

9

10

// 3.Modules

11

@import '_modules/_m-accordions',

12

        '_modules/_m-teasers';

Configuración

Colores, fuentes y mucho mas

Configurar tu proyecto es muy importante. Aquí las variables vienen al rescate, lo que nos permite establecer los valores predeterminados y luego sobrescribir los valores en el nivel del tema más adelante. Aquí puedes ver que he establecido algunas variables para los colores, las fuentes y la configuración de los bordes.

Para obtener más detalles sobre cómo nombrar las variables, echa un vistazo al Consejo rápido de Jim Nielsen: nombre tus variables SASS de manera modular.

1

@charset "UTF-8";

2

3

// Colors

4

$black: #000;

5

$white: #fff;

6

$red: #e2061c;

7

$gray-light: #c9c8c8;

8

$gray: #838282;

9

$gray-dark: #333333;

10

$blue: #253652;

11

12

// Corp-Colors

13

$corp-color: $blue !default;

14

$corp-color-dark: darken($corp-color, 15%) !default;

15

$corp-color-second: $red !default;

16

$corp-color-second-dark: darken($corp-color-second, 15%) !default;

17

18

// Font

19

$base-font-size: 1.8 !default;

20

$base-font-family: Helvetica, Arial, Sans-Serif !default;

21

$base-font-color: $gray-dark !default;

22

23

// Border

24

$base-border-radius: 2px !default;

25

$rounded-border-radius: 50% !default;

26

$base-border-color: $gray !default;

La clave para esta etapa es utilizar el indicador !default después de las declaraciones de variables. Hacer esto te permite sobrescribirlos dentro de los archivos de tema .scss; el !default efectivamente dice "use este valor si no está definido en otra parte".

Imágenes de fondo

Muy a menudo los desarrolladores no crean variables para las imágenes, en su lugar escriben urls directamente dentro de los selectores. Un enfoque que me gusta es eliminar todas las rutas dentro de los parciales y colocarlas en el archivo de configuración como variables. Esto hará que tu vida sea más fácil y el proyecto sea más fácil de mantener.

1

// Images

2

$sprite:              '../images/base/sprite.png' !default;

3

$colorbox-background: '../images/base/colorbox-background.png' !default;

Ejemplo de un módulo básico

Aquí puedes ver algunas variables de fondo en acción. Este es un parcial modular para un acordeón, que utiliza la variable global $sprite pero también configura y usa una variable $accordion-bgcolor que es específica del módulo.

1

// 1.Config

2

$accordion-bgcolor: $gray !default;

3

4

// 2.Base

5

.m-accordion {

6

    padding: 20px;

7

    background: $accordion-bgcolor;

8

}

9

.m-accordion__trigger {

10

    background: url($sprite) no-repeat;

11

}

Como crear un tema

En tu archivo de tema (como los _themes/ _light-theme/light.scss de la estructura de demostración anterior) importa el archivo application.scss que contiene todos los módulos, diseños, etc. Esta es la base para todo; con un tema colocaremos una segunda capa sobre él. Nada mas. Una vez que hayas importado application.scss agrega las mismas variables utilizadas anteriormente, pero define valores específicos para este tema.

Usando esta técnica, si agregamos nuevos módulos a la base del proyecto, los compilaremos de forma automática (e inofensiva) dentro de todos nuestros temas.

1

@charset 'UTF-8';

2

3

// 1.Overwrite stuff

4

$corp-color: $gray;

5

$corp-color-darken: darken($corp-color, 10%);

6

$corp-color-second: $blue;

7

$corp-color-second-dark: darken($corp-color-second, 10%);

8

9

$base-font-size: 1.6;

10

$base-font-family: Droid Sans, Georgia, Arial;

11

12

$base-border-radius: 0px;

13

$base-border-color: $gray-light;

14

15

// Images

16

$sprite:              '../images/light/sprite.png';

17

$colorbox-background: '../images/light/colorbox-background.png';

18

19

$accordion-bgcolor: $gray-light;

20

21

// 2. Import basic theme

22

@import '../../application';

Viendo archivos múltiples en Sass

El último paso es compilar Sass a CSS y obtener dos archivos diferentes para su uso. Debemos compilar application.scss y light.scss. Usando la línea de comando usarías algo como:

1

sass --watch 

2

YOUR/PATH/application.scss:YOUR/CSSPATH/application.css 

3

YOUR/PATH/_themes/_light-theme/light.scss:YOUR/CSSPATH/light.css

Si utilizas una aplicación, como CodeKit o Prepros, la compilación será un proceso más visual.

Incluye el archivo light.css en el encabezado de tu página y echa un vistazo a tu sitio web actualizado.

Conclusión

Como puedes ver, es útil y sencillo tener múltiples archivos de temas, todos basados en una base sólida. Siéntete libre de hacer preguntas, o haz comentarios y comparte tus experiencias con nosotros en la sección de comentarios.