Ahorre tiempo utilizando SASS para crear clases con variaciones

La semana pasada tuve un problema, necesitaba definir una clase en HTML que me diera el margen de acuerdo al 煤ltimo car谩cter. Quer铆a una clase que fuera margin-top-1, o bottom, o left or right y el 煤ltimo n煤mero fuera de 1 a 5 rem. Ya estaba usando SCSS pero no sab铆a c贸mo hacerlo.Dios sabe que busqu茅 una respuesta, pero a煤n as铆 no pude encontrar la forma de hacerlo. Tal vez la busqu茅 en Google, pero ahora s茅 la respuesta, y no estaba limitado al margen. Ahora la uso en todas partes. Necesitamos crear una clase con diferentes variaciones para poder usarlas en HTML. Aunque SCSS puede ahorrarnos mucho trabajo, sigue siendo repetitivo, sigue siendo aburrido. A veces la mejor manera de evitar tareas repetitivas es haciendo una funci贸n repetitiva. Supongamos que quiere definir el margen de la clase-(n煤mero) y el n煤mero ser铆a el valor in rem. Algo como esto:

.margin-1{
margen:1rem;
Bueno, si s贸lo quer铆as definir .margin-1 no hay necesidad de hacer un bucle. Puedes simplemente escribirlo as铆 pero, digamos por el bien de este art铆culo que te gustar铆a definir el margen hasta el 100rem. Esa es la belleza de SAAS. puedes definir un punto de partida, un punto final y una @ para que la directiva itere a trav茅s de los n煤meros. entonces, veamos c贸mo se ve! Y eso es todo. despu茅s de compilarlo, es como si hubieses escrito 300 + l铆neas de c贸digo. Y eso es todo. despu茅s de compilarlo, es como si hubieses escrito 300 + l铆neas de c贸digo.No publicaremos el CSS completo aqu铆 porque es demasiado grande, pero te da la idea si no abres tu editor de texto y lo pruebas t煤 mismo.y ahora puedes usar la clase margin en tu HTML como quieras. Pero 驴qu茅 pasa si quiero definir la parte superior o inferior o cualquier otra? bueno, en ese caso, deber铆as definir las variables, y crear otras clases. Pero al final es lo mismo que hemos hecho antes. Aqu铆 tienes, con aproximadamente 30 l铆neas de c贸digo, has compilado un archivo CSS con m谩s de 2000 l铆neas, y las posibilidades son infinitas, puedes usarlo con casi todos los atributos, ancho, alto, lo que quieras, divi茅rtete!

Etiquetas

SassHtmlCssCodingProgrammingDesarrollo de software

Comentarios

arthur.tkachenko29 de Agosto de 2019

Un ejemplo perfecto de por qu茅 SASS es lo mejor!

Creo que tambi茅n ser谩 genial tener un ejemplo, cuando creas un bucle con diferentes pasos.

Ahora mismo tienes +1, pero a veces necesitar谩s menos clases, con paso +5, +10, etc....

Contin煤e la discusi贸n