less学习笔记 27/8/17

less最新官网

http://less.bootcss.com/

 

Less 是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。如：

<link rel="stylesheet/less" href="less/style.less" />

Less现在可以在客户端（如：IE ,Webkit,Firefox）和服务器（如node.js）上运行。前面也说过Less是CSS的一种扩展，他不但向后兼容，而且在现有的CSS语法基础上增加许多额外的功能。

LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。

1、注释

可以用css的/**/注释，编译成css文件时，该注释会被保留。

也可以用双斜杠//注释，编译成css文件时，该注释不会被保留。

 

2、变量

必须用@开始，推荐采用驼峰式命名。如：@变量名：值

 

/*======== 定义变量===========*/

@color: #4d926f;

 

/*======== 应用到元素中 ========*/ 

#header {    color: @color;}          h2 {    color: @color;}

 

注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。

@arguments变量

例：

.border_arg(@w:30px, @c: red, @x: solid) {

border: @arguments;

}

 

3、混合（mixin）

混合其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一人类中当作他的属性；另外混合也像一个带有参数的functions，如下在的例子：

 

/*========= 定义一个类 ===========*/

.roundedCorners(@radius:5px) {   

 -moz-border-radius: @radius;   

 -webkit-border-radius: @radius;   

 border-radius: @radius;

}

/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/

＃header {    

.roundedCorners();   //调用时，不带参数混合，不用写括号

}

#footer {    

.roundedCorners(10px);

}

混合有：不带参数混合、带参数混合、带默认参数混合。

 

4、匹配模式

相当于js当中的if(但不完全是)，它要满足条件后才能匹配。

 

.pos(a) {

position: absolute;

}

.pos(r) {

position: relative;

}

.pos(f) {

position: fixed;

}

.pos(@_) {

width:200px;

}

使用时：

.myDiv {

.pos(r);

}

 

@_  是固定写法，意思是以上不管哪个匹配到或者没有匹配到，都要加上里面的属性。

 

5、运算

less中，任何数字、颜色、变量都可以参与运算，运算应该被包裹在括号中。 常见运算如：  -  *  / 

例：
@w: 300px;

 

.box {

width:(@w 20) * 10;   //运算中，只有一个带单位就行

color: #ccc - 20; //实际开发中不常用

}

6、嵌套规则

例：

.list {

width: 300px;

li {

height: 30px;

}

a {

float: left;

&: hover {

color: red;

}

}

}

& 代表它的上一级选择器。

 

实际开发中，尽量少用多重嵌套，减少DOM查询，可提高页面加载性能

 

7、避免编译

需求：有时需要输出一些不正确的css语法或less不认识的语法。

 

办法：可以在字符串前加一个波浪号 引号    ~‘ ’

 

例：

width: ~"calc(100% - 10)";