使用散列与scss [英] using hash with scss

问题描述

你好，我有很多颜色变量。所以想要做这样的事情：

  $ culture：＃00CC66; 
 $派对：＃CC9900; 
 
 @each $ i文化派对{
 .bl _＃{$ i} {
 border-left-color：＃{$＃{$ i}}; 
 
 
  

打印：

  bl_culture {border-left-color：＃00cc66} 
 bl_party {border-left-color：＃cc9900} 
  
 
 
 ido怎么样？ 
 
 
谢谢 
 
解决方案
悲伤的是，你不能。 SASS只会解析一次你的文件，所以即使你做了这样的事情： 
 
 
  $ culture：＃00CC66; 
 $派对：＃CC9900; 
 
 @each $ i文化派对{
 .bl _＃{$ i} {
 border-left-color：＃{'$'+ $ i}; 
 
 
 
 
 
 
 $ p你将会得到如下的CSS： p> 
 
 
  .bl_culture {
 border-left-color：$ culture; } 
 
 .bl_party {
 border-left-color：$ party; } 
  
您最好的选择是改变您的代码，例如：
  .bl {
 [...] 
 
& .culture {
 border-left-颜色：＃00CC66 
} 
& .party {
 border-left-color：＃CC9900 
} 
} 
  
然后使用类似于 class =bl culture而不是 class =bl_culture。
 
hi i have many variables with colors. so want do something like this:
$culture: #00CC66;
$party:#CC9900;

 @each $i in culture, party {
.bl_#{$i}{
   border-left-color: #{$#{$i}};
}
}
for print:
bl_culture{border-left-color:#00cc66}
bl_party{border-left-color:#cc9900}
How can ido it?

thanks
解决方案
As sad as it is, you can't. SASS will only parse your file once, so even if you do something like this :
$culture: #00CC66;
$party:#CC9900;

@each $i in culture, party {
  .bl_#{$i}{
     border-left-color: #{'$' + $i};
  }
}
You will end up with the following CSS :
.bl_culture {
  border-left-color: $culture; }

.bl_party {
  border-left-color: $party; }
Your best bet is probably to change your code for something like :
.bl {
  [...]

  &.culture {
    border-left-color: #00CC66
  }
  &.party {
    border-left-color: #CC9900
  }
}
And then use something like class="bl culture" instead of class="bl_culture".

                        
这篇关于使用散列与scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！