Less 编码规范详解

因为自己最近写css用的比较多,整理了一份less规范, 希望对大家入门less有帮助。

代码组织

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

@import

变量声明

样式声明

// ?

@import "est/all.less";

@default-text-color: #333;

.page {

width: 960px;

margin: 0 auto;

}

@import 语句

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

// ?

@import ’est/all’;

@import "my/mixins.less";

// ?

@import "est/all.less";

@import "my/mixins.less";

空格

属性、变量

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

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

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

在用逗号(,)分隔的列表(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();}

选择器

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

// ?

h1, h2, h3 {

font-weight: 700;

}

// ?

h1,

h2,

h3 {

font-weight: 700;

}

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

省略与缩写

缩写

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

数值

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

// ?

transition-duration: 0.5s, .7s;

// ?

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

0 值

当属性值为 0 时,省略可省的单位(长度单位如 px、em,不包括时间、角度等如 s、deg)。

// ?

margin-top: 0px;

// ?

margin-top: 0;

颜色

颜色定义使用 #rrggbb 格式定义,并在可能时尽量缩写为 #rgb 形式,且避免直接使用颜色名称与 rgb() 表达式。

// ?

border-color: red;

color: rgb(254, 254, 254);

// ?

border-color: #f00;

color: #fefefe;

私有属性前缀

同一属性有不同私有前缀的,尽量(按前缀长度降序书写,标准形式写在最后。且这一组属性以第一条的位置为准,尽量按冒号的位置对齐。

// ?

.box {

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

}

其他

可以在无其他更好解决办法时使用 CSS hack,并且尽量使用简单的属性名 hack 如 _zoom、*margin。

可以但谨慎使用 IE 滤镜。需要注意的是,IE 滤镜中图片的 URL 是以页面路径作为相对目录,而不是 CSS 文件路径。

嵌套和缩进

嵌套的声明块前增加一次缩进,有多个声明块共享命名空间时尽量嵌套书写,避免选择器的重复。

但是需注意的是,尽量仅在必须区分上下文时才引入嵌套关系(在嵌套书写前先考虑如果不能嵌套,会如何书写选择器)。

// ?

.main .title {

font-weight: 700;

}

.main .content {

line-height: 1.5;

}

.main {

.warning {

font-weight: 700;

}

.comment-form {

#comment:invalid {

color: red;

}

}

}

// ?

.main {

.title {

font-weight: 700;

}

.content {

line-height: 1.5;

}

.warning {

font-weight: 700;

}

}

#comment:invalid {

color: red;

}

变量

Less 的变量值总是以同一作用域下最后一个同名变量为准,务必注意后面的设定会覆盖所有之前的设定。

变量命名)采用 @foo-bar 形式,不使用 @fooBar 形式。

// ?

@sidebarWidth: 200px;

@width:800px;

// ?

@sidebar-width: 200px;

@width: 800px;

继承

使用继承时,如果在声明块内书写 :extend 语句,写在开头:

// ?

.sub {

color: red;

&:extend(.mod all);

}

// ?

.sub {

&:extend(.mod all);

color: red;

}

混入(Mixin)

在定义 mixin 时,如果 mixin 名称不是一个需要使用的 className,加上括号,否则即使不被调用也会输出到 CSS 中。

// ?

.big-text {

font-size: 2em;

}

h3 {

.big-text;}

// ?

.big-text() {

font-size: 2em;

}

h3 {

.big-text();}

如果混入的是本身不输出内容的 mixin,在 mixin 后添加括号(即使不传参数),以区分这是否是一个 className(修改以后是否会影响 HTML)。

// ?

.box {

.clearfix;

.size (20px);}

// ?

.box {

.clearfix();

.size(20px);}

Mixin 的参数分隔符使用 , 和 ; 均可,但在同一项目中保持统一。

命名空间

变量和 mixin 在命名时遵循如下原则:

一个项目只能引入一个无命名前缀的基础样式库(如 est)

业务代码和其他被引入的样式代码中,变量和 mixin 必须有项目或库的前缀

字符串

在进行字符串转义时,使用 ~"" 表达式与 e() 函数均可,但在同一项目中保持一致。

字符串两侧的引号使用 "。

注释

单行注释尽量(SHOULD)使用 // 方式。

// Hide everything

* {

display: none;

}

文章来自:博客园/yinsu12311

时间: 2024-11-05 02:20:54

Less 编码规范详解的相关文章

X264编码流程详解(转)

http://blog.csdn.net/xingyu19871124/article/details/7671634 对H.264编码标准一直停留在理解原理的基础上,对于一个实际投入使用的编码器是如何构建起来一直感觉很神秘,于是决定在理解理论的基础上潜心于编码器实现框架.关于开源的H264编码器有很多,JMVC,T264.X264,这里选择X264,因为网上关于X264源码分析资源很多.X264编码器是一个开源的经过优化的高性能H.264编码器,目前最新的源码在本人的I5处理器的PC机上,编码

