一,关于less

1.1介绍
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。

less的中文官网:http://lesscss.cn/
bootstrap中less教程:http://www.bootcss.com/p/lesscss/

1.2 Less编译工具
该工具不需要node.js环境
koala 官网:www.koala-app.com

二,less用法

2.1 less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

举例:

注:右边是less文件,左边是通过考拉编译less的css文件

less能定义公共样式嘛_less


2.2 less中的变量

使用@来声明一个变量:例如@color:pink;

1.作为普通属性值只来使用:直接使用@color这种形式

2.作为选择器和属性名:#@{selector的值}的形式

3.作为URL:@{url}

举例:右less,左对应css

less能定义公共样式嘛_嵌套规则_02


4. 变量的延迟加载

会等到作用域加载完了,在进行变量的加载

less能定义公共样式嘛_less能定义公共样式嘛_03

三,less中的嵌套规则

1.基本嵌套规则

2.&的使用

less能定义公共样式嘛_css_04

四,less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合

less能定义公共样式嘛_less_05


6.命名参数

less能定义公共样式嘛_less_06

7.匹配模式

第一个参数必须为@_

less能定义公共样式嘛_嵌套规则_07

8.arguments变量

可以转换成属性值

less能定义公共样式嘛_less能定义公共样式嘛_08

五,less中可以进行加减乘除的运算和避免编译

~" "避免编译,让浏览器进行编译

less能定义公共样式嘛_less_09

六,less继承

被继承的类不能有字符串

// 继承不能有参数
.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.juzhong:hover{
    background: red!important;
}

less能定义公共样式嘛_css_10