一.使用方法
1.在页面中 引入 Less.js
需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。
<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>
2.在命令行 使用npm安装
npm install -g less
具体使用命令
$ lessc styles.less > styles.css
二.Less 的功能特性
1.变量
(1)值变量
以 @ 开头 定义变量，并且使用时 直接 键入 @名称。
/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
color: @color;
width: @width;
}
/* 生成后的 CSS */
#wrap {
color: #999;
width: 50%;
}
(2)选择器变量
让 选择器 变成 动态
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
(3)属性变量
/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
#wrap{
border-style:solid;
}
(4)url变量
项目结构改变时，修改其变量即可。
/* Less */
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
body {
background: url("../img/dog.png");
}
(5)声明变量
结构: @name: { 属性: 值 ;};
使用：@name();
/* Less */
@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
/* 生成的 CSS */
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
(6)变量运算
加减法时 以第一个数据的单位为基准
乘除法时 注意单位一定要统一
/* Less */
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}
2.嵌套
(1) & 的妙用
& ：代表的上一层选择器的名字
/* Less */
#header{
&:after{
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式：直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套！
margin:20px;
}
(2) 媒体查询
在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写
#wrap{
width:500px;
}
@media screen and (max-width:768px){
#wrap{
width:100px;
}
}
Less 提供了一个十分便捷的方式
/* Less */
#main{
//something...
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
3.继承
(1)extend 关键字的使用
extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。
/* Less */
.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
/* 生成后的 CSS */
.animation,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform:scale(0);
}
(2) all 全局搜索替换
使用选择器匹配到的 全部声明。
/* Less */
#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main all) {}
/* 生成的 CSS */
#main,#wrap{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}
4.导入
(1) 导入 less 文件 可省略后缀
import "main";
//等价于
import "main.less";
(2)@import 的位置可随意放置
#main{
font-size:15px;
}
@import "style";
注：
1.使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。
2.once @import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
@import (once) "foo.less";
@import (once) "foo.less"; // 这个会被忽略
3.使用@import (multiple)允许导入多个同名文件。
/* Less */
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* 生成后的 CSS */
.a {
color: green;
}
.a {
color: green;
}
5.注释
/* */ CSS原生注释，会被编译在 CSS 文件中。
/ / Less提供的一种注释，不会被编译在 CSS 文件中。
6.用gulp编译less
（1）安装
- 全局安装
npm install -g less
- 项目内安装
npm install gulp-less --save-dev
（2）使用
var gulp=require("gulp");
var less=require("gulp-less");
gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});
//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});
