Estilo Un sitio usando SASS

[dieciséis]

01. Configura el compilador.

El uso de SASS esencialmente requiere un compilador. La forma más sencilla de hacerlo sería en la línea de comandos. Puedes hacerlo usando Homebrew. El compilador de SASS se implementa en varios idiomas diferentes, y Homebrew instalará la versión DART, que es rápida.

brew install sass/sass/sass

02. Crea un archivo SASS

Intentemos crear un archivo SASS simple para ver el compilador en acción. Uno de los conceptos más simples en SASS son variables, que se pueden especificar una vez con un PS Prefijo y luego se utiliza a lo largo de su código. Vamos a crear SASS-INPUT.SCSSS .

 $ TEXT-COLOR: #CCCCCCC;
cuerpo {
    Color: $ Color de texto;
} 

03. Compilación de la línea de comandos

Ahora podemos ejecutar el compilador de SASS en la línea de comandos para convertir nuestro archivo .scss en la salida CSS. Notará en el archivo de salida que las variables se han ido y simplemente nos quedan con la sintaxis de CSS estándar que es utilizable por el navegador.

 SASS SASS-INPUT.SCSS CSS-OUTPUT.CSS 

04. Automatiza tu compilación.

Esto es genial, pero no quiere ejecutar el compilador de SASS manualmente cada vez que realice cambios. Una opción es que escuche los cambios en los archivos en un directorio y recompile automáticamente la salida a un directorio diferente (preservando nombres de archivos). Esto también le permite efectivamente segregar su fuente de origen .SSSS de su CSS construido.

 MKDIR SRC
mkdir src / sass
público mkdir
MKDIR PUBLIC / CSS
SASS --WATCH SRC / SASS /: PUBLIC / CSS /

05. Jugar con Sass Styling.

Ahora veamos un simple sitio de inicio, que podemos usar para jugar con Sass Styling. Podemos empezar, clonando un sitio de ejemplo sin estilográfico. Lo clave a tener en cuenta es que nuestra página HTML no conoce nada sobre SASS. Tiene un solo punto de entrada de archivo CSS, que crearemos a continuación.

 CD Public
Curl -O index.HTML HTTPS: // RAW.
githubusercontent.com/simon-a-j/sass-
tutorial/
Master / Public / index.html 

06. La hoja principal de los estilos.

Estamos usando Styles.css como nuestro principal punto de entrada CSS, que más tarde lo usaremos para importar otros módulos. Esto significa que debemos decirle a SASS que genere este archivo, por lo que también debemos crear un archivo STYLES.SCSS en nuestra carpeta SRC / SASS. Si estas corriendo sass --watch Como antes, esto se compilará automáticamente en CSS en el Public / CSS La carpeta, y el refrescante de su sitio mostrará sus cambios. Intente hacer algunas modificaciones y refrescar la página HTML en el navegador a medida que avanza.

 // Styles.SCSS
cuerpo {
  Fuente-familia: sans-serif;
  Text-alinec: Centro;
}

07. Administrar esquema de color

Veamos cómo SASS puede ayudarnos a administrar un esquema de color para el sitio. Es común tener una paleta de cinco o seis colores para una página web. Podemos externalizarlos en _coloursssss . El prefijo de subrayado le dice a SASS que no compile esto en un nuevo archivo HTML (un 'parcial'). Pero podemos usarlo de una manera ligeramente diferente.

 // _colourss.ssss
$ Color-Primaria: # 231651;
$ Color-Secundary: # 2374AB;
$ Color-Light: # D6FFF6;
$ Color-Hight1: # 4DCCBD;
$ Color-Hight2: # FF8484;

08. Usa variables de color.

Para usar estas variables de color que acabamos de configurar, podemos decirle a Sass para importar el contenido de _coloursssss en nuestra hoja de estilo principal. Hacemos esto usando un @importar declaración. Una vez que haya hecho esto, observe cómo se resuelven las variables dentro del archivo CSS de salida.

 // Styles.SCSS
@import "_colourssss";
cuerpo {
  Fuente-familia: sans-serif;
  Text-alinec: Centro;
  Fondo: degradado lineal (155DEG,
$ Color-primario 70%, $ Color-Secundary
70%);
  Color: $ luz de color;
  Min-altura: 100vh;
}
h1 {
    Color: $ Color-Highlight1;
}
H2 {
  Color: $ Color-Hight2;
}

