Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Aprenda Sass en 15 minutos

Si escribe grandes cantidades de CSS, un preprocesador puede disminuir en gran medida sus niveles de estrés y ahorrarle mucho tiempo valioso. El uso de herramientas como Sass , Less , Stylus o PostCSS hace que las hojas de estilo grandes y complicadas sean más claras de entender y más fáciles de mantener. Gracias a características como variables, funciones y mixins, el código se vuelve más organizado, lo que permite a los desarrolladores trabajar más rápido y cometer menos errores.
Hemos trabajado con preprocesadores antes, como recordarán de nuestro artículo sobre Less . Esta vez explicaremos Sass y le mostraremos algunas de sus características principales.

1. Comenzando

El navegador no puede interpretar los archivos Sass, por lo que deben compilarse en CSS estándar antes de que estén listos para acceder a la web. Es por eso que necesita algún tipo de herramienta que lo ayude a traducir archivos .scss a .css. Aquí tienes un par de opciones:
  • La solución más simple es una herramienta de navegador para escribir y compilar Sass en el acto: SassMeister .
  • Use una aplicación de escritorio de terceros. Ambas versiones gratuitas y de pago están disponibles. Puedes ir aquí para obtener más información.
  • Si usted es una persona CLI como nosotros, puede instalar Sass en su computadora y compilar archivos manualmente.
Si decide utilizar la línea de comandos, puede instalar Sass en su forma original (escrita en rubí) o puede probar el puerto Node.js (nuestra elección). También hay muchos otros envoltorios , pero como amamos a Node.js, iremos con eso.
A continuación, le mostramos cómo puede compilar archivos .scss utilizando la CLI del nodo:
node-sass input.scss output.css
Además, este es el momento de mencionar que Sass ofrece dos sintaxis distintas: Sass y SCSS. Ambos hacen lo mismo, solo están escritos de diferentes maneras. SCSS es el más nuevo y generalmente se considera mejor, por lo que vamos a ir con eso. Si desea obtener más información sobre la diferencia entre los dos, consulte este excelente artículo.

2. Variables

Las variables en Sass funcionan de manera similar a las de cualquier lenguaje de programación, incluidos los principales, como los tipos de datos y el alcance. Al definir una variable, almacenamos dentro de ella un cierto valor, que generalmente es algo que a menudo volverá a ocurrir en el CSS, como un color de paleta, una pila de fuentes o las especificaciones completas para una sombra de caja fresca.
A continuación puede ver un ejemplo simple. Cambie entre las pestañas para ver el código SCSS y su traducción CSS.
SCSS
CSS
$ title -font: normal 24px / 1.5 'Open Sans' , sans-serif;
$ cool -red: # F44336; 
$ box -shadow-bottom-only: 0 2px 1px 0 rgba (0, 0, 0, 0.2);

h1.title {
  fuente: $ title -font;
  color: $ cool -red;
}

div.container {
  color: $ cool -red;
  fondo: #fff;
  ancho: 100%;
  box-shadow: $ box -shadow-bottom-only;
}
La idea detrás de todo esto es que luego podemos reutilizar los mismos valores más rápidamente, o si se necesita un cambio, podemos proporcionar el nuevo valor en un solo lugar (la definición de la variable), en lugar de aplicarlo manualmente en todas partes Estás usando esa propiedad.

3. Mixins

Puede pensar en los mixins como una versión simplificada de las clases de constructor en lenguajes de programación: puede tomar todo un grupo de declaraciones CSS y volver a usarlas donde desee y crear un conjunto específico de estilos.
Los mixins incluso pueden aceptar argumentos con la opción de establecer valores predeterminados. En el siguiente ejemplo, definimos un mixin cuadrado y luego lo usamos para crear cuadrados de diferentes tamaños y colores.
SCSS
CSS
@mixin cuadrado ($ tamaño, $ color) {
  ancho: $ tamaño;
  altura: $ tamaño;
  color de fondo: $ color;
}

.small-blue-square {
  @incluye cuadrado ( 20 px, rgb ( 0 , 0 , 255 ));
}

