20

有没有办法将 CSS 变量与 Sass 函数一起使用，例如 lighten？像这样的东西：

:root {
  --color: #ff00ff;
}

.div {
  background-color: lighten(var(--color), 32%);
}

我收到一条错误消息，“Argument $colorof lighten($color, $amount)must be a color”。

我正在使用 CSS（不是 Sass）变量，因为我需要在 js 中使用它们。

4

2 回答 2

3

更新：

我刚刚读到 Sass 3.5.0 现在应该支持带有原生 CSS 函数的 CSS 自定义属性。我用 node-sass 试过这个，但 libsass 还不支持 Ruby Sass 3.5 的这个特性

对于原生 CSS 函数，我认为 sass 会用自己的实现替换它们，因为我必须在 Sass 中使用字符串插值来编译我的 css：

--Primary: #{"hsl(var(--P-h), var(--P-s), var(--P-l))"};

对于 Sass 函数，我想出的最接近亮度的纯 CSS（显然不适用于 IE）是将颜色值分离为色调、饱和度和亮度，以便在 hsl() 中使用。这也可以与 rgba() 一起使用，但 hsl() 可用于更轻松地控制应用程序主题的阴影：

:root {
    --P-h: 203;
    --P-s: 82%;
    --P-l: 41%;
    --Primary: hsl(var(--P-h), var(--P-s), var(--P-l));
}

然后，活动、悬停、重音等的阴影可以通过使用 calc 计算原始亮度的百分比来使用改变的亮度：

:root {
    --Primary-20: hsl(var(--P-h), var(--P-s), calc(var(--P-l) * 0.8));
}

这也可以以另一种方式减轻，但这不适用于每种情况。它也很混乱，最终会在变量范围内造成一些污染。

于 2017-12-18T08:17:00.877 回答
-3

IE不支持CSS 变量。

此外，lighten它是 CSS预处理器的一个功能，所以如果你以未编译的形式将它添加到 CSS 中，它只会破坏你的代码，因为 CSS 不知道它是什么

我建议pseudo-elements

看这个例子

div>div {
  height: 150px;
  width: 150px;
  margin: .5em auto;
  display: inline-block;
}

.red {
  background-color: red
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

.lighten,
.darken {
  position: relative;
}

.lighten::after,
.darken:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lighten::after {
  background-color: rgba(255, 255, 255, .4);
}

.darken::after {
  background-color: rgba(0, 0, 0, .4);
}
<div>
  <div class="red lighten"></div>
  <div class="red"></div>
  <div class="red darken"></div>
</div>

<div>
  <div class="blue lighten"></div>
  <div class="blue"></div>
  <div class="blue darken"></div>
</div>

<div>
  <div class="green lighten"></div>
  <div class="green"></div>
  <div class="green darken"></div>
</div>

仅供参考

由于您已经提到这是针对 JS 的，因此可能有更有效的方法来执行此操作。

例如......这个来自CSS-Trick 的例子

使用总结：

// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20); 


$.cssHooks.backgroundColor = {
  get: function(elem) {
    if (elem.currentStyle) var bg = elem.currentStyle["backgroundColor"];
    else if (window.getComputedStyle) var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");
    if (bg.search("rgb") == -1) return bg;
    else {
      bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

      function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
      }
      return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
    }
  }
}

function LightenDarkenColor(col, amt) {
  var usePound = false;
  if (col[0] == "#") {
    col = col.slice(1);
    usePound = true;
  }
  var num = parseInt(col, 16);
  var r = (num >> 16) + amt;
  if (r > 255) r = 255;
  else if (r < 0) r = 0;
  var b = ((num >> 8) & 0x00FF) + amt;
  if (b > 255) b = 255;
  else if (b < 0) b = 0;
  var g = (num & 0x0000FF) + amt;
  if (g > 255) g = 255;
  else if (g < 0) g = 0;
  return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}
$("div > div:first-child").each(function() {
  var randColor = '#' + '0123456789abcdef'.split('').map(function(v, i, a) {
    return i > 5 ? null : a[Math.floor(Math.random() * 16)]
  }).join('');
  $(this).css("background", randColor);
});
$("body > div").each(function(i, el) {
  var interval = 0;
  var masterColor = $(el).find("div:first-child").css("background-color");
  $(el).find("div").each(function(i, el) {
    var adjustedColor = LightenDarkenColor(masterColor, interval);
    $(el).css("background-color", adjustedColor);
    interval += 20;
  });
});
body>div {
  width: 10%;
  float: left;
}

body>div>div {
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

于 2017-08-04T00:30:54.197 回答