Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
(一) 基础
-
1.下载less.js
https://github.com/less/less.js/tree/master/dist
https://www.html.cn/doc/less/#download-options -
2.目录结构
-
3.在index.html文件头部先引入style.less文件和再引入less.min.js文件
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <!-- 注意rel中的样式 --> <link rel="stylesheet/less" href="./less/style.less"> <script src="js/less.min.js"></script> </head> <body> </body> </html> -
4.要在本地服务器中运行，即url必须是localhost或者127.0.0.1开头，直接是文件路径是不行的
如：http://localhost:52330/index.html
(二) 语法
[1]. 变量
1). 定义变量：
“@”后添加变量名称与变量值用":"连接，如下
@width:100px;
2). 变量的作用域：
同一个变量名如果被赋值多次，**以当前作用域的最后一次定义为准**，如果当前作用域没有定义该变量，则去父作用域找。
@width: 500px;
.meng{
/* 宽度为500px*/
width: @width;
border:1px solid #000;
height: 50px;
.long{
/* 宽度为30px*/
@width: 40px;
width: @width;
border:1px solid #000;
height: 40px;
@width: 30px;
}
}
3). 字符串插值
变量可以用@{name}这样的结构将变量嵌入到字符串中
@myUrl: 'http://www.baidu.com';
.logo{
background: url("@{myUrl}");
}
结果为：
.logo{
background: url("http://www.baidu.com");
}
4). 选择器插值
如果需要在选择器中使用LESS变量，只需通过使用和字符串插值一样的方式即可
/*注意没有引号，就是简单的替换*/
@base: myBase;
.@{
base}{
/*结果：.myBase*/
width:100px;
}
#@{
base}{
/*结果：#myBase*/
width:200px;
}
5). 变量值不编译
media query作为变量
media query中使用less变量，可以直接使用普通的变量方式，因为 “~”后面的值是不被编译的，所以可以用作media query的参数。
@singleQuery:~"(max-width: 768px)";
@media screen and @singleQuery{
/*结果：@media screen and (max-width: 768px) */
div{
background-color: red;
}
}
6). 用变量的值做变量
在定义变量时使用其他的变量
@meng: 1314px;
@loveDay: meng;
div{
width: @@loveDay; /*结果：width: 1314px;*/
}
[2]. 混合
1). 继承类名
可以定义一些通用的属性集为一个class,然后另一个class中去调用这些属性。
.box{
width: 200px;
}
.ls{
height: 300;
}
.container{
.box;
.ls{
background-color: red;
}
}
结果：
.box {
width: 200px;
}
.ls {
height: 300;
}
.container {
width: 200px;
}
.container .ls {
background-color: red;
}
2). 带参数混合
在less中，可以像函数一样定义一个带参数的属性集合，然后在其他选择器中调用它。
/*.setWidth将不被编译到css中*/
.setWidth(@width){
width: @width / 2;
}
.box{
.setWidth(100px); /*结果： width: 50px;*/
}
3). 隐藏属性继承
如果不希望某些属性被编译到css中可以在属性名后加上"()"即可
/*.base将不被编译到css中*/
.base(){
width:500px;
background-color: #f5f5f5;
overflow: hidden;
}
.box{
height: 100px;
.base();
}
结果为：
.box {
height: 100px;
width: 500px;
background-color: #f5f5f5;
overflow: hidden;
}
4). 默认值混合
当不传参时，使用默认值。
.setWidth(@width:100px){
width: @width / 2;
}
.box{
.setWidth(200px); /*结果： width: 100px;*/
}
.box2{
.setWidth();/*结果： width: 50px;*/
}
5). 多参数混合
- 多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义： 它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。
- 使用分号作为参数分隔符意味着可以将逗号分割的一组值作为一个变量处理。
- 可以使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合： .name( 1, 2, 3;)
- 逗号分隔的一组值参数的默认值： .name(@param1: red, bule;)
/*一个参数时调用*/
.mixin(@width){
width-1: @width;
border: 1px solid #000;
}
/*两个参数时调用*/
.mixin(@width;@height){
width-2: @width;
height-2: @height;
}
/*一个/两个参数时调用*/
.mixin(@width;@height:100px){
width-3: @width;
height-3: @height;
}
/*三个参数时调用*/
.mixin(@width;@height;@bg){
width-4: @width;
height-4: @height;
background: @bg;
}
.box{
.mixin(500px);
}
.box2{
.mixin(200px;50px);
}
.box3{
.mixin(200px;);
}
.box4{
.mixin(200px;400px;red);
}
结果：
.box {
width-1: 500px;
border: 1px solid #000;
width-3: 500px;
height-3: 100px;
}
.box2 {
width-2: 200px;
height-2: 50px;
width-3: 200px;
height-3: 50px;
}
.box3 {
width-1: 200px;
border: 1px solid #000;
width-3: 200px;
height-3: 100px;
}
.box4 {
width-4: 200px;
height-4: 400px;
background: red;
}
6). arguments变量
如果不想单独处理每一个参数的话可以用@arguments
.transition(@moveStyle: all;@delayTime: 4s;@moveType: ease-in; @moveTime: 2s){
/*@arguments 代表参数的集合*/
transition:@arguments;
}
.box {
.transition(); /*结果为： transition: all 4s ease-in 2s;*/
}
7). !important
调用是在混合后面加上!important关键字表示将混合带来的所有属性标记为!important。
.mixin(@width: 500px; @height: 200px; @bg: red){
width: @width;
height: @height;
background: @bg;
}
.box{
.mixin() !important;
}
结果为：
.box {
width: 500px !important;
height: 200px !important;
background: red !important;
}
8). 高级参数用法
如果需要在minx中不限制参数的数量，可以在变量名后添加"…"，表示这里可以使用N个参数。
.mixin(...){
padding: @arguments;
}
.box{
.mixin(50px); /*结果: padding: 50px;*/
}
9). 模式匹配与Guard表达式(类似switch)
通过参数值控制mixin行为的功能。
/*dark相当于常量，只有第一个参数为dark时才选择该样式*/
.mixin(dark, @color){
color: darken(@color, 10%);
}
/*light相当于常量，只有第一个参数为light时才选择该样式*/
.mixin(light, @color){
color: lighten(@color, 10%);
}
/*只要有两个参数就选择该样式*/
.mixin(@_, @color){
display: block;
}
@sel: dark;
.box{
.mixin(@sel, red);
}
结果：
.box {
color: #cc0000;
display: block;
}
10). 条件混合
Guards支持的运算符包括：> >= = =< < 。true关键字是唯一被判断为真的值。
(1). less自带的函数判断
.mixin(@width) when (@width >= 100){
width: 200px;
}
.mixin(@width) when (@width < 100){
width: 50px;
}
.box{
.mixin(100); /*结果：width: 200px;*/
}
(2). 多条件判断
多个Guards可以通过逗号表示分给，如果其中任意一个结果为true，则匹配为真。
@number: 1;
@w: 100px;
.mixin(@w)when (@w < 150px),(@number = 2){
width: @w;
}
.box{
.mixin(@w); /*结果： width: 100px;*/
}
(3). guard中的and
两个条件同时为真则为真
@h: 200px;
@w: 500px;
.mixin(@h, @w)when (@h > 100px) and (@w > 100px){
display: block;
}
.box{
.mixin(@h, @w); /*结果： display: block;*/
}
(4). guard中的not
取反？
@h: 200px;
.mixin(@n) when not(@n < 100px){
display: block;
}
.box{
.mixin(@h);/*结果： display: block;*/
}
[3]. 嵌套语法
.container{
display: block;
.row{
background-color: #f5f5f5;
}
}
结果为：
.container {
display: block;
}
.container .row {
background-color: #f5f5f5;
}
[4]. &的用法
.box {
&:hover {
text-decoration: none;
}
&:nth-child(2) {
font-weight: bold;
}
}
结果：
.box:hover {
text-decoration: none;
}
.box:nth-child(2) {
font-weight: bold;
}
[5]. &的高级用法
用字选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。
.meng, .long {
div & {
color: black;
}
&+& {
color: red;
}
&~& {
background-color: #f5f5f5;
}
}
结果：
div .meng,
div .long {
color: black;
}
.meng + .meng,
.meng + .long,
.long + .meng,
.long + .long {
color: red;
}
.meng ~ .meng,
.meng ~ .long,
.long ~ .meng,
.long ~ .long {
background-color: #f5f5f5;
}
[6]. less 命名空间
@baseHeight: 100px;
.space{
.box(){
display: block;
border:1px solid #000;
background-color: #fff;
}
.tab(){
width: 100px;
height: @baseHeight;
background-color: #f5f5f5;
}
}
div{
.space>.box();
}
.tab{
.space>.tab();
}
结果：
div {
display: block;
border: 1px solid #000;
background-color: #fff;
}
.tab {
width: 100px;
height: 100px;
background-color: #f5f5f5;
}
(三) less函数
[1]. String 函数系列
1). escape(@string)编码
使用URL-encoding的方式编码字符串。如果参数不是字符串的话，函数行为是不可预知的。目前传入颜色值返回undefined，其他的值会原样返回。
不被编码：, / ? @ & + ’ ~ ! $
常见的被编码： # ^ () { } | : < > ; [ ] =
参数: 字符串。需要转义的字符串。
返回值：字符串 string
div{
width: escape('a=1');/*width: a%3D1;*/
}
2). e(@string)转义如 “~”
用于对css的转义，与~“value”类似。它接受一个字符串作为参数，并原样返回内容(不含引号)。它可用于输出一些不合法的css语法，或者使用less不能识别的属性。也接受经~转义的值或者是数字作为参数。
div{
width: e('ms:alweysHasItsOwnSyntax');/*width: ms:alweysHasItsOwnSyntax;*/
}
3). %格式化参数
作用： 函数 %(string, arguments …) 格式化一个字符串。
第一个参数是带占位符的字符串，所有占位符始于百分号%后跟字母s,S,d,D,a,A剩下的参数是替换占位符的表达式。如果你需要输出百分号用双百分号转义%%。
如果你需要把特殊字符转为为utf-8转移码请使用大写字母占位符，该占位符会转义所有特殊字符除了 0 ’ ~ !。空格会被转义为%20.小写字母占位符会保留特殊字符的原样。
div {
/*使用a/d格式化*/
width: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
/*width: "repetitions: 3 file: "directory/file.less"";*/
/*使用A/D格式化*/
width: %("repetitions: %A file: %D", 1 + 2, "directory/file.less");
/*width: "repetitions: 3 file: %22directory%2Ffile.less%22";*/
/*使用s格式化*/
width: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
/*width: "repetitions: 3 file: directory/file.less";*/
/*使用S格式化*/
width: %("repetitions: %S file: %S", 1 + 2, "directory/file.less");
/*width: "repetitions: 3 file: directory%2Ffile.less";*/
}