.big-red-square {
  @incluir cuadrado ( 300 px, rgb ( 255 , 0 , 0 ));
}
Otra forma eficiente de usar mixins es cuando una propiedad requiere prefijos para funcionar en todos los navegadores.
SCSS
CSS
@mixin transform-tilt () {
  $ inclinación: rotar ( 15 grados);

  -webkit- transform: $ tilt; / * Ch <36, Saf 5.1+, iOS, An = <4.4.4 * / 
      -ms- transform: $ tilt; / * IE 9 * / 
          transform: $ tilt; / * IE 10, Fx 16+, Op 12.1+ * /
}

. frame: hover {
  @include transform-tilt; 
}

4. Extender

La siguiente característica que veremos es code> @extend , que le permite heredar las propiedades CSS de un selector a otro. Esto funciona de manera similar al sistema mixins, pero es preferible cuando queremos crear una conexión lógica entre los elementos de una página.
La extensión debe usarse cuando necesitamos elementos de estilo similar, que aún difieren en algunos detalles. Por ejemplo, hagamos dos botones de diálogo: uno para aceptar y otro para cancelar el diálogo.
SCSS
CSS
.dialog-button {
  tamaño de la caja: border-box;
  color: #ffffff;
  cuadro-sombra: 0 1px 1px 0 rgba (0, 0, 0, 0.12);
  acolchado: 12px 40px;
  cursor: puntero;
}

.confirmar {
  @extend .dialog-button;
  color de fondo: # 87bae1; 
  flotador : izquierda;
}

.cancel {
  @extend .dialog-button;
  color de fondo: # e4749e; 
  flotador : derecho;
}
Si revisa la versión CSS del código, verá que Sass combinó los selectores en lugar de repetir las mismas declaraciones una y otra vez, ahorrándonos una memoria preciosa.

5. Anidamiento

HTML sigue una estructura de anidamiento estricta, mientras que en CSS suele ser un caos total. Con la anidación de Sass, puede organizar su hoja de estilo de una manera que se parezca más al HTML, reduciendo así la posibilidad de conflictos CSS.
Para un ejemplo rápido, diseñemos una lista que contenga varios enlaces:
SCSS
CSS
ul {
   list -style: none;

  li {
    acolchado: 15 px;
    pantalla: bloque en línea ;

    una {
      decoración de texto: ninguno;
      tamaño de fuente: 16 px;
      color: # 444 ;
    }

  }

}
Muy limpio y a prueba de conflictos.

6. Operaciones

Con Sass puede realizar operaciones matemáticas básicas directamente en la hoja de estilo y es tan simple como aplicar el símbolo aritmético apropiado.
SCSS
CSS
$ ancho : 800px;

.envase { 
  ancho: $ ancho ;
}

media columna {
  ancho: $ ancho / 2;
}

.columna quinta {
  ancho: $ ancho / 5;
}
Aunque el CSS de vainilla ahora también ofrece esta característica en forma de calc () , la alternativa Sass es más rápida de escribir, tiene la %operación de módulo y puede aplicarse a una gama más amplia de tipos de datos (por ejemplo, colores y cadenas).

7. Funciones

Sass ofrece una larga lista de funciones integradas. Sirven para todo tipo de propósitos, incluida la manipulación de cadenas, operaciones relacionadas con el color y algunos métodos matemáticos útiles como random () y round ().
Para exhibir una de las funciones Sass más simples, crearemos un fragmento rápido que utilice oscurecer ($ color, $ cantidad) para crear un efecto de desplazamiento.
SCSS
CSS
$ impresionante- azul: # 2196F3;

una {
  acolchado: 10px 15px;
  color de fondo: $ awesome -blue;
}

a: desplazarse {
  color de fondo: oscurecer ( $ impresionante- azul, 10%);
}
Excepto la enorme lista de funciones disponibles, también hay opciones para definir las suyas. Sass también admite el control de flujo, por lo que si lo desea, puede crear comportamientos bastante complejos.

Conclusión

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas