CODEWITHSUNDEEP
htmlcssif-statementsassscss-mixins
smartsense-designer
smartsense-designer

Reputation: 21

How to find class name in SCSS using if statement?

I have two different classes. one is admin and one is user. 

<div class="admin"> ... </div>
<div class="user"> ... </div>

$color : red !default;

@if('.admin'){
    $color : red;
} @else {
    $color : green;
}

input{
    border-color : $color;
    color : $color;
}

div{
    background : $color;
}

I want to do input border color dynamic. If parent class is admin than input border color is white and if parent class is user than input border color is black.

This is just an example, in my project two types of login and want to change so many things on using parent class.

Upvotes: 1

Views: 5590

Answers (2)

Dejan.S
Dejan.S

Reputation: 19128

You can nest those classes like this. The "&" means if the parent class is this (admin or user), let input have this border-color. For me I, lets say I'll do my css for admin and then input, if there is any conditions like if a parent is gone modify the appearance of the input, I nest those inside to have it all in one place for that particular id, class or direct tag.

.admin { 
  background : red; 
}

.user { 
  background : green; 
}

input {
  border-color: deepskyblue;

  .admin & {
    border-color: white;
  }

  .user & {
    border-color: black;
  }
}

Upvotes: 1

Sandeep
Sandeep

Reputation: 21

.admin{ 
    background : red; 
    input{
        border-color:#fff;
    }
}
.user{ 
    background : red; 
    input{
        border-color:#000;
    }
}

Upvotes: 1

Related Questions