Si usted vuelve a leer esto que probablemente significa que usted está familiarizado con CSS y han oído hablar de la SECS o Sass, pero aún no han tomado la inmersión.,
Bien, buenas noticias. Sass va a hacer tu vida mucho mejor. Finalmente podrás secar (no te repitas) tu código en CSS.
básicamente, CSS carece de algunas grandes características que ayudarían a convertirlo en un más fácil de usar y leer. Sass agrega Variables, anidamiento, parciales, Mixins, extender / herencia y operadores. Algunas de estas son cosas que los lenguajes de programación tienden a tener., Si no sabes cuáles son algunos de ellos, está bien. Vamos a definir cada uno de estos y mostrar cómo se pueden utilizar.
un Sass se puede compilar en archivos CSS, lo que facilita la escritura de muchos archivos.
si está utilizando la aplicación create react, está de suerte porque la parte de procesamiento ya se ha encargado de usted. Si no, puede usar Grunt o Gulp para procesar sus archivos Sass/SCSS en CSS. Si aún no estás en un ambiente que ello sugiero poner la primera. Este artículo es para hablar sobre las características de Sass y cómo usarlos.,
¿Cuál es la diferencia entre Sass y SECS. Bueno, ambos pueden ser compilados en CSS. La verdadera diferencia está en la sintaxis. SCSS utiliza principalmente la misma sintaxis de CSS, mientras que Sass elimina las llaves y los puntos y comas. En ambos puede utilizar las características adicionales que proporciona Sass.
a continuación se muestran las diferencias sintácticas.
Si utiliza cualquier lenguaje de codificación, sabe qué es una variable. Así que no profundizaré demasiado en esto. Esencialmente, Sass finalmente le permite definir variables para que si decide cambiar un color, no tenga que cambiarlo 1000 veces., Puedes cambiar tu variable de color principal en un solo lugar y ya puedes ir
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
anidando
en CSS no puedes anidar. Echemos un vistazo a estos dos selectores. No hay nada terriblemente malo en esto. Pero estamos repitiendo el código.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
podemos anidar en Sass como así. Esto se ve mucho más limpio.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials son archivos SASS o Scss que tienen un subrayado en la parte delantera del nombre del archivo. Por ejemplo. «_prueba.scss». ¿Qué hace esto?, Denota que este archivo en particular no debe convertirse en CSS cuando llegue el momento. Estos archivos contendrán fragmentos de CSS que luego pueden ser importados por otros archivos SCSS.
Esta es una gran manera de modular su CSS y mantener las cosas más fáciles de mantener. Por ejemplo, es posible que desee almacenar variables que se utilizarán en varios archivos. Esta es la manera de hacerlo.
Mixins
los Mixins son interesantes porque agregan una característica similar al lenguaje de codificación. Reconocerás inmediatamente lo que quiero decir al ver el código:
en lugar de escribir «rotar(30deg)» 3 veces., Puedes crear lo que esencialmente se siente como una función y actúa como una. Pasa la propiedad al mixin transform ().
para usar esta pieza de código, debes usar la palabra clave» @include».
Más información si haces clic aquí.
Extend/Inheritance& Operadores
hablaré de estos en la Parte 2, ya que están un poco más involucrados. Estas son algunas de las características más útiles en SCSS así que por favor siga y voy a publicar este blog la próxima semana!
Por favor sígueme en Twitter @thedrewprint y encuéntrame en LinkedIn en Andrew Richards., Gracias por leer!