我在根目录中定义了一个颜色:
:root {
--purple: hsl(266, 35%, 70%);
}
我正在尝试在SASS函数中使用它来赋予透明度:
.purple {
background: transparentize(#{"var(--primary-color)"}, 0.7)
}
有人知道如何让这个工作吗?还是不可能的?
我在根目录中定义了一个颜色:
:root {
--purple: hsl(266, 35%, 70%);
}
我正在尝试在SASS函数中使用它来赋予透明度:
.purple {
background: transparentize(#{"var(--primary-color)"}, 0.7)
}
有人知道如何让这个工作吗?还是不可能的?
全局变量可以在 :root 伪类中的元素之外定义:
:root {
--color-primary: #FFFFFF;
}
你可以像这样定义一个函数:
@function color($color-name) {
@return var(--color-#{$color-name});
}
并将其引入到您的Sass中:
body {
color: color(primary);
}
编译后的Sass代码如下:
body {
color: var(--color-primary);
}
transparentize()
函数期望一个十六进制代码作为输入。而当前这个函数输出的是一个无效的var()
字符串。 - RZKY#{var(--variablename)}
以下是如何在SCSS中使用CSS变量的方法
transparentize(#{var(--someColor)}, 0.7)
不会起作用(因为评论和其他答案中提到的原因)。 - Romalex@mixin define-color($title, $color) {
--#{$title}-h: #{hue($color)};
--#{$title}-l: #{lightness($color)};
--#{$title}-s: #{saturation($color)};
--#{$title}-a: #{alpha($color)};
}
@function color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
@return hsla(
calc(var(--#{$title}-h) + #{$hue}),
calc(var(--#{$title}-s) + #{$saturation}),
calc(var(--#{$title}-l) + #{$lightness}),
calc(var(--#{$title}-a) + #{$alpha}),
);
}
现在,我们准备定义一些颜色变量...
:root {
@include define-color("primary", #696969);
@include define-color("secondary", blue);
}
使用并调整它们!
.example-class {
color: color("primary");
background: color("secondary", $lightness: +20%, $alpha: -0.3);
border: 1px solid color("primary", $hue: -30deg, $saturation: 5%);
}
类似于Romalex的答案,这篇文章中有一个优雅的解决方案:如何使用Sass Mixins和CSS变量
您可以使用RGB三元数列表定义您的颜色变量,然后可以使用Sass transparentize和其他颜色函数进行操作。
:root {
--color-primary: #16498a;
--color-primary-rgb: 22, 73, 138;
}
h1 {
color: var(--color-primary);
}
h2 {
color: rgba(var(--color-primary-rgb), 0.4);
}
您可以编写自己的Sass函数来处理变量的倍增,就像以下示例中的方式。
本文中有一个示例:
示例用法:
:root {
@include defineColorHSL(--color-primary, 220, 90%, 56%);
}
.component {
color: alpha(var(--color-primary), 0.2); // it works
}
所需资源:
// return css color variable with different opacity value
@function alpha($color, $opacity){
$color: str-replace($color, 'var(');
$color: str-replace($color, ')');
$color-h: var(#{$color+'-h'});
$color-s: var(#{$color+'-s'});
$color-l: var(#{$color+'-l'});
@return hsla($color-h, $color-s, $color-l, $opacity);
}
// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin defineColorHSL($color, $hue, $saturation, $lightness){
#{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
}
SASS转译是首先执行的,因此最好先设置SASS变量,然后再将其与--css_variables连接起来。
为了实现这一点,您需要像以下示例中使用@use "sass:meta";
:
@use "sass:meta";
//sass variable
$primarySassVariable: #4252af;
//css variable
:root {
--primary: #{meta.inspect($primarySassVariable)};
}
transparentize
函数中使用变量。现在它可能有效,因为它只是一个 SCSS 变量?但最好将其放入答案中。但是,如果从 SCSS 设置 CSS 变量对于人们来说是一种选项,那么这似乎可以避免转换变量的所有需要。 - Flion我意识到这并不完全是原问题所问的,但当我尝试使用SASS变量来定义CSS变量时,我遇到了类似的问题。根据最初的研究,我尝试了transparentize(#{$purple}, 0.7)
,但失败了。相反,需要用#{ }
将函数括起来:
$purple: #abc123;
:root {
--purple: #{transparentize($purple, 0.7)};
}
想分享一下,因为我还没有找到使用函数和SASS变量定义CSS变量的示例。一度以为不可能,但是我误解了问题。
function hexToHsl($hex) {
$hex = str_split(ltrim($hex, '#'), 2);
// convert the rgb values to the range 0-1
$rgb = array_map(function($part) {
return hexdec($part) / 255;
}, $hex);
// find the minimum and maximum values of r, g and b
$min = min($rgb);
$max = max($rgb);
// calculate the luminace value by adding the max and min values and divide by 2
$l = ($min + $max) / 2;
if ($max === $min) {
$h = $s = 0;
} else {
if ($l < 0.5) {
$s = ($max - $min) / ($max + $min);
} elseif ($l > 0.5) {
$s = ($max - $min) / (2 - $max - $min);
}
if ($max === $rgb[0]) {
$h = ($rgb[1]- $rgb[2]) / ($max -$min);
} elseif ($max === $rgb[1]) {
$h = 2 + ($rgb[2]- $rgb[0]) / ($max -$min);
} elseif ($max === $rgb[2]) {
$h = 4 + ($rgb[0]- $rgb[1]) / ($max -$min);
}
$h = $h * 60;
if ($h < 0) {
$h = $h + 360;
}
}
return array($h, $s*100, $l*100);
}
它将接收十六进制颜色代码,例如#cc66cc,并返回一个包含H、S和L三个值的数组。
$color_main_hsl = hexToHsl($color_main);
$color_main_h = $color_main_hsl[0];
$color_main_s = $color_main_hsl[1] . '%';
$color_main_l = $color_main_hsl[2] . '%';
然后将其赋值给变量CSS。
<style>
:root {
--color_1: <?php echo $color_main; ?>;
--color_1_h: <?php echo $color_main_h; ?>;
--color_1_s: <?php echo $color_main_s; ?>;
--color_1_l: <?php echo $color_main_l; ?>;
}
</style>
然后我在SASS中创建了两个函数,一个用于加深颜色,另一个用于减淡颜色:
// hsl css variable darken
@function hsl_d($color_num, $percentage) {
$color_h: var(--color_#{$color_num}_h);
$color_s: var(--color_#{$color_num}_s);
$color_l: var(--color_#{$color_num}_l);
@return hsl($color_h, $color_s, calc(#{$color_l} - #{$percentage}#{'%'}));
}
// hsl css variable lighten
@function hsl_l($color_num, $percentage) {
$color_h: var(--color_#{$color_num}_h);
$color_s: var(--color_#{$color_num}_s);
$color_l: var(--color_#{$color_num}_l);
@return hsl($color_h, $color_s, calc(#{$color_l} + #{$percentage}#{'%'}));
}
最后我使用了我的Sass函数:
.element-to-dark {
background-color: hsl_d(1, 12);
}
.element-to-light {
background-color: hsl_d(1, 22);
}
数字“1”是因为我的变量被称为--color_1、--color_1_h、--color_1_s、--color_1_l,而我的函数会插值这个数字。第二个参数是用于调整亮度或加深的百分比。
希望我有所贡献 :)