sass多个颜色文本

没什么技术含量,完全就当日记写

场景:遇到一个列表,里面花花绿绿的,有很多种颜色,就用span来包,但是颜色呢,我又不想一个一个写color,正好颜色要求不高,就用标准的red、green这种来写,所以就起了redSpan、greenSpan这样的类名,这样一看,如果不用sass写的好看点真的过不去了

于是就开始查sass的用法,以前都是用最简单的嵌套属性,一下子想不起来用什么,查了一通,反正最后代码是这样的,不讲了,挺简单的

$name-list: red green orange;

@each $color in $name-list{
  .#{$color}Span{
    color: $color;
  }  
}

感想:很多框架或者类库的高级属性平时看着感觉用不到,那多半是因为做的东西太简单了,不过重复的东西很能提醒自己去寻找更简便的方法。

如果要写个文件看看输出对不对,那就用node-sass好了,装起来简单,全局安装,然后node-sass –watch input.scss output.css

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值