你知道的和不知道的sass
2024-09-06 11:44:33
关于sass，大多数人的认识一个写css的工具而已
其实就是的
但是这个工具的威力你发挥了多少呢。。。
以下全部都是干货，希望你能用在自己的项目里
定义集合
我们通常是这么定义变量的
$warning-color: #ffa200;
$success-color: #62AD47;
$danger-color: #EA4335;
$info-color: #369af3;
其实变量还可以这么定义
$colors: (warning $warning-color) (danger $danger-color) (success $success-color) (info $info-color);
我们定义了上边的变量集合
这个有什么用呢
遍历对象
@each $color in $colors {
$type: nth($color, );
$value: nth($color, );
.text-#{$type} {
color: $value;
}
}
我们使用@each遍历刚刚那个集合，nth是获取集合的值
这个得到的css是这样的
.text-warning {
color: #ffa200; }
.text-danger {
color: #EA4335; }
.text-success {
color: #62AD47; }
.text-info {
color: #369af3; }
这样我们就可以迅速的根据类型来扩展样式了
循环
@for $i from through {
.col-#{$i} {
width: %/$i;
}
}
通过for循环生成了一个简单的布局 ，结果是这样的
.col- {
width: %; }
.col- {
width: %; }
.col- {
width: 33.3333333333%; }
.col- {
width: %; }
.col- {
width: %; }
.col- {
width: 16.6666666667%; }
.col- {
width: 14.2857142857%; }
.col- {
width: 12.5%; }
.col- {
width: 11.1111111111%; }
.col- {
width: %; }
.col- {
width: 9.0909090909%; }
.col- {
width: 8.3333333333%; }
最新文章
- POCO库——Foundation组件之核心Core
- 使用MegaCli工具查看Raid磁盘阵列状态
- AngularJS 源码分析1
- Fibonacci 1
- EDI - Biztalk Setting
- javascript性能优化总结二（转载）
- Windows Store App 应用设置存储
- PAT1069. The Black Hole of Numbers
- 底部菜单栏（二） TabHost & RadioGroup 实现
- android应用程序ANR定义
- VB 核心编程及通用模块开发 笔记1
- redirect_uri参数错误解决方法
- ubuntu中vi在编辑状态下方向键不能用的解决
- ListView与DataTable传递数据
- Java泛型之<T>
- [kuangbin带你飞]专题四 最短路练习 POJ 3268 Silver Cow Party
- Python中将函数作为另一个函数的参数传入并调用
- h5-canvas（其他api）
- A - The Water Bowls POJ - 3185 （bfs||高斯消元）
- 教程：Spagobi开源BI系统 Console报表设计教程