Guest User

Untitled

a guest
Nov 15th, 2018
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.89 KB | None | 0 0
  1. $_name: null !global;
  2. $_value: null !global;
  3.  
  4. // Custom loop to apply the name and value
  5. @mixin _loop( $list, $responsive: true ) {
  6. @each $name, $value in $list {
  7. $_name: $name !global;
  8. $_value: $value !global;
  9.  
  10. @content;
  11.  
  12. $_name: null !global;
  13. $_value: null !global;
  14. }
  15. }
  16.  
  17.  
  18. // USE CASE
  19.  
  20. // You have variable for Padding classes, each item will become 5 classes covering all directions:
  21. // p-x, pt-x, pr-x, pb-x, pl-x
  22.  
  23. $padding-classes: (
  24. 05: 0.5rem,
  25. 1: 1rem,
  26. 15: 1.5rem,
  27. 2: 2rem,
  28. ) !default;
  29.  
  30. @include _loop( $padding-classes ) {
  31. .p-#{ $_name } {
  32. padding: $_value;
  33. }
  34.  
  35. .pt-#{ $_name } {
  36. padding-top: $_value;
  37. }
  38.  
  39. .pr-#{ $_name } {
  40. padding-right: $_value;
  41. }
  42.  
  43. .pb-#{ $_name } {
  44. padding-bottom: $_value;
  45. }
  46.  
  47. .pl-#{ $_name } {
  48. padding-left: $_value;
  49. }
  50. }
  51.  
  52. // 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