background: $rgbaColor; 能显示。 background: rgba($rgbaColor,.6); 就报错为什么呢？

赋代码：

$color: #f36; //是为了方便修改 color的色值，就能整个改变效果。

.body {

@if red($color) > 50 {

color: #fff;

}

@else if red($color) < 50 {

color:#000;

}

$rgbaColor: unquote('#'+red($color));

.div {

color: red($color) ;

color: $rgbaColor;

background: $rgbaColor;

background: rgba(#255,.6);

background: rgba($rgbaColor,.6);

}

$rgbaColor 在文中已经被转化为了 #255

background: rgba(#255,.6); 都能够正常解析

但 background: rgba($rgbaColor,.6); 不就等价于 background: rgba(#255,.6); 吗，为什么不能正常解析呢。

解释下：我$color: #f36; 这样子在外层定义，是为了方便修改 color的色值，就能整个改变效果。

weibo_朱宁博4097020

2016-12-27

源自：Sass进阶篇 4-3

关注问题我要回答

2493

操作

收起

3 回答

冥oo冥回答被采纳 +3 积分
2017-02-07

感觉应该是

$color: #f36;//这儿定义的是颜色值

$rgbaColor:red($color);//这儿定义的是字符串

0 回复有任何疑惑可以回复我~

收起回答

weibo_朱宁博4097020 提问者

我也怀疑过和这个变量类型有关系但是不确定自己也不是特别理解。因为之前我尝试过： background: rgba($color,.6); 也是能输出的。谢谢你的热情帮助，嘿嘿

2017-02-07 回复有任何疑惑可以回复我~

冥oo冥
2017-02-05

这个问题，很奇怪，先取得红色值255，为什么又用255作为r：2，g：5，b：5。

$color: #f36;

$rgbaColor:red($color);//这儿是字符串，不是颜色值

@debug $rgbaColor;

.div {

background: rgba(#255,0.5);

$r:0;

$g:0;

$b:0;

@if $rgbaColor >=100{

@debug $rgbaColor+">=100:";//255

$r:floor($rgbaColor / 100);

$g:floor(($rgbaColor % 100) / 10);

$b:($rgbaColor % 10);

@debug "$r is " + $r + ",$g is " + $g + ",$b is " + $b;

$r:$r*16+$r;@debug $r;

$g:$g*16+$g;@debug $g;

$b:$b*16+$b;@debug $b;

}

//background: rgba(#255,.6);

$newColor:rgb($r,$g,$b);@debug $newColor;

background: rgba($newColor,0.5);

}

0 回复有任何疑惑可以回复我~

收起回答

weibo_朱宁博4097020 提问者

$rgbaColor 在文中已经被转化为了 #255 background: rgba(#255,.6); 都能够正常解析但 background: rgba($rgbaColor,.6); 不就等价于 background: rgba(#255,.6); 吗，为什么不能正常解析呢。解释下：我$color: #f36; 这样子在外层定义，是为了方便修改 color的色值，就能整个改变效果。

2017-02-07 回复有任何疑惑可以回复我~

weibo_朱宁博4097020 提问者

background: rgba(#255,.6); 这句也是为了验证性的输出看结果，这里看解析的代码效果。当然实际用的时候css里这样写一个属性定义多次肯定是不合适的。但这里为了看解析结果一个属性写多次是没有问题的。

2017-02-07 回复有任何疑惑可以回复我~