Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :root variables and SASS Functions

Tags:

css

sass

in the Header of my HTML-Page i set the following CSS Variables:

:root{ 
  --data-color-primary: #ffcc00; 
  --data-color-secondary: #4b4b4b; 
}

In my SASS-File i use it as follow:

DIV.color {

   &.color-primary {
     background-color: var(--data-color-primary);
   }
   &.color-secondary {
     background-color: var(--data-color-secondary);
   }
}

Now i try to set the font-color depending on the brightness of the background-color:

@function set-notification-text-color($color) {
  @if (lightness($color) > 60) {
     @return #000000;
  } @else {
     @return #ffffff;
  }
}

DIV.color{
   &.color-primary {
      background-color: var(--data-color-primary);
      color: set-notification-text-color(var(--data-color-primary));
   }
}

But in my SASS-compliler i get the following i get the following Error:

Error: argument $color of lightness($color) must be a color

How is ist possible to hand over der CSS variable to the function.


My Problem is, the CSS Variables are set in the Backend of my CMS by User (Liferay 7) an will be rendered in a *.FTL-File and is printed in the HTML-Code.

$primary: ${clr_primary};
$secondary: ${clr_primary};

and then i cant use the SASS-Variable $primary in my SASS-File.

like image 644
hydrococcus Avatar asked Oct 02 '18 07:10

hydrococcus


2 Answers

Use SASS variables in your CSS variables.

$primary: #ffcc00;
$secondary: #4b4b4b;

:root{ 
  --data-color-primary: #{$primary};
  --data-color-secondary: #{$secondary};
}

Now call your mixin

DIV.color{
   &.color-primary {
      background-color: $primary;
      color: set-notification-text-color($primary);
   }
}

Another options would be to create a mixin which retrieves the CSS variable

@function color($color-name) {
  @return var(--data-color-#{$color-name});
}

Now call that function like so

DIV.color {
   &.color-primary {
      background-color: color(primary);
      color: set-notification-text-color(color(primary));
   }
}

Check out this link for usefull information about combining CSS and SASS variables

https://codepen.io/jakealbaugh/post/css4-variables-and-sass

like image 106
Red Avatar answered Nov 02 '22 03:11

Red


If you need to change CSS variables outside of :root you can do the following

.class {
  // sass-lint:disable no-duplicate-properties
  #{--background}: transparent;      
  #{--background-focused}: transparent;
  // sass-lint:enable no-duplicate-properties
}

and this compiles to

.class {
  --background: transparent;      
  --background-focused: transparent;
}
like image 26
Guest Avatar answered Nov 02 '22 03:11

Guest