illgio illgio - 3 months ago 12
Sass (Sass) Question

In Sass how can I set a variable to the if statement I created?

Below is the function I'm using:

@function set-hover-color($color) {
@if true {
@return darken($color, 10%);
} @else {
@return lighten($color, 10%)
}
}


I would to be able to set it to true of false like below:

$color: false;

Answer

This may be what you're looking for. Note: I renamed the color var to "darken" as i think it makes more sense in this case

$darken : true;

@function set-hover-color($color) {
  @if $darken {
     @return darken($color, 10%);
  } @else {
     @return lighten($color, 10%)
  }
};

Another option could be to pass in that variable as a second argument. eg:

@function set-hover-color($color,$darken) {
  @if $darken {
     @return darken($color, 10%);
  } @else {
     @return lighten($color, 10%)
  }
};

Usage :

$color : #ddd;

#example{

   color : $color,

   &:hover{

     color : set-hover-color($color,true);
   }
}
Comments