less循环和合并

来源:http://www.chinese-glasses.com 作者:Web前端 人气:199 发布时间:2020-04-15
摘要:时间: 2019-09-28阅读: 97标签: less 循环 Less 编码规范 Loops语句允许我们多次执行一个语句或一组语句。 简介 因为自己最近写css用的比较多还是less,整理了一份less规范,  在Less中,mixin可

时间: 2019-09-28阅读: 97标签: less循环

Less 编码规范

Loops语句允许我们多次执行一个语句或一组语句。

简介

因为自己最近写css用的比较多还是less,整理了一份less规范, 

在Less中,mixin可以自称,与Guard表达式模式匹配组合使用时,这个递归mixin可以创建各种迭代/循环结构。

代码组织

代码按如下形式按顺序组织:

  1. @import
  2. 变量声明
  3. 样式声明

    1 // ✓ 2 @import "est/all.less"; 3 4 @default-text-color: #333; 5 6 .page { 7 width: 960px; 8 margin: 0 auto; 9 }

 


.loop(@count) when (@count  0) { // 下一次迭代 .loop((@count - 1)); // 每次迭代的代码 width: (20px * @count); }.box { // 启动循环 .loop(10);}// 输出 css.box { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; width: 60px; width: 70px; width: 80px; width: 90px; width: 100px;}​​// 使用递归循环生成CSS网格类的一般示例.grids(10);.grids(@n, @i: 1) when (@i = @n) { .column@{i} { width: (@i * 100% / @n); } .grids(@n, (@i + 1));}// 输出 css.column1 { width: 10%;}.column2 { width: 20%;}.column3 { width: 30%;}.column4 { width: 40%;}.column5 { width: 50%;}.column6 { width: 60%;}.column7 { width: 70%;}.column8 { width: 80%;}.column9 { width: 90%;}.column10 { width: 100%;}

@import 语句

@import 语句引用的文件写在一对引号内,.less 后缀省略(与引入 CSS 文件时的路径格式一致)。引号使用 ' 和 " 均可。

// ✗
@import 'est/all';
@import "my/mixins.less";

// ✓
@import "est/all.less";
@import "my/mixins.less";

 


合并

空格

merge 功能允许将多个属性中的值聚合到单个属性下的逗号或空格分隔的列表中,merge 对于背景和变换等属性很有用。

属性、变量

选择器和 { 之间保留一个空格。

属性名后的冒号(:)与属性值之间保留一个空格,冒号前保留空格。

定义变量时冒号(:)与变量值之间保留一个空格,冒号前保留空格。

在用逗号(,)分隔的列表(Less 函数参数列表、以 , 分隔的属性值等)中,逗号后保留一个空格,逗号前保留空格。

// ✗
.box{
    @w:50px;
    @h :30px;
    width:@w;
    height :@h;
    color: rgba(255,255,255,.3);
    transition: width 1s,height 3s;
}

// ✓
.box {
    @w: 50px;
    @h: 30px;
    width: @w;
    height: @h;
    transition: width 1s, height 3s;
}

 

运算

+ / - / * / / 四个运算符两侧保留一个空格。+ / - 两侧的操作数有相同的单位,如果其中一个是变量,另一个数值书写单位。

// ✗
@a: 200px;
@b: (@a+100)*2;

// ✓
@a: 200px;
@b: (@a + 100px) * 2;

 

逗号,用逗号附加属性值 ,它增加了属性值到最后。

混入(Mixin)

Mixin 和后面的空格之间包含空格。在给 mixin 传递参数时,在参数分隔符(, / ;)后保留一个空格:

// ✗
.box {
    .size(30px,20px);
    .clearfix ();
}

// ✓
.box {
    .size(30px, 20px);
    .clearfix();
}

 


.mixin() { background-color: green;}.comma { .mixin(); background-color: red;}​// 输出.comma { background-color: green, red;}

选择器

当多个选择器共享一个声明块时,每个选择器声明独占一行。

// ✗
h1, h2, h3 {
    font-weight: 700;
}

// ✓
h1,
h2,
h3 {
    font-weight: 700;
}

 

Class 命名不得以样式信息进行描述,如 .float-righttext-red 等。


空间,用空格附加属性值 ,它添加属性值与空格。

省略与缩写

.mixin() { transform+_: scale(2);}.space { .mixin(); transform+_: rotate(30deg);}// 输出.space { transform: scale(2) rotate(30deg);}

缩写

多个属性定义可以使用缩写时, 尽量使用缩写。缩写更清晰字节数更少。常见缩写有 marginborderpaddingfontlist-style 等。在书写时考量缩写展开后是否有不需要覆盖的属性内容被修改,从而带来副作用。

数值

对于处于 (0, 1) 范围内的数值,小数点前的 0 可以(MAY)省略,同一项目中保持一致。

// ✗
transition-duration: 0.5s, .7s;

// ✓
transition-duration: .5s, .7s;

 

本文由10bet发布于Web前端,转载请注明出处:less循环和合并

关键词:

频道精选

最火资讯