shospodarets / css-vars Goto Github PK

Been dealing with SASS and it's lack of support for :root and came across this awesome library; So far I'm really digging it, but ran into a few other intrinsic limitations with the .sass syntax...

Namely: sass/sass#1088

Through that thread I found a user comment (sass/sass#1088 (comment)) which mentioned the map-merge method which solves this issue nicely.

@import "[%PATH%]/css-vars/css-vars";

$rootvars: ()

$rootvars: map-merge($rootvars, ( '--sidebar-width': $sidebar-width ))
$rootvars: map-merge($rootvars, ( '--topnav-height': $topnav-height ))
$rootvars: map-merge($rootvars, ( '-moz-tab-size': 4 ))
$rootvars: map-merge($rootvars, ( 'tab-size': 4 ))

@include css-vars($rootvars)

This yields the cleanest way to manage the syntax for .sass files and thought this might help other people in a similar situation.

Hi, thanks for this lib.

I was wondering if there is a way to use native vars with fallback to non-native attribute.

So let's say this

@include css-vars((
        --main-color: #000,
));

body {
       color: var(--main-color);
}

Will compile to this

body {
color: #000,
color: var(--main-color);
}

And if the browser will support css properties it will use the second value from variable, but if not it will fall-back to first condition.

Thanks

Hi, I just read the post on Smashing Magazine and want to give this a try. Here's the issue I met.

  .cell__subtitle {
    @include css-vars(( --margin-left: r(1) ));
    display    : inline-block;
    margin-left: var(--margin-left);
    font-size  : 12px;
    @include susy($tablet) {
      display: block;
      @include css-vars(( --margin-left: 0 ));
    }
  }

The margin-left: 0 didn't show in browser inspector, but when using this in native way, it worked.

I'm just trying to understand why I would even continue to use sass variables at all when it seems like native css variables are advantageous and supported...

Should I be able to do something like this?

@include css-var ((
    --primary: black;
     ....
));

$primary:  var(--primary);

because right now it looks like I can't do things like.

background-color: fade-out(var(--primary), 0.2);