编码原理详解(五)---熵编码(CAVAL)

上一篇我们讲到了ZigZag扫描,经过这一扫描之后,发现原本是4*4的像素矩阵,就变成了一连串的数字,可以说是二维到一维的一个转换吧,而且经过ZigZag扫描后,一连串的数字的最后大部分为0,以及一些+1,-1.针对这一系列的数字,从概率的角度,再进行一次编码,这个过程称之为熵编码,熵编码主要分为CAVLC,和CABAC,分别代表基于上下文的自适应可变长编码和基于上下文的自适应二进制算术编码,本节介绍CAVLC. 一.简介 CAVLC(Context-Adaptive Variable Leng

Java 注释规范详解

原文同步至:http://www.waylau.com/java-comments-conventions/ 在 Java 的编写过程中我们需要对一些程序进行注释,除了自己方便阅读,更为别人更好理解自己的程序,所以我们需要进行一些注释,可以是编程思路或者是程序的作用,总而言之就是方便自己他人更好的阅读. 注释类型 Java 有两类注释: implementation comments(实现注释)和 documentation comments(文档注释). 实现注释常见于 C++,使用 /*..

Java:编码的详解

ASCII:美国信息标准信息码,用一个字节的7为表示. ISO8859-1:拉丁码表 欧洲码表 ,用一个字节的8位表示. GB2312:中国的中文编码表. GBK:中国的中文编码表升级,融合了更多的中文文字符号. Unicode:国际标准码,融合了多种文字.所有文字都用两个字节表示,Java使用的就是这种编码表. UTF-8:最多用三个字节来表示一个字符. //例子1: import java.io.*; class EncodeStream { public static void main(

Mysql建表与索引使用规范详解

一. MySQL建表,字段需设置为非空,需设置字段默认值. 二. MySQL建表,字段需NULL时,需设置字段默认值,默认值不为NULL. 三. MySQL建表,如果字段等价于外键,应在该字段加索引. 四. MySQL建表,不同表之间的相同属性值的字段,列类型,类型长度,是否非空,是否默认值,需保持一致,否则无法正确使用索引进行关联对比. 五. MySQL使用时,一条SQL语句只能使用一个表的一个索引.所有的字段类型都可以索引,多列索引的属性最多15个. 六. 如果可以在多个索引中进行选择,My

.net 命名规范详解

一点简单常用却又易忽视的命名规范 1.项目命名空间规范A.使用有意义的名字定义命名空间,例如产品名或者公司名 B.命名空间应分层定义 C.所有单词第一个字母要大写,单词的单复数要约定一致格式:[公司名].[产品名|项目名].[子系统名|模块名].[...]如:Microsoft.Office.Tools.WordMicrosoft.Office.Tools.ExcelMicrosoft.SqlServer.ConnectionInfoMicrosoft.SqlServer.GridControl

FLV文件格式官方规范详解

——如果要学习一个新的知识点,官方手册可能是最快的途径.查看网上其他人的总结也许入门更快,但是要准确,深入,完整,还是要看官方手册. 以下内容来自对官方文档Video File Format Specification Version 10的分析总结.过程中借助ffmpeg实际转换了一个flv文件用例研究. 一个FLV文件,每种类型的tag都属于一个流,也就是一个flv文件最多只有一个音频流,一个视频流,不存在多个独立的音视频流在一个文件的情况.(mp4好像是可以的) 另外,FLV文件格式所用的

require.js的AMD规范详解

require.js使用简介 在web刚开始发展的蛮荒时代,一个页面中只需要加载一个或少量的js文件,不存在模块,也不存在冲突之类的问题,但随着web项目的发展,它越来越大,js文件动辄几十个,怎么加载就成为了一个问题,要为浏览器的性能考虑,还有各个js文件(模块)的依赖关系.require.js的出现就是为了解决这样的问题. 1.实现js文件的异步加载,避免网页失去响应. 2.管理模块之间的依赖性,便于代码的编写和维护. require.js加载 使用require.js的第一步,是先去官方网

产品新人必知的设计流程规范详解

大部分产品经理都存在一个非常严重的问题,从产品构思阶段开始,就上手做产品页面原型,忽略了中间太多的关于产品架构,功能模块设计,产品规则定义这些非常重要的工作.结果就是出来的页面原型逻辑不自洽,或者忽视了太多产品关键细节.使得研发拿到原型以后做不下去,不得不后期各种修补和返工,制造了产品经理和研发之间的矛盾. 当然我们的产品经理团队也普遍存在这个问题,为此,打算在公司内部给我们的产品经理培训一下.以下是完整的产品设计流程规范: 1. 产品构思 . 目标:搜集需求,整理产品思路,逐渐形成和完善产品构