SHARE
TWEET

Untitled

a guest Jan 23rd, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ----
  2. // libsass (v3.5.4)
  3. // ----
  4.  
  5. // ----
  6. // Receives a list of names contrasts to set.
  7. // @examples $contrasts: 'default', 'contrast-white', 'constrast-black'
  8. // ----
  9. $contrasts: 'default', 'contrast-white', 'contrast-black';
  10.  
  11. // ----
  12. // Receives a map of colors contained a map color with contrasts names to set colors.
  13. // ----
  14. $colors: (
  15.   'primary': (
  16.     'default': red,
  17.     'contrast-white': white,
  18.     'contrast-black': black
  19.   ),
  20.   'secondary': (
  21.     'default': green,
  22.     'contrast-white': purple,
  23.     'contrast-black': gray
  24.   )
  25. );
  26.  
  27. @function get-color($color, $contrast: 'default') {
  28.   $setColor: map-get(map-get($colors, $color),$contrast);
  29.   @if $setColor {
  30.     @return $setColor;
  31.   } @else {
  32.     // Libsass still doesn't seem to support @error
  33.     @warn "=> ERROR: COLOR NOT FOUND! <= | Your $color-name, $contrast combination did not match any of the values in the $colors map.";
  34.   }
  35. };
  36.  
  37. @mixin set-contrast($color-name) {
  38.   @for $i from 1 through length($contrasts){
  39.     $contrast: nth($contrasts, $i);
  40.     $color: get-color($color-name, $contrast) !global;
  41.    
  42.     @if($contrast == 'default'){
  43.       @content;
  44.     } @else {
  45.       .#{$contrast} & {
  46.         @content;
  47.       }
  48.     }
  49.   }
  50. }
  51.  
  52. // ----
  53. // Example Implementation
  54. // ----
  55. .app-header{
  56.   display: flex;
  57.   color: get-color('primary');
  58.   @include set-contrast('secondary'){
  59.     border: 1px solid $color;
  60.   }
  61.   @include set-contrast('primary'){
  62.     background: $color;
  63.   }
  64. }
  65.  
  66. // ----
  67. // Example output css
  68. // ----
  69. .app-header {
  70.   display: flex;
  71.   color: red;
  72.   border: 1px solid green;
  73.   background: red;
  74. }
  75.  
  76. .contrast-white .app-header {
  77.   border: 1px solid purple;
  78. }
  79.  
  80. .contrast-black .app-header {
  81.   border: 1px solid gray;
  82. }
  83.  
  84. .contrast-white .app-header {
  85.   background: white;
  86. }
  87.  
  88. .contrast-black .app-header {
  89.   background: black;
  90. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top