Aprendiendo Sass (SCSS) rápidamente

Sass (hojas de estilo sintácticamente impresionantes), también conocido como CSS con superpoderes, es un preprocesador , que hace que el desarrollo de estilos para nuestros proyectos sea mucho más fácil, más agradable y más rápido. También nos permite mejorar significativamente la estructura del código, usar variables y crear elementos reutilizables (mixins, marcadores de posición). El mantenimiento de dicho código es mucho más fácil.

Aprendiendo Sass (SCSS) rápidamente

Ya mencionamos sobre Sass en los artículos anteriores sobre la estructura y metodologías de CSS:
Ver también :
¿Aprender Sass para qué?
Bueno, escribir CSS es simple. Escribir CSS mantenible para proyectos más grandes es difícil. Necesitamos herramientas y enfoques que simplifiquen, mejoren y hagan nuestro trabajo más rápido. Y simplemente pondrá a los programadores en el camino correcto. Una de estas herramientas es antigua, buena, menos CSS. Sin embargo no lo uso desde hace mucho tiempo. En cambio trabajo con Sass, que es mi favorito.
Un buen ejemplo proviene también de Bootstrap 4 , que en el pasado fue escrito con Less, pero la última versión (4) está escrita con Sass.
Bien, entonces ... todo el preprocesamiento nos ayuda a hacer que la escritura de CSS sea más similar a la programación "normal", donde tenemos tales construcciones como variables y funciones. ¿Guay? ¡Cosa segura!
Ejemplo - variables :
1
2
3
4
5
6
7
// some-file.scss
 
$my-color: #333444;
 
p {
  color: $my-color;
}
Ciertamente podemos realizar operaciones aritméticas sobre variables.
Con Sass colocamos el código en los parciales / archivos, de acuerdo a su propósito. Mantenemos el orden. Y el conjunto finalmente aparecerá ante nosotros, como un archivo (s) CSS ya hecho.
Ejemplo :
sass –watch input.scss output.css
Por supuesto no tenemos que hacerlo manualmente. Hay herramientas de automatización. Y aún mejor: si utilizamos el marco web, probablemente haya una manera fácil de integrar y automatizar el manejo de Sass. Yo uso Ruby on Rails, por ejemplo. Luego también webpack, es6, vue.js y ... deja que la magia suceda.

Por cierto, podemos ampliar la configuración, por ejemplo, para usar el prefijo automático, y no tenemos que preocuparnos por los prefijos de CSS para diferentes navegadores. La herramienta manejará eso por nosotros:

¡Ir!

Vamos a dominar usando variables, anidamientos y mixins. En realidad, la guía de cáscara de nuez (Sass en píldora), disponible aquí:
Será suficiente para comenzar a escribir códigos Sass de manera efectiva.
¿Aprender Sass puede durar 15 minutos? Aparentemente sí:
Artículos similares también aquí:
Yendo más allá, será bueno profundizar en la documentación completa:
¿Qué más? ¡Borbón!

Borbón

Desafortunadamente, no es un vaso de bourbon, eso sería bueno para los programadores a veces 😉
Se trata de http://bourbon.io , una biblioteca de Sass, que nos brinda funciones y funciones mixtas, por lo tanto, extras previos al desafío, que pueden ayudarnos y acelerar nuestros esfuerzos. Todo navegador cruzado por supuesto.
Vale la pena echarle un vistazo, ya que Bourbon puede haber implementado las cosas que necesitamos:
Bourbon no es la única solución de este tipo:
Sintaxis - .sass vs .scss
Ya hablamos de eso en uno de los artículos anteriores. Sass da dos variantes de la sintaxis. Bueno, hay varias preferencias, pero lo más básico es mantener la sintaxis elegida constantemente. Además de usar .scss en lugar de .sass, se recomienda en la guía de buenas prácticas :
Más sobre las diferencias :
Ver también :
Mixin vs marcador de posición? Una pequeña diferencia, que es bueno saber:
¿Más recursos? Awesome Sass es un conjunto muy bonito:
Nivel geek - lodash implementado en Sass:

Resumen

Sass es una herramienta poderosa cuando se trata de productividad, así como la comodidad de los programadores. Ciertamente vale la pena tomarse un momento para dominarlo, especialmente porque en realidad no tomará mucho tiempo. Los beneficios pueden ser grandes. Sass ahora!

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.