Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $_name: null !global;
- $_value: null !global;
- // Custom loop to apply the name and value
- @mixin _loop( $list, $responsive: true ) {
- @each $name, $value in $list {
- $_name: $name !global;
- $_value: $value !global;
- @content;
- $_name: null !global;
- $_value: null !global;
- }
- }
- // USE CASE
- // You have variable for Padding classes, each item will become 5 classes covering all directions:
- // p-x, pt-x, pr-x, pb-x, pl-x
- $padding-classes: (
- 05: 0.5rem,
- 1: 1rem,
- 15: 1.5rem,
- 2: 2rem,
- ) !default;
- @include _loop( $padding-classes ) {
- .p-#{ $_name } {
- padding: $_value;
- }
- .pt-#{ $_name } {
- padding-top: $_value;
- }
- .pr-#{ $_name } {
- padding-right: $_value;
- }
- .pb-#{ $_name } {
- padding-bottom: $_value;
- }
- .pl-#{ $_name } {
- padding-left: $_value;
- }
- }
- // The loop above will generate p-05, pt-05, pr-05, pb-05, pl-05, p-1, pt-1, and so on
Add Comment
Please, Sign In to add comment