less

发表于 2020-11-30更新于 2020-11-30阅读次数

初见LESS

  1. 简介：Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，混合，函数和许多其他技术，让CSS更具有维护性、主题性和可扩展性

  2. LESS官方网站：

  3. 与less的第一次碰面

  • 传统写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.content ul{
    list-style: none;
}
.content li{
    height: 25px;
    line-height: 25px;
    padding-left:15px;
    background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605683981901&di=09c5d2450b33bc4981930ce9bfd09ec1&imgtype=0&src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F73%2F49%2F43%2F4875381d_E734943_7a040cae.jpg%2521%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fjpg") no-repeat left center;
}
.content li a{
    text-decoration: none;
    color:#535353;
    font-family: microsoft yahel "黑体"，Arial,Simsun,"Arial Unicode MS",Mingliu,Helvetica;
}
  • LESS写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    .content{
        ul{
            list-style: none;
        }
        li{
            height: 25px;
            line-height: 25px;
            padding-left:15px;
            background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605683981901&di=09c5d2450b33bc4981930ce9bfd09ec1&imgtype=0&src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F73%2F49%2F43%2F4875381d_E734943_7a040cae.jpg%2521%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fjpg") no-repeat left center;
        a{
            text-decoration: none;
            color:#535353;
            font-family: microsoft yahel "黑体"，Arial,Simsun,"Arial Unicode MS",Mingliu,Helvetica;
        }
    }
    
}

  1. Less中的注释：

    • //： 以//开始的注释，不会被编译到css文件中
    • /**/：以/**/包裹的注释会被编译在css的文件中

正确使用less

  1. 如何正确使用less：less文件只有在被编译后才能够被浏览器识别使用

  2. less编译工具

    • Koala：国人开发的全平台的LESS编译工具。
    • WinLess：Windows下的LESS编译软件
    • CodeKit：MAC平台下的LESS编译软件

  3. 客户端调试方式

    • 首先引用.less文件：注意引用时使用link引入，然后将rel属性设置为rel="stylesheet/less"
    • 然后引用less.js：注意：引入普通js引入方式一致，但是一定要放在less样式文件之后

变量（variables）

  1. 普通的变量

    • 变量的定义方式 @
    • 由于变量只能使用一次，实际上他们就是”常量“
    • 实例：
1
2
3
4
5
6
7
8
9
//less编写
@green:green;
@babel:white;
header,footer{
  background:@green;
  h2{
    color:@babel
  }
}
1
2
3
4
5
6
7
/*编译结果*/
header,footer{
  background:green;
}
header,footer h2{
    color:white
}

  1. 作为选择器和属性名

    • 使用时变量以@{变量名}的方式使用
    • 实例
1
2
3
4
5
@mySelect:width;
.@{mySelect}{
    @mySelect:960px;
    height:500px;
}
1
2
3
4
5
/*编译后结果*/
.width{
    width:960px;
    height:500px;
}

  1. 作为URL

    • 使用时，使用""将变量的值括起来，使用时同样将变量以@{变量名}的方式使用
    • 实例
1
2
3
4
5
//less编写
@myUrl: "http://www.baidu.com/img"
body{
    background:url("@{myUrl}/logo.png");
}
1
2
3
4
/*编译结果*/
body{
    background:url("http://www.baidu.com/img/logo.png");
}

  1. 延迟加载

    • 变量是延迟加载的，在使用之前不一定要预先声明
    • 意思：变量使用可以在该变量定义之前

  1. 定义多个相同名称的变量时

    • 在定义一个变量多次时，只会使用最后定义的变量，Less会从当前作用域中向上搜索，这个行为类似于Css的定义中始终使用最后定义的属性值。

    • 例子

1
2
3
4
5
6
7
8
9
10
11
//less编译
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
1
2
3
4
5
6
7
/*编译结果*/
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

Mixins

什么是混合

混合就是一种将一系列属性从一个规则引入到另一个规则集的方式。

  1. 普通混合
