less的使用

1. 使用less预处理器(引入和编译)

1. 引入less文件 (需要定义文件格式rel="stylesheet/less")

2. 引入less编译器文件 用来动态加载less文件并创建style标签把CSS放到style标签里面

2. less基本语法

注释

// 会被删除

/**/ 不会被删除

1. 变量 详细用法

1. 变量为属性值

定义变量: @变量名:变量值

使用变量: 属性:@变量名

// 变量

@main-color: #333;

// 用法

body {

background-color:@main-color;

}

2. 变量为属性或者为选择器

定义变量: @变量名:变量值

使用变量: @{变量名} :属性值

// 变量

@property: color; //属性

// 用法

body {

background-@{property}:#333;

}

// 变量

@mySelector: banner; //选择

// 用法

@{mySelector} {

background-color:#333;

}

3. 变量为变量名

定义变量: @变量名:"变量值"

使用变量: 属性:@@变量名

@var:"hi"; //变量名

@hi:"hello world" //变量

// 用法

body {

content: @@var;

}

4. 变量为地址

定义变量: @变量名:"变量值"

使用变量: 属性:@@变量名

// 变量

@images: "../img";

// 用法

body {

background: url("@{images}/white-sand.png");

}

5. 导入语句

可以导入其他的less文件

// 变量

@themes: "文件路径";

// 用法

@import "@{themes}";

2. Mixin(类似函数) 详细用法

定义函数: .函数名{}或.函数名(@参数名:默认值){} 后面这种形式只创建不会输出,参数可以是多个

调用函数: 函数名或函数名(参数值) 调用mixin时，括号是可选的

.my-mixin {

color: black;

}

.my-other-mixin(@color:white) {

background: @color;

}

.border-radius(@radius) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

.class {

.my-mixin;

.my-other-mixin(#333);

.border-radius(50%);

}

3. 嵌套的使用

/* css写法 */

.container .row div{

/* *** */

}

/* less写法 */

.container{

.row{

div{

/* *** */

}

}

}

4. less语法的&的使用 详细使用

& 运算符表示嵌套规则的父选择器,在修改类或伪类时常用;

交集选择器

/*css语法*/

li.active{

color:#666;

}

/* less语法 */

li{

&.active{

color:#666;

}

}

伪类

/* css语法 */

a:hover{

color:#ccc;

}

/* less语法 */

a{

&:hover{

color:#ccc;

}

}

伪元素

/* css语法 */

div::before{

content:"";

}

/* less语法 */

div{

&::before{

content:"";

}

}

兄弟选择器

div{

&+div{

/* *** */

}

&~div{

/* *** */

}

}

3. less命令行用法

使用命令行将.less文件编译成.css文件

1. 安装lessc

使用npm安装lessc

npm install less -g

使用命令行

在less所在目录打开CMD执行命令lessc less文件名.less css文件名.css

lessc index.less index.css

lessc index.less ../css/index.css