首页 > 其他 > 详细

那些不明不白的$符号设计--Sass和Emmet,变量设计原理相通

时间:2018-12-19 23:21:40      阅读:224      评论:0      收藏:0      [点我收藏+]

以前看到php变量的定义,直接使用$符号开始,怎么看都不习惯。后来呀,在使用Emmet的过程中,又接触到了$符号。今天,在学习Sass的过程种,再一次接触到$符号,兴致所致,不由得想写一篇,对比一下搞不懂的$符号设计。 

 

1. Emmet

 div.item-$*5{haha}

技术分享图片

 $*5 被对应的替换为12345

技术分享图片

 

2. Sass

生成item-1, item-2, item-3, item-4, item-5 这5个类,$i,即$1, $2, $3, $4, $5 分别代表一个变量名,插入选择器中

技术分享图片

 

 输入sass命令: sass input.scss output.css --style expanded, 编译后,生成的output.css css类如下:

技术分享图片

在index.html中引入output.css:

 技术分享图片

 

运行效果如下:

技术分享图片

 

 3.总结

$1, $2, $3, $4, $5代表变量,Emmet相当于直接执行了一个循环语句,Sass也是通过脚步的方式,编译后,执行了一个循环语句,原理是相通的。

 

那些不明不白的$符号设计--Sass和Emmet,变量设计原理相通

原文:https://www.cnblogs.com/yshuangj/p/10146868.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!