小编e.s*_*ell的帖子

我正在尝试使用我使用的样式

input:not([type=checkbox]),
input:not([type=radio]){ ...

但显然这是行不通的.我如何使用我为所有输入编写的样式而只是这两个？

我希望利用SASS规则(@mixin,@ extend等)和/或控制指令(@ if,@ for,@each等)为我定义的颜色变量生成类.

下面是我目前使用的一个示例,但我知道我可以进一步简化这一点,以减少冗余.

// Colors
$navy: #37455a;
$blue: #abbdd3;
$cyan: #a3d9cb;
$peach: #ff9d7a;

// Backgrounds
.bg-navy{
  background: $navy;
}

.bg-blue{
  background: $blue;
}

.bg-cyan{
  background: $cyan;
}

.bg-peach{
  background: $peach;
}

// Text
.text-navy{
  color: $navy;
}

.text-blue{
  color: $blue;
}

.text-cyan{
  color: $cyan;
}

.text-peach{
  color: $peach;
}

我尝试了一些不同的方法,但我总是遇到映射冲突.我想保留对象中的映射变量,以便在这些函数之外使用.这是我到目前为止所提出的:

// Colors for use in other partials
$navy: #37455a;
$blue: #abbdd3;
$cyan: #a3d9cb;
$peach: #ff9d7a;

// Mapped colors used for generating classes (Duplicated unfortunately)
$colors: (
  $navy: #37455a; …