09. Estilos de nido

Otra característica útil de SASS es la capacidad de anidar los estilos. Es decir, puede especificar un estilo para un elemento que solo se aplica si ese elemento ocurre dentro de un elemento principal. Usemos esto para diferenciar nuestro estilo de los enlaces dependiendo de si aparecen en el encabezado u cuerpo.

 a {
  Color: $ Color-Secundary;
}
.profile-encabezado {
  a {
    Tamaño de fuente: 16px;
    margen-izquierda: 10px;
    margen-derecha: 10px;
    relleno: 10px;
    Radio de borde: 5px;
    Color: $ luz de color;
    Color de fondo: $ Color-Secundaria;
  }
}

10. Hacer cuadrícula sensible

Ahora vamos a organizar nuestro contenido en un formato de cuadrícula sensible. SASS tiene un par de características para hacer que esto sea significativamente más fácil de administrar. Además de usar variables para especificar nuestros puntos de interrupción, podemos anidar @medios de comunicación Consultas dentro de otros estilos, lo que hace que el comportamiento sea específico para el tamaño de la pantalla mucho más legible.

 $ Punto de interrupción: 800px;
.profile-cuerpo {
  PANTALLA: FLEX;
  alinear-artículos: estiramiento;
  Justify-Contenido: Espacio-alrededor;
  margen-top: 32px;
  margen-izquierda: 10VW;
  Margen derecho: 10VW;
  Pantalla @media y (max-ancho:
$ interrupción) {
      Dirección Flex: Columna;
  }
}
.profile-section {
  Color de fondo: $ Color-Highlight1;
  Color: $ Color-Primaria;
  Margen: 16px;
  Radio de borde: 10px;
  Ancho: 340px;
  .profile-content {
    relleno: 20px;
  }
  Pantalla @media y (max-ancho:
$ interrupción) {
    Ancho: 100%;
  }
}

11. Introducir Mixins

Mixins es otra potente característica de SASS, que puede considerar como una forma de definir las funciones reutilizables de los estilos. Una mezcla se define una vez, puede tomar parámetros y luego se puede invocar en cualquier lugar de su código de SASS. Un caso de uso para esto es para manejar el prefijo del proveedor. Si queremos una transformación CSS para trabajar en navegadores más antiguos, esto puede requerir un -Bebe Prefijo para cromo y safari, por ejemplo. Vamos a definir una mezcla que se encargue de esto por nosotros.

12. Mixins y variables.

También podemos usar una mezcla con varios parámetros, combinados con algunas variables que definimos, para manejar más elegantemente el estilo de varias partes de la página. Si creamos una mezcla que define el primer plano y el color de fondo, esto nos permitirá seleccionar las apariencias para diferentes secciones de una lista finita de variables de estilo.

$ style1: (primer plano: $ Color-light,
Fondo: $ Color-Secundaria);
$ style2: (primer plano: $ Color-primaria,
Fondo: $ Color-Highlight1);
$ style3: (primer plano: $ Color-Primary,
Fondo: $ Color-Highlight2);
@Mixin Style-Style ($ primer plano,
$ fondo) {
  Color: $ primer plano;
  Fondo-color: $ fondo;
} 

13. Usa tu nueva mezcla

 .profile-encabezado {
  a {
    @Include-Style-Style ($ style1 ...);
    // ...
  }
}
.profile-section {
    @Include Style-Style ($ style2 ...);
  // ...
}

14. Entender la herencia

Otra característica muy poderosa de SASS es la herencia. En este momento tenemos dos estilos diferentes para los enlaces en nuestra página. Si queremos usar estilos comunes en ambos, en lugar de copiar y pegar CSS, ¿por qué no usamos una clase de marcador de posición, denotado con '%', que puede extenderse por ambos, lo que les permite heredar sus estilos?

% enlace compartido {
  Tamaño de fuente: 16px;
  margen-izquierda: 10px;
  margen-derecha: 10px;
  relleno: 10px;
  Radio de borde: 10px;
}

15. Extender clases