1
2
3
4
5
6
.border{
    border:1px solid #000;
}
.div{
    .border
}
1
2
3
4
5
6
7
/*编译后*/
.border{
    border:1px solid #000;
}
.div{
    border:1px solid #000;
}
  1. 不带输出的混合
1
2
3
4
5
6
7
.border(){
    border:1px solid #000;
}

.div{
    .border
}
1
2
3
4
/*编译后*/
.div{
    border:1px solid #000;
}
  1. 带选择器的混合
1
2
3
4
5
6
7
8
.my-hover-mixin{
    &:hover{
        border:1px solid #000;
    }
}
button{
    .my-hover-mixin()
}
1
2
3
4
5
6
7
/*编译后*/
.my-hover-mixin:hover{
    border:1px solid #000;
}
.button:hover{
    border:1px solid #000;
}
  1. 带参数的混合
1
2
3
4
5
6
.my-hover-minxi(@color){
    border:1px solid @color;
}
.div2{
    .my-hover-minxi(#f00)
}
1
2
3
4
/*编译结果*/
.div2{
    border:1px solid #ff0000;
}
  1. 带有参数并且有默认值
1
2
3
4
5
6
.my-hover-minxi(@color:red){
    border:1px solid @color;
}
.div2{
    .my-hover-minxi
}
1
2
3
4
/*编译结果*/
.div2 {
  border: 1px solid #ff0000;
}
  1. 带多个参数的混合

  • 什么是多参数

    • 一个组合可以带多个参数，参数之间可以用分号或者逗号分隔
    • 但是推荐使用分号分隔，因为逗号符号有两个意思。它可以解释为Mixins的分隔符和Css的列表分隔符

  • 官方阐述

    • 两个参数，并且每个参数都是逗号分隔的列表：name(1,2,3;something,ele)
    • 三个参数，并且每个参数都包含一个数字：name(1,2,3)
    • 使用伪造的分号创建mixin，调用的时候参数包含一个逗号分隔的css列表：name(1,2,3;)
    • 逗号分隔默认值：.name(@param1:red,blue)
1
2
3
4
5
6
7
8
9
10
11
.mixin(@color;@padding:xxx;@margin:2){
	color-3:@color;
	padding-3:@padding;
	margin:@margin @margin @margin @margin;
}
.divsss{
	.mixin(red;);
}
.divssss{
	.mixin(1,2,3);
}
1
2
3
4
5
6
7
8
9
10
11
/*编译后*/
.divsss {
  color-3: #ff0000;
  padding-3: xxx;
  margin: 2 2 2 2;
}
.divssss {
  color-3: 1;
  padding-3: 2;
  margin: 3 3 3 3;
}
  • 结论：
    • 如果传参的括号里面全都是以“,”分隔，那么会依次传给各个参数值
    • 如果传参的括号里面既有”,”，又有“;”，那么会将每个分号前面的参数当成一个整体传给各个参数值
  1. 命名参数
  • 什么是命名参数
    • 引用Mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都可以通过它的名称来引用，这样就不洗按照任意特定的顺序使用参数。
1
2
3
4
5
6
7
8
9
10
11
12
.mixin2(@color:black;@margin:10px;@padding:20px){
	color:@color;
	margin:@margin;
	padding:@padding;
}

.class1{
	.mixin2(@margin:20px;@color:#33acfe);
}
.class2{
	.mixin2(#33acfe;@padding:40px);
}
1
2
3
4
5
6
7
8
9
10
11
/*编译后*/
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #33acfe;
  margin: 10px;
  padding: 40px;
}
  1. @arguments变量
  • 什么是@argunebts变量
    • @arguments：代表所有可变参数是，参数的先后顺序就是你的()括号内的参数的先后顺序
    • 注意：在使用的赋值，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，…以此类推。但是需要注意的是假如我想给第一个和第三个赋值时，你不能写(值1,,值3)，必须把原来的默认值写上去！
1
2
3
4
5
6
.border5(@x:solid;@c:red){
	border:21px @arguments;
}	
.div198209{
	.border5()
}
1
2
3
4
/*编译后*/
.div198209 {
  border: 21px solid #ff0000;
}
  1. 匹配模式
  • 匹配模式
    • 说明：传值的时候定义一个字符，在使用的时候使用那个字符，就调用那条规则。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.border7(all,@w:5px){
	border-radius:@w;
}
.border7(t_l,@w:5px){
	border-top-left-radius:@w;
}
.border7(t_r,@w:5px){
	border-top-right-radius:@w;
}
.border7(b_l,@w:5px){
	border-bottom-left-radius:@w;
}
.border7(b_r,@w:5px){
	border-bottom-right-radius:@w;
}
.div34{
	.border7(all);
}
.div35{
	.border7(t_l,10px);
}
.div36{
	.border7(b_l,6px);
}
1
2
3
4
5
6
7
8
9
10
/*编译后*/
.div34 {
  border-radius: 5px;
}
.div35 {
  border-top-left-radius: 10px;
}
.div36 {
  border-bottom-left-radius: 6px;
}
  1. 得到混合中变量的返回值
1
2
3
4
5
6
7
.average(@x,@y){
	@average:((@x + @y)/2);
}
.dddd{
	.average(5px,7px);
	padding:@average;
}
1
2
3
4
/*编译后*/
.dddd {
  padding: 6px;
}
  1. 将规则集传递给Mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#space{
	.importer-1(){
		@detached:{scoped-detached:@variable;};
	}
}

.importer-2(){
	@variable:value;
	#space > .importer-1();
}
.use-place{
	.importer-2();
	@detached();
}
1
2
3
4
/*编译结果*/
.use-place {
  scoped-detached: value;
}

嵌套规则（nested-rules）

  1. 什么是嵌套规则：嵌套规则它模仿了HTML的结构，让我们的css代码更加简洁明了清晰。

  2. 传统css

1
2
3
4
5
6
7
8
9
10
11
12
header{
    width: 96px;
}
header h1{
    font-size: 18px;
    color:green;
}
header .logo{
    width: 300px;
    height: 150px;
    background:darkred;
}
  1. less写法
1
2
3
4
5
6
7
8
9
10
11
12
header{
    width: 960px;
    h1{
        font-size: 18px;
        color:green;
    }
    .logo{
        width: 300px;
        height: 150px;
        background: darkblue;
    }
}
  1. 父元素选择器：&

  • &说明：表示当前选择器的所有父选择器

  • 实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*父元素选择器：&*/
.header{
    width: 960px;
    h1{
        font-size: 18px;
        color:green;
    }
    .logo{
        width: 300px;
        height: 150px;
        background: darkblue;
        &:hover{
            background: darkred;
        }
    }
}
1
2
3
4
5
6
7
8
9
/*编译结果*/
.header .logo {
  width: 300px;
  height: 150px;
  background: darkblue;
}
.header .logo:hover {
  background: darkred;
}
  1. 改变选择器的顺序

  • 说明：：将&放到当前选择器之后，就会将当前选择器插入到所有的父选择器之前。

  • 实例

1
2
3
4
5
6
7
ul{
	li{
		.content &{
			color:red;
		}
	}
}
1
2
3
4
/*编译结果*/
.content ul li {
  color: red;
}

6.组合使用生成所有可能的选择器列表

1
2
3
4
5
6
p,a,ul,li{
	border:1px solid #000;
	& &{
		border:none;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*编译结果*/
p,
a,
ul,
li {
  border: 1px solid #000;
}
p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  border: none;
}

运算（operations）

  1. 运算说明：任何数值，颜色和变量都可以进行运算
  2. 数值型运算：
    • less会为你自动推断数值的单位，所以你不必为每一个值都加上单位
    • 注意：运算符与值之间必须以空格分开，涉及优先级时以()进行优先级运算
    • 实例
1
2
3
4
5
6
7
8
9
10
.wp {
  background: green;
  width: 900px;
  height: 800px;
}
//涉及优先级
.wp1{
   background:green;
   width:(950px-50)*2;
}
1
2
3
4
5
6
7
8
9
10
11
/*编译结果*/
.wp {
  background: green;
  width: 900px;
  height: 800px;
}
/*涉及优先级*/
.wp1 {
  background: green;
  width: 1800px;
}
  1. 颜色运算

  • less在运算时，先将颜色转换为rgb模式，然后在转换为16进行的颜色值并返回

  • 实例

1
2
3
.content{
    background:#000000+21;
}
1
2
3
4
/*编译结果*/
.wp2 {
  background: #151515;
}
  • 注意是在转换为rgb模式，我们知道rgb的取值范围是0~255，所以我们计算的时候不能超过这个区间，超过后默认使用最大值255计算！

函数（functions）

  1. 函数介绍：Less中提供了许多用于转换颜色、处理字符串和进行算术运算的函数，这些函数使用起来非常方便。

  2. 最常见的rgb()函数，将rgb模式的值转换为16进制的值。

命名空间

  1. 什么是命名空间：将一些需要的混合组合在一起，可以通过嵌套多层id或class来实现

  2. 例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#bgcolor(){
	background:#ffffff;
	.a{
		color:#888888;
		&:hover{
			color:#FF6600;
		}
		.b{
			background:#ff0000;
		}
	}
}
.bgcolor1{
	background:#fdfee0;
	#bgcolor>.a;
}
.bgcolor2{
	#bgcolor>.a>.b
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*编译结果*/
.bgcolor1 {
  background: #fdfee0;
  color: #888888;
}
.bgcolor1:hover {
  color: #FF6600;
}
.bgcolor1 .b {
  background: #ff0000;
}
.bgcolor2 {
  background: #ff0000;
}

作用域

Less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，以此类推。

引入（important）

  1. 什么是引入：你可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用。

关键字（important）

  1. important关键字提高css的优先级

  2. 案例：

1
2
3
4
5
6
7
8
9
10
.foo(@bg:#f5f5f5,@color:#900){
    background:@bg;
    color:@color;
}
.unimportant{
    .foo()
}
.important{
    .foo() !important;
}
1
2
3
4
5
6
7
8
9
/*编译结果*/
.unimportant {
  background: #f5f5f5;
  color: #990000;
}
.important {
  background: #f5f5f5 !important;
  color: #990000 !important;
}

条件表达式

  1. 带条件的混合

    • 比较运算符 ： >、>=、<、<=、=、true
    • 例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.mixin(@a) when(lightness(@a) >= 50%){
	background-color:black;
}
.mixin(@a) when(lightness(@a) < 50%){
	background-color:white;
}
.mixin(@a){
	color:@a;
}
.class1{
	.mixin(#ddd);
}
.class2{
	.mixin(#555);
}
1
2
3
4
5
6
7
8
9
/*编译结果*/
.class1 {
  background-color: black;
  color: #dddddd;
}
.class2 {
  background-color: white;
  color: #555555;
}
  1. 类型检查函数

  • 可以基于值的类型匹配函数

    • iscolor
    • isnumber
    • isstring
    • iskeyword
    • isurl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mixin1(@a) when(iscolor(@a)){
	background-color:black;
}
.mixin1(@a) when(isnumber(@a)){
	background-color:white;
	shuzi:shuzi;
}
.mixin1(@a){
	color:@a;
}
.class3{
	.mixin1(#ddd);
}
.class4{
	.mixin1(12);
}
1
2
3
4
5
6
7
8
9
.class3 {
  background-color: black;
  color: #dddddd;
}
.class4 {
  background-color: white;
  shuzi: shuzi;
  color: 12;
}
  1. 单位检查函数

  • 检查一个值除了数字是否一个特定的单位

    • ispixel
    • ispercentage
    • isem
    • isunit

循环

在less中，混合可以调用自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。

1
2
3
4
5
6
7
8
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}
1
2
3
4
5
6
7
.div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

合并属性

  1. 说明：在需要合并的属性的:前面加上+就可以完成合并，合并以,分割
1
2
3
4
5
6
7
.mixin3(){
   box-shadow+:insert 0 0 10px #555;
}
.myclass{
   .mixin3();
   box-shadow+:0 0 20px black;
}
1
2
3
.myclass {
  box-shadow: insert 0 0 10px #555, 0 0 20px black;
}
  1. 说明：在需要合并的属性的:前面加上+_就可以完成合并，合并以空格分割
1
2
3
4
5
6
7
.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}
1
2
3
.myclass {
  transform: scale(2) rotate(15deg);
}

函数库

  1. 其他函数

    • color()函数：解析颜色，将代表颜色的字符串转换为颜色值
    • convert()函数：将数字从一种类型转换到另一种类型
    • data-url()函数：将一个资源内嵌到文件
    • default()函数：只能在边界条件中使用，没有匹配到其他自定义函数（mixin）的时候返回True，否则返回false
    • unit()函数：移除或者改变属性值的单位

  2. 字符串函数和长度相关函数

    • escape()函数：将输入字符串中的url特殊字符进行编码处理。

    • e()函数：Css转义，用~”值”符号代替。

    • %()函数：函数%(string,arguments)格式化一个字符串。

    • replace()函数：用另一个字符串替换文本。

    • length()函数：集合中的值的条数

    • extract()函数：返回集合中指定索引的值

  3. 数学函数

    • ceil()函数：向上取整
    • floor()函数：向下取整
    • percentage()函数：将浮点数转换为百分数
    • round()函数：取整和四舍五入
    • sqrt()函数：计算一个数的平方根，保持原样单位
    • abs()函数：计算一个数的绝对值，保持原样单位
    • sin()函数：正弦函数
    • asin()函数：反正弦函数
    • cos()函数：余弦函数
    • acos()函数：反余弦函数
    • tan()函数：正切函数
    • atan()函数：反正切函数
    • pi()函数：Π
    • pow()函数：乘方运算
    • mod()函数：取余函数
    • min()函数：最小值运算
    • max()函数：最大值运算

  4. 类型函数

    • isnumber()函数：判断参数是否是一个数值
    • isstring()函数：判断参数是否是一个字符串
    • iscolor()函数：判断参数是否是一个颜色值
    • iskeyworld()函数：判断参数是否是一个关键字
    • isurl()函数：判断参数是否是一个url
    • ispixel()函数：判断参数的值是否带有像素的单位
    • isem()函数：判断参数的值是否带有em的单位
    • ispercentage()函数：判断参数的值是否为百分数
    • isunit()函数：判断参数的值是否带有单位

  5. 颜色值定义函数

    • rgb()函数：创建不透明的颜色对象
    • rgba()函数：创建带alpha透明颜色
    • argb()函数
    • hsl()函数
    • hsla()函数
    • hsv()函数
    • hsva()函数

  6. 颜色值通道函数

    • hue()函数：hsl中的h的提取
    • saturation()函数：hsl中s的提取
    • lightness()函数：hsl中l的提取
    • hsvhue()函数；hsv中h的提取
    • hsvsaturation()函数：hsv中s的提取
    • hasvalue()函数：hsv中v的提取
    • red()函数：提取红色
    • green()函数：提取绿色
    • blue()函数：提取蓝色
    • alpha()函数：提取透明度
    • luma()函数：亮度的百分比表示法
    • luminance()函数：计算没有伽马校正的亮度值

  7. 颜色值运算函数

    • saturate()函数：增加一定数值的饱和度
    • desaturate()函数：降低一定数值的饱和度
    • lighten()函数：增加一定数值的亮度
    • darken()函数：减少一定数值的亮度
    • fadein()函数：降低颜色透明度
    • fadeout()函数：增加颜色透明度
    • fade()函数：给颜色设置一定数值的透明度
    • spin()函数：任意方向旋转颜色的色相角度
    • mix()函数：根据比例混合两种颜色，包括计算不透明度
    • greyscale()函数：完全移除颜色的饱和度，与desaturate(@color,100%)函数效果相同
    • contrast()函数：选择两种颜色比较，得出哪种颜色的对比度最大就倾向于对比度最大的颜色

  8. 颜色值混合函数

    • multiply()函数
    • screen()函数
    • overlay()函数
    • softlight()函数
    • hardlight()函数
    • difference()函数
    • exclusion()函数
    • average()函数
    • negation()函数