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