less/sass的each用法 - 编程猎人
文章推薦指數： 80 %
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行(支持IE 6 ...
编程猎人
网罗编程知识和经验分享，解决编程疑难杂症
首页/
联系我们
less/sass的each用法
标签： CSS
//example
@selectors:blue,green,red;
each(@selectors,{
[email protected]{value}{
a:b;
}
})
//outputs
.sel-blue{
a:b;
}
.sel-green{
a:b;
}
.sel-red{
a:b;
}
=====================================
//example
@colors:{
info:#eee;
danger:#f00;
}
each(@colors,{
[email protected]{key}{
color:@value
}
})
//outputs
.text-info{
color:#eee;
}
.text-danger{
color:#f00;
}
每个列表成员可以被默认绑定@value, @key, @index三个变量，对大部分的列表而言，@key和@index会被定义为相同的值（比如以1开始的有序列表）。
然而，你也可以使用规则自定义列表中的@key值
在每个each()函数中你不必都使用@value, @key, @index作为变量名。
在Less3.7版本中，因为each()函数，Less被描述为可以接受匿名不定参数，这一特性将会扩展到其他的语法中
一个匿名不定参数可以用#()或者 .()的样式为开头
//example
.set-2(){
one:blue;
two:green;
three:red;
}
.set-2{
//Callmixinanditerateeachrule
each(.set-2(),.(@v,@k,@i){
@{k}[email protected]{i}:@v;
});
}
//outputs
.set-2{
one-1:blue;
two-2:green;
three-3:red;
}
嵌套
//marginpadding
@spacing-type:margin,padding;
@spacing-direction:top,right,bottom,left;
@spacing-base-size:1rem;
.spacing-sizes(){
0:0;
1:0.25;
2:0.5;
3:1;
4:1.5;
5:3;
}
each(@spacing-type,.(@type){
each(@spacing-direction,.(@direction){
each(.spacing-sizes(),{
[email protected]{type}[email protected]{direction}[email protected]{key}{
@{type}[email protected]{direction}:@value*@spacing-base-size;
}
})
})
})
sass
//example
$colors:(
info:#eee;
danger:#f00;
)
@each$colorKey,$colorin$colors{
.text-#{$colorKey}{
color:@color
}
}
//outputs
.text-info{
color:#eee;
}
.text-danger{
color:#f00;
}
https://www.jianshu.com/p/c7c210bd25e8
智能推荐
1.forEach是js中遍历数组的方法，如下 2.$.each()是jquery中遍历数组的方法，如下 3.$().each()方法规定为每个匹配元素规定运行的函数,如下： ...
1、scoped的实现原理Vue中的Less中的scoped属性的效果主要是通过PostCss实现的。
代码示例：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性（比如上面的data-v-5558831a），给css选择器额外添加一个对应的属性选择器来选择组件中的dom，这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
可以总结，s...
1.申明和使用变量sass使用$符号来标识变量(老版本的sass使用!来标识变量），比如$highlight-color和$sidebar-width。
与CSS属性不同，变量可以在css规则块定义之外存在。
当变量定义在css规则块内，那么该变量只能在此规则块内使用。
如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：2、变量名用中划线还是下划线分...
less是一个css预处理语言，赋予了动态语言的特性，如变量集成，运算，函数。
less既可以在客户端(koala)上运行，也可以在服务端运行(借助Node.js),也可以在浏览器上运行。
1.使用less的基本步骤 1）在引入less.js之前要先把样式文件先引入
延伸文章資訊
- 1CSS, SCSS, and Less support in Visual Studio Code
Go to Declaration and Find References#. This is supported for Sass and Less variables in the same...
- 2How to do a For Each Item in an array in LESS css - Stack ...
Loop through array of variable names in Less - Stack Overflow
- 3LESS CSS - Beginner's Guide - Hongkiat
It ships plain CSS with programming traits such as Variables, Functions or Mixin, ... LESS syntax...
- 4A Simple Introduction to Less CSS. | Design by Pelling
The compiler monitoring the LESS folder will detect each time you save / update the LESS file. It...
- 5深入解读 Less 特性 | Less.js 中文文档 - Bootstrap
Less 扩充了 CSS 语言，增加了诸如变量、混合（mixin）、运算、函数等功能。 ... Essentially, each scope has a "final" value, simi...
