Как найти имя класса в SCSS используя оператор if? - PullRequest
0 голосов
/ 11 июня 2018

У меня есть два разных класса.один - admin , а другой - 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;
}

Я хочу сделать цвет рамки ввода динамическим.Если родительский класс является администратором, тогда цвет входной границы - белый, а родительский класс - пользовательский, а цвет входной границы - черный.

Это всего лишь пример, в моем проекте два типа входа в систему, и я хочу изменить так много вещей.по использованию родительского класса.

Ответы [ 2 ]

0 голосов
/ 11 июня 2018
.admin{ 
    background : red; 
    input{
        border-color:#fff;
    }
}
.user{ 
    background : red; 
    input{
        border-color:#000;
    }
}
0 голосов
/ 11 июня 2018

Вы можете вложить эти классы, как это.«&» Означает, что если родительский класс это (администратор или пользователь), пусть input имеет это border-colorДля меня я, скажем, я сделаю свой CSS для admin, а затем input, если есть какие-либо условия, такие как, если родитель ушел, изменить внешний вид input, я вкладываю их внутрь, чтобы иметь всев одном месте для этого конкретного идентификатора, класса или прямого тега.

.admin { 
  background : red; 
}

.user { 
  background : green; 
}

input {
  border-color: deepskyblue;

  .admin & {
    border-color: white;
  }

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