什么是LESS?LESS是一个CSS预处理器,可以为网站启用可自定义,可管理和可重用的样式表。LESS是一种动态样式表语言,扩展了CSS的功能。 LESS也是跨浏览器友好。CSS预处理器是一种脚本语言,可扩展CSS并将其编译为常规CSS语法,以便可以通过Web浏览器读取。 它提供诸如变量,函数, mixins 和操作等功能,可以构建动态CSS。
一、Less 使用初体验
1. 使用 Less 写样式
使用 Npm 全局安装 Less
$ npm install less -g
创建一个空文件夹,这里命名为:learn-less
在根目录下创建 index.html 文件,复制内容如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识 Less</title>
<link href="./main.css" rel="stylesheet">
</head>
<body>
<div class="container">1</div>
<div class="container2">2</div>
<div class="container3">3</div>
</body>
</html>
在根目录下创建 main.less 文件,复制内容如下:
// main.less
@width: 100%;
@height: 100px;
@color: red;
.container{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container2{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container3{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
现在打开浏览器看一下,会发现并没有加载样式。这是因为 index.html 中引入的样式文件是 main.css 而不是 main.less。所以接下来,我们需要将 main.less 转换为 main.css,不用担心,这一步骤并不需要你手动操作,仅仅是运行一条命令就会自动完成转换。
$ lessc main.less
操作完以上步骤就会发现在根目录下生成了一个 main.css 文件,此时再打开浏览器看看,样式已经出现了。
main.css 转义内容为:
.container {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container2 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container3 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
如果你使用了 Webstorm 作为开发工具,那么连手动输入命令行这一步都可以跳过,因为 Webstorm 会在你的 .less 文件被修改后自动生成对应的 .css 文件,具体配置跳转:Webstorm 配置 Less 自动转译成 css
2. 感受 Less 的便利
现在有一个新的需求,需要将三个 div 的背景颜色改成蓝色(blue),如果是之前 css 的写法需要依次找到 container、container2、container3,对应修改里面的 background-color 属性,但是使用 less 我们仅仅修改前面定义过的变量值即可。
// main.less
@width: 100%;
@height: 100px;
@color: blue;
...
使用 lessc main.less
进行转译后打开浏览器可以看到三个 div 的背景颜色已经被改变了。
二、变量
我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护。
理想状态,应是下面这样:
const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor); $(".arctive").css("background-color",bgColor);
只要我们修改 bgColor
这一个变量, 整个页面的背景颜色都会随之改变。
而 Less 中的变量十分强大,可化万物,值得一提的是,其变量是常量 ,所以只能定义一次,不能重复使用。
值变量
/* Less */ @color: #999; @bgColor: skyblue;//不要添加引号 @width: 50%; #wrap { color: @color; width: @width; } /* 生成后的 CSS */ #wrap { color: #999; width: 50%; }
以 @
开头 定义变量,并且使用时 直接 键入 @
名称。
在平时工作中,我们就可以把 常用的变量 封装到一个文件中,这样利于代码组织维护。
@lightPrimaryColor: #c5cae9; @textPrimaryColor: #fff; @accentColor: rgb(99, 137, 185); @primaryTextColor: #646464; @secondaryTextColor: #000; @dividerColor: #b6b6b6; @borderColor: #dadada;
选择器变量
让 选择器 变成 动态
/* 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; }
属性变量
可减少代码书写量
/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild;//变量名 必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; }
url 变量
项目结构改变时,修改其变量即可。
/* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名 必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); }
声明变量
有点类似于 下面的 混合方法
- 结构: @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; }
变量运算
不得不提的是,Less 的变量运算完全超出我的期望,十分强大。
- 加减法时 以第一个数据的单位为基准 - 乘除法时 注意单位一定要统一
/* 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; }
变量作用域
一句话理解就是:就近原则
借助官网的Demo
/* Less */ @var: @a; @a: 100%; #wrap { width: @var; @a: 9%; } /* 生成的 CSS */ #wrap { width: 9%; }
用变量去定义变量
/* Less */ @fnord: "I am fnord."; @var: "fnord"; #wrap::after{ content: @@var; //将@var替换为其值 content:@fnord; } /* 生成的 CSS */ #wrap::after{ content: "I am fnord."; }
三、嵌套
& 的妙用
& :代表的上一层选择器的名字,此例便是header
。
/* 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; }
媒体查询
在以往的工作中,我们使用 媒体查询,都要把一个元素 分开写
#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; } }
唯一的缺点就是 每一个元素都会编译出自己 @media
声明,并不会合并。
实战技巧
可以借助 Less 在元素中,去定义自己的私有样式。
/* Less */ #main{ // something.. &.show{ display:block; } } .show{ display:none; }
const main = document.getElementById("main"); main.classList.add("show");
结果:
#main.show{ display:block; } .show{ display:none; //会被覆盖。 }
四、混合方法
无参数方法
方法犹如 声明的集合,使用时 直接键入名称即可。
/* Less */ .card { // 等价于 .card() background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card;//等价于.card(); } /* 生成的 CSS */ #wrap{ background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); }
其中 .card
与 .card()
是等价的。
个人建议,为了避免 代码混淆,应写成 :
.card(){ //something... } #wrap{ .card(); }
要点: `.` 与 `#` 皆可作为 方法前缀。 方法后写不写 `()` 看个人习惯。
默认参数方法
Less 可以使用默认参数,如果 没有传参数,那么将使用默认参数。
@arguments
犹如 JS 中的 arguments
指代的是 全部参数。
传的参数中 必须带着单位。
/* Less */ .border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments;//指代的是 全部参数 } #main{ .border(0px,5px,30px,red);//必须带着单位 } #wrap{ .border(0px); } #content{ .border;//等价于 .border() } /* 生成的 CSS */ #main{ border:solid 1px red; box-shadow:0px,5px,30px,red; } #wrap{ border:solid 1px #000; box-shadow: 0px 50px 30px #000; } #content{ border:solid 1px #000; box-shadow: 10px 50px 30px #000; }
方法的匹配模式
与 面向对象中的多态 很相似
/* Less */ .triangle(top,@width:20px,@color:#000){ border-color:transparent transparent @color transparent ; } .triangle(right,@width:20px,@color:#000){ border-color:transparent @color transparent transparent ; } .triangle(bottom,@width:20px,@color:#000){ border-color:@color transparent transparent transparent ; } .triangle(left,@width:20px,@color:#000){ border-color:transparent transparent transparent @color; } .triangle(@_,@width:20px,@color:#000){ border-style: solid; border-width: @width; } #main{ .triangle(left, 50px, #999) } /* 生成的 CSS */ #main{ border-color:transparent transparent transparent #999; border-style: solid; border-width: 50px; }
要点
- 第一个参数 `left` 要会找到方法中匹配程度最高的,如果匹配程度相同,将全部选择,并存在着样式覆盖替换。 - 如果匹配的参数 是变量,则将会匹配,如 `@_` 。
方法的命名空间
让方法更加规范
/* Less */ #card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h;//可以使用上一层传进来的方法 width: @w; } } } #wrap{ #card > .d > #a(100px); // 父元素不能加 括号 } #main{ #card .d(); } #con{ //不得单独使用命名空间的方法 //.d() 如果前面没有引入命名空间 #card ,将会报错 #card; // 等价于 #card(); .d(20px); //必须先引入 #card } /* 生成的 CSS */ #wrap{ height:100px; width:300px; } #main{ width:300px; } #con{ width:20px; }
要点
- 在 CSS 中`>` 选择器,选择的是 儿子元素,就是 必须与父元素 有直接血源的元素。 - 在引入命令空间时,如使用 `>` 选择器,父元素不能加 括号。 - 不得单独使用命名空间的方法 必须先引入命名空间,才能使用 其中方法。 - 子方法 可以使用上一层传进来的方法
方法的条件筛选
Less 没有 if else,可是它有 when
/* Less */ #card{ // and 运算符 ,相当于 与运算 &&,必须条件全部符合才会执行 .border(@width,@color,@style) when (@width>100px) and(@color=#999){ border:@style @color @width; } // not 运算符,相当于 非运算 !,条件为 不符合才会执行 .background(@color) when not (@color>=#222){ background:@color; } // , 逗号分隔符:相当于 或运算 ||,只要有一个符合条件就会执行 .font(@size:20px) when (@size>50px) , (@size<100px){ font-size: @size; } } #main{ #card>.border(200px,#999,solid); #card .background(#111); #card > .font(40px); } /* 生成后的 CSS */ #main{ border:solid #999 200px; background:#111; font-size:40px; }
要点
- 比较运算有: > >= = =< <。 - = 代表的是等于 - 除去关键字 true 以外的值都被视为 false:
数量不定的参数
如果你希望你的方法接受数量不定的参数,你可以使用... ,犹如 ES6 的扩展运算符。
/* Less */ .boxShadow(...){ box-shadow: @arguments; } .textShadow(@a,...){ text-shadow: @arguments; } #main{ .boxShadow(1px,4px,30px,red); .textShadow(1px,4px,30px,red); } /* 生成后的 CSS */ #main{ box-shadow: 1px 4px 30px red; text-shadow: 1px 4px 30px red; }
方法使用important!
使用方法 非常简单,在方法名后 加上关键字即可。
/* Less */ .border{ border: solid 1px red; margin: 50px; } #main{ .border() !important; } /* 生成后的 CSS */ #main { border: solid 1px red !important; margin: 50px !important; }
循环方法
Less 并没有提供 for 循环功能,但这也难不倒 聪明的程序员,使用递归去实现。
下面是官网中的一个 Demo,模拟了生成栅格系统。
/* Less */ .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } /* 生成后的 CSS */ .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
五、函数
曾几何时,在书写呆板的 css 时有没有想过让类名动态化,根据不同的参数生成不同的样式。看下面的示例:
// func.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
使用 $ lessc func.less
进行转译 func.css 文件内容如下:
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
可以看到,这里就用到了函数的概念,在 #header
和 .button
中分别传入不同的参数,结果也就生成不同的代码。
关于 less 中函数的写法还有以下几种:
// 函数的参数设置默认值:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 函数有多个参数时用分号隔开
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
// 函数如果没有参数,在转译成 css 时就不会被打印出来,详见上面混合中的示例
.wrap() {
text-wrap: wrap;
}
// 函数参数如果有默认,调用时就是通过变量名称,而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
// 函数参数有个内置变量 @arguments,相当于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
// 函数名允许相同,但参数不同,类似于 java 中多态的概念
.mixin(@color: black) {
.mixin(@color: black; @margin: 10px) {
当然,上面是开发人员自定义的函数,Less 也为我们定义了很多好用的内置函数。关于内置函数,如果掌握,可以在开发过程中节约很多时间,由于内置函数数量很多,这里就不一一介绍,传送门:Less 内置函数官方文档。
六、父子元素的写法
在 css 中父子元素的写法通常如下:
.container {
padding: 0;
}
.container .article {
background-color: red;
}
在 Less 写法如下,父子嵌套关系一目了然。
.container {
padding: 0;
.article {
background-color: red;
}
}
当然,父子元素还要一种是伪类的写法,在 css 中写法如下:
#header :after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
在 less 中写法如下,可以看到引入了新的符号 &
,以 &
来代替主类 #header
。
#header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
七、神奇 @import
在传统 css 文件中,每个文件都是独立的。在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。
创建 one.less 文件:
.container {
width: 100px;
height: 200px;
}
创建 two.less 文件:
@import "one";
使用 $ lessc two.less
转译成 two.css
文件,可以看到内容如下:
.container {
width: 100px;
height: 200px;
}
@import 的作用可以看成是将 one.less 的内容复制一份到当前 .less 文件中。
八、其他
-
注释
- /* */ CSS原生注释,会被编译在 CSS 文件中。
- / / Less提供的一种注释,不会被编译在 CSS 文件中。
- 避免编译
/* Less */ #main{ width:~'calc(300px-30px)'; } /* 生成后的 CSS */ #main{ width:calc(300px-30px); }
结构: `~' 值 '`
3. 避免编译
因为 Less 是由 JS 编写,所以 Less 有一得天独厚的特性:代码中使用 Javascript 。
/* Less */ @content:`"aaa".toUpperCase()`; #randomColor{ @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)"; } #wrap{ width: ~"`Math.round(Math.random() * 100)`px"; &:after{ content:@content; } height: ~"`window.innerHeight`px"; alert:~"`alert(1)`"; #randomColor(); background-color: @randomColor; } /* 生成后的 CSS */ // 弹出 1 #wrap{ width: 随机值(0~100)px; height: 743px;//由电脑而异 background: 随机颜色; } #wrap::after{ content:"AAA"; }