Mettre en pratique SASS/SCSS pour reproduire l’équivalent des classes bootstrap pour les marges (mr-0) et padding (pr-2) ainsi que pour les largeurs (l-50) et hauteurs (h-100).
Cet article est la suite de :
Reproduire les classes pour spécifier les largeurs et hauteurs
Reproduire ce marquage HTML : <div class="w-100"> avec des valeurs comprises entre 0 et 100 :
@for $i from 0 through 10 {
.w-#{$i * 10} {
width: #{$i * 10%};
}
.h-#{$i * 10} {
height: #{$i * 10%};
}
}
Ce qui génèrera le code CSS suivant :
.w-0{width:0%}
.h-0{height:0%}
.w-10{width:10%}
.h-10{height:10%}
.w-20{width:20%}
.h-20{height:20%}
.w-30{width:30%}
.h-30{height:30%}
.w-40{width:40%}
.h-40{height:40%}
.w-50{width:50%}
.h-50{height:50%}
.w-60{width:60%}
.h-60{height:60%}
.w-70{width:70%}
.h-70{height:70%}
.w-80{width:80%}
.h-80{height:80%}
.w-90{width:90%}
.h-90{height:90%}
.w-100{width:100%}
.h-100{height:100%}
Reproduire le système de marges intérieures et extérieures
Refaire le système de classes pour les marges : <div class="mx-2 mt-1 pb-5"> ; l’utilisation de 2 tableaux permet d’ajouter facilement le même système pour les bordures ou pour de nouvelles tailles :
$pms: (
p:'padding',
m:'margin',
);
$sizes: (
0: 0,
1: 0.5rem,
2: 0.75rem,
3: 1rem,
4: 1.5rem,
);
@each $abbrev, $pm in $pms {
@each $i, $size in $sizes {
.#{$abbrev}y-#{$i},
.#{$abbrev}t-#{$i} {
#{$pm}-top: $size;
}
.#{$abbrev}x-#{$i},
.#{$abbrev}r-#{$i} {
#{$pm}-right: $size;
}
.#{$abbrev}y-#{$i},
.#{$abbrev}b-#{$i} {
#{$pm}-bottom: $size;
}
.#{$abbrev}x-#{$i},
.#{$abbrev}l-#{$i} {
#{$pm}-left: $size;
}
}
}
Ce qui génèrera le code CSS suivant :
.py-0,.pt-0{padding-top:0}
.px-0,.pr-0{padding-right:0}
.py-0,.pb-0{padding-bottom:0}
.px-0,.pl-0{padding-left:0}
.py-1,.pt-1{padding-top:.5rem}
.px-1,.pr-1{padding-right:.5rem}
.py-1,.pb-1{padding-bottom:.5rem}
.px-1,.pl-1{padding-left:.5rem}
.py-2,.pt-2{padding-top:.75rem}
.px-2,.pr-2{padding-right:.75rem}
.py-2,.pb-2{padding-bottom:.75rem}
.px-2,.pl-2{padding-left:.75rem}
.py-3,.pt-3{padding-top:1rem}
.px-3,.pr-3{padding-right:1rem}
.py-3,.pb-3{padding-bottom:1rem}
.px-3,.pl-3{padding-left:1rem}
.py-4,.pt-4{padding-top:1.5rem}
.px-4,.pr-4{padding-right:1.5rem}
.py-4,.pb-4{padding-bottom:1.5rem}
.px-4,.pl-4{padding-left:1.5rem}
.my-0,.mt-0{margin-top:0}
.mx-0,.mr-0{margin-right:0}
.my-0,.mb-0{margin-bottom:0}
.mx-0,.ml-0{margin-left:0}
.my-1,.mt-1{margin-top:.5rem}
.mx-1,.mr-1{margin-right:.5rem}
.my-1,.mb-1{margin-bottom:.5rem}
.mx-1,.ml-1{margin-left:.5rem}
.my-2,.mt-2{margin-top:.75rem}
.mx-2,.mr-2{margin-right:.75rem}
.my-2,.mb-2{margin-bottom:.75rem}
.mx-2,.ml-2{margin-left:.75rem}
.my-3,.mt-3{margin-top:1rem}
.mx-3,.mr-3{margin-right:1rem}
.my-3,.mb-3{margin-bottom:1rem}
.mx-3,.ml-3{margin-left:1rem}
.my-4,.mt-4{margin-top:1.5rem}
.mx-4,.mr-4{margin-right:1.5rem}
.my-4,.mb-4{margin-bottom:1.5rem}
.mx-4,.ml-4{margin-left:1.5rem}