Question 43681 in Html Question posted in
Some basic documentation can be found here.

How to set SCSS Variable by selector – Html

I try to set different background color to namespaces, for that I use css variables and classes like this

CSS

body.workspace {
  $backgroundColor: #f1f4fa !default;
  &.admin {
    $backgroundColor: #e4daec;
  }
}

HTML

<body class="workspace #{namespace}">
  ...
</body>

And namespace is set to admin if needed

But $backgroundColor is all the time set to #e4daec independently of the class is admin or not

Maybe I have to use 2 différents variables ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yes but, I use to use my background variable in many different Classes so the best way is to set like this ?

    body.workspace{
  &.admin2 {
    .wrapper{
      background-color: $backgroundColorAdmin;
    }
    #sidebar{
      background-color: $backgroundColorAdmin;
    }
    #main-navbar{
      background-color: $backgroundColorAdmin;
    }
   ...
   ...
  }

    In fact, it works well


  2. 0

    You have at least two options. You can use two different varibles:

    $backgroundColor_one: #f1f4fa;
$backgroundColor_two: #e4daec;

body.workspace {
  background-color: $backgroundColor_one;

  &.admin {
    background-color: $backgroundColor_two;
  }
}

    or you can use a @mixin with if statement something like this:

    @mixin backgroundColor($val){
    @if $val == one {
      color: #f1f4fa;
    }
    @else if $val == two{
      color: #e4daec;
    }
  }

body.workspace {
   @include backgroundColor(one);
   
   &.admin{
     @include backgroundColor(two);
  }
}

    if body element has only workspace class like this:

    <body class="workspace"></body>

    The bg color should be #f1f4fa. But if tag has two classes like this:

    <body class="workspace admin"></body>

    The bg color should be #e4daec

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search