Ahora podemos extender la clase compartida enlace para definir el estilo de enlace en todo nuestro sitio. Esto está empezando a lucir bastante elegante. Definimos lo que un enlace generalmente se ve simplemente como una vez, reúnelo en todo, y especifique los colores de la paleta para cada enlace con una mezcla.

 .profile-encabezado {
  a {
    @Extend% enlace-compartido;
    @Include-Style-Style ($ style1 ...);
  }
}
a {
  @Extend% enlace-compartido;
  @Include Style Style ($ style3 ...);
}

16. Modificar el tema.

Ahora echemos un vistazo a lo fácil que la hace modificar el tema de nuestro sitio. Los colores actuales pueden no ser perfectos. No solo podemos modificar las variables de color, sino que también podemos usar algunas funciones de SASS para generar procesos de manera procesal que coincidan con una primaria de nuestra elección.

 // _colourss.ssss
$ Color-Primaria: # 2E1F27;
$ Color-Secundary: Alighten ($ Color-Primary,
25%);
$ Color-Light: Alighten ($ Color-Primary,
75%);
$ Color-Hight1:
aligerar (complemento ($ color-primario), 50%);
$ Color-Highlight2:
aligerar (complemento ($ Color-Secundaria), 50%);

17. Seleccione un nuevo conjunto de colores.

Ahora, podemos modificar todo el esquema de color para el sitio simplemente especificando un nuevo valor primario de color en el _coloursssss expediente. Dale un intento experimentando con colores alternativos. También podríamos tener SASS Aleatorizándolo (pero recuerde que esto se refiere al punto en el que se construye su sitio, no en tiempo de ejecución). También puede intentar ajustar la lógica que estamos usando para derivar los otros colores en el tema de la primaria.

 $ rojo: aleatorio (255);
$ verde: aleatorio (255);
$ azul: aleatorio (255);
$ Color-primaria: RGB ($ rojo, $ verde, $ azul); 

18. Usa las bibliotecas.

El sistema de módulos de SASS también hace que sea muy sencillo usar bibliotecas de terceros con un esfuerzo mínimo, y sin enviar archivos de tiempo de ejecución grandes a sus usuarios finales. Probemos la biblioteca de bordes en ángulo, que podemos usar para crear bordes inclinados para objetos en nuestra página.

 Git Clone https://github.com/josephfusco/
Angled-Edges.GIT SRC / SAS / BORDES DE ANGULOS

19. Los bordes en ángulo Mixin

Podemos importar bordes en ángulo de la misma manera que hicimos para nuestro esquema de color parcial. Luego es utilizable a través de una mezcla que se envía con la biblioteca. Proprámoslo en nuestra clase de sección de perfil.

 @Import "Angle-Edges / _angled-Edges.SCSSS";
.profile-section {
  @InClude en ángulo ("Fondo exterior",
"Menor derecho", $ Color-Highlight1);
  @InClude en ángulo ("Top exteriores",
"Superior a la derecha", $ Color-Highlight1);
  Margen: 120px 16px 120px 16px;
  // ...
}

20. Formato de salida

Vamos a terminar mirando la salida SASS GENERA. Si ha estado siguiendo sus archivos CSS, ya que hemos realizado cambios, notará que permanecen bien legibles. Sin embargo, también puede tener SASS construir CSS condensado, que es menos legible por humanos, pero aún está listo para enviar. Puedes hacer esto usando el --estilo bandera de la línea de comandos.

 SASS SRC / SASS /: PUBLIC / CSS / --Style
comprimido 

21. Más SASS

Ahora hemos explorado bastantes características de SASS, y nuestro sitio no se ve tan mal. Ojalá estés empezando a ver cómo Sass nos ayuda a desarrollar hojas de estilo más mantenibles. No hemos cubierto todas las características del idioma: hay muchas funciones más útiles enviadas con ella y características avanzadas como las directivas de control (como @si De @por y @mientras ) que a menudo se usan para crear funciones complejas de la biblioteca. En general, recuerde que SASS es totalmente una preferencia estilística. Puede hacer todo lo que hemos visto con CSS puro si lo desea, pero definitivamente debe pensar en el preprocesamiento a medida que su trabajo se vuelva más complejo.

Este artículo se publicó originalmente en el número 282 de Diseñador web .Comprar Número 282 o Suscríbete aquí .

Leer más:

• 10 nuevas tecnologías de CSS increíbles
• 3 nuevas propiedades de CSS brillantes para probar hoy
• Grandes sitios web de desplazamiento de paralaje