Question

有没有办法在Sass函数中使用CSS变量，例如减轻？像这样：

:root {
  --color: #ff00ff;
}

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

我收到一条错误消息“$color的{{1}}必须是一种颜色”。

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

Answer 1

您可以使用CSS Colorvars (csscolorvars.github.io)，并且将获得亮度和透明度的功能，以便能够在颜色变量中应用亮度，暗度和透明度。

class TestClass: NSObject {
    static let shared = TestClass()
    private override init() {
        super.init()
    }
    var status: Bool {
        get {
            return UserDefaults.standard.bool(forKey: "Status")
        }
        set {
            UserDefaults.standard.set(newValue, forKey: "Status")
        }
    }
}

CSS Colorvars的链接：https://csscolorvars.github.io/

任何问题都在以下位置发表评论：https://github.com/CSSColorVars/csscolorvars/issues

Answer 2

UPDATE:

I just read that Sass 3.5.0 now should support CSS Custom Properties with native CSS functions. I tried this with node-sass but as yet libsass doesn't support this feature of Ruby Sass 3.5

For native CSS functions I think sass replaces them with its own implementation, as I had to use string interpolation in Sass to get my css to compile:

event.preventDefault()

For Sass functions, the closest thing I came up with pure CSS for lightness (won't work with IE, obviously), is to separate the colour values into hue, saturation and lightness to use inside hsl(). This could also be used with rgba(), but hsl() can be used to control shades more easily for the theme of the application:

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

Then the shades for active, hover, accents etc. can use an altered lightness by using calc to calculate a percentage of the original lightness:

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

This could go the other way to lighten also, but this won't work for every scenario. It's also pretty messy and you end up with a bit of pollution in the variable scope.

Answer 3

CSS变量为not supported in IE。

此外，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>

使用CSS变量作为Sass函数参数

3 个答案:

仅供参考