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