Question

我有两个不同的班级。一个是管理员，一个是用户。

<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;
}

我想做输入边框颜色动态。如果父类是admin，则输入边框颜色为白色，如果父类是用户，则输入边框颜色为黑色。

这只是一个例子，在我的项目中有两种类型的登录，并希望在使用父类时改变这么多东西。

Answer 1

您可以像这样嵌套这些类。 “＆amp;”表示如果父类是此（管理员或用户），则输入具有此border-color。对我来说，我可以说我会为admin然后input做我的css，如果有任何条件，如父母已经消失，修改input的外观，我会那些内部的人可以在一个地方为特定的id，class或direct tag。

.admin { 
  background : red; 
}

.user { 
  background : green; 
}

input {
  border-color: deepskyblue;

  .admin & {
    border-color: white;
  }

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

Answer 2

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

如何使用if语句在SCSS中查找类名？

2 个答案: