# 三、基础语法

# 注释

  • /**/这个注释可以在css中使用,也可以在less中使用
  • // 这个注释可以在less中使用,但是因为css不支持,所以这种类型的注释是没有办法编译到css文件中的

# 变量(variable)

  • 变量允许我们定义一系列通用的样式,在需要的时候去调用,这样在修改的时候只需要修改全局的变量就可以了,十分的方便。
  • 规则:less 变量以@作为前缀,不能以数字开头, 不能包含特殊字符。
  • 使用:
/*定义了一个变量*/
@mainColor:#ff4400;
/*使用变量*/
a:hover{
  color:@mainColor;
}

p{
  border: 1px solid @mainColor;
}

/*也可以进行变量的拼接*/
@left:left;
/*拼接使用的时候要大括号包住*/
border-@{left}: 1px solid @mainColor;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Mixin混入

什么是混入,这个是在bootstrap中经常看到的一个东西。混入可以将定义好的class A轻松的引入到class B中,从而简单实现class B继承所有class A的属性。 定义的时候前面要加点.

# 类名混入

假如我定义了一个button1,按钮中有一些属性,我在别的地方又有一个button2,要加上这个button1的属性和一些别的属性,如果按照css的方式我要重新写一遍,那我用Less就可以进行混入。 来上代码:

/*原来的按钮的一些属性和别的属性*/
.button1{
    width:200px;
    height: 50px;
    background: #fff;
}

.btn_border{
    border: 1px solid #ccc;
}

.btn_danger{
    background: red;
}

.btn_block{
    display: block;
    width: 100%;
}

/*对css类的样式进行混入*/
.button2{
    .button1();
    .btn_border();
    .btn_danger();
    .btn_block();
}

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
26
27
28

# 函数混入

上面的混入有一些不好的地方,编译的时候还是全部都编译进去了,button1里面的东西button2里面全部都有,只是写的时候简洁了而已。这个时候可以混入函数。(具体的函数知识在后面写的)

.button1(){
    width:200px;
    height:200px;
    background: #fff;
}

.btn_border(){
    border:1px solid #ccc;
}

.button2{
    .button1();
    .btn_border();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这样这里面的.button1.btn_border都不会显示到css文件之中去,可以降低css中的代码冗余。但是如果我要对样式的具体值进行改变呢,就涉及到参数了

# 带参数的函数混入

注意:在定义参数要传入默认值,如果没有默认值,调用的时候必须要传入值,如下:

/*下面的如果定义和使用的时候都没有传值,less这样会报错*/
.btn_border(@len){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}
1
2
3
4
5
6
7
8
9

两种解决方案

1.在定义的时候传入默认值

/*1.在定义的时候传入默认值*/
.btn_border(@len:10px){
    border:1px solid #ccc;
    border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border();
}

/*如果是上面的写法,最终的border-radius是10px*/
.btn_b{
    .btn();
    .btn_border(20px);
}
/*如果调用的时候传入参数了,最终是20px*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.定义的时候没有默认值,在调用的时候传入值

.btn_border(@len){
    border:1px solid #ccc;
    border-radius:@len;
    -webkit-border-radius:@len;
    -moz-border-radius:@len;
    -ms-border-radius:@len;
    -o-border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border(10px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 嵌套

嵌套可以增强代码的层级关系,我们也可以通过嵌套来实现继承,这样很大程度减少了代码量,代码量看起来更加清晰。

.nav{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color:#666;
    a {
        color:#666;
    }
    > .container{
        line-height: 40px;
        text-align: center;
        > div{
        height:40px;
            ~ div{
            border-left:1px solid #ccc;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这个时候要注意一个问题,就是如果在写伪元素、交集选择器的时候,就会出现问题,直接写嵌套中间会默认的加上空格。那么如何拼接上去呢?

/*下面就是如何书写伪元素和交集选择器的写法,前面要加&*/
.nav{
      font-size:12px;
      &:hover{
            text-decoration:none;
      }
      &::before{
            content:"";
      }
}
1
2
3
4
5
6
7
8
9
10

# Import(引用)

less写文件的时候,可以一个模块写一个less,但是index.html里面都要引用,引用那么多个less文件就不合适了,这个时候就要建立一个总的less,这是有一种解耦的开发思想,"高内聚,低耦合"。

下面来梳理一下结构:

<less里面所需要的模块>

  • 变量
  • 函数
  • 功能模块(视自己的情况而定)
  • 总(引用变量、函数、功能模块)

首先在index.less中引入

/*index.less*/
@import "variable.less";      /*引入变量,后面可以加后缀*/
@import "mixin.less";         /*引入函数*/
@import "topBar.less";        /*引入功能模块1*/
@import  "navBar.less";       /*引入功能模块2*/
1
2
3
4
5

index.html中值需要引入一个index.less即可

# 函数(内置函数和运算)

js中有两种定义函数的方式

    1. function fun(){ }
    1. var fun = function(){ }

# less中定义函数

直接运算

a{
    color:red/2;     /*结果是#800000*/
}

li{
    width:100%/7;  /*每个li标签的宽度都是ul的1/7 */
}
1
2
3
4
5
6
7

利用.开头定义,使用的时候也是.函数名()

.a(@len:12){
    width:100%/@len;
    color:lighten(#ddd,10%);   /*亮度提高10%,结果是#f7f7f7*/
}

col-xs-1{
    .a();
}
1
2
3
4
5
6
7
8

# 内置函数

具体的有 函数手册 (opens new window)

注意:含*号的函数只在1.4.0 beta以上版本中可用!!

# 字符串函数
  • escape(@string); // 通过 URL-encoding 编码字符串
  • e(@string); // 对字符串转义
  • %(@string, values...); // 格式化字符串
# 综合类函数
  • unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
  • color(@string); // 将字符串解析为颜色值
  • * data-uri([mimetype,] url); // * 将资源内嵌到css中,可能回退到url()
# 算数函数
  • ceil(@number); // 向上取整
  • floor(@number); // 向下取整
  • percentage(@number); // 将数字转换为百分比,例如 0.5 -> 50%
  • round(number, [places: 0]); // 四舍五入取整(第二位是精度)
  • * sqrt(number); // 计算数字的平方根(参数可以带单位)
  • * abs(number); // 数字的绝对值(参数可以带单位)
  • * sin(number); // sin函数(没有单位默认弧度值)
sin(1deg);   //1角度角的正弦值   0.01745240643728351
sin(1grad);  //1百分度角的正弦值   0.015707317311820675
/*百分度是将一个圆周分为400份,每份为一个百分度,英文gradian,简写grad*/
1
2
3
  • * asin(number); // arcsin函数
    • 参数-11之间的浮点数,返回值弧度为单位,区间在-PI/2PI/2 之间,超出范围输出NaNrad
  • * cos(number); // cos函数
    • sin函数一样
  • * acos(number); // arccos函数
    • 参数-11之间的浮点数,返回值弧度为单位,区间在 0PI 之间,超出范围输出NaNrad
  • * tan(number); // tan函数
    • sin函数一样
  • * artan(number); // arctan函数
    • 返回值区间在 -PI/2PI/2 之间,其余和arsin一样
  • * pi(); // 返回PI
  • * pow(@base, @exponent); // 返回@base@exponent次方
    • 返回值和@base有相同的单位,第二个单位忽略,不符合规则返回NaN
  • * mod(number, number); // 第一个参数对第二个参数取余
    • 返回值与第一个参数单位相同,可以处理负数和浮点数
  • * convert(number, units); // 在数字之间转换
  • * unit(number, units); // 不转换的情况下替换数字的单位
# 颜色函数
  • color(string); // 将字符串或者转义后的值转换成颜色
    • 见综合函数
  • rgb(@r, @g, @b); // 转换为颜色值
    • 参数是整数0-255,百分比0-100%,转化为十六进制
  • rgba(@r, @g, @b, @a); // 转换为颜色值
    • 参数前三个是整数0-255,百分比0-100%,第四个是0-1或者百分比0-100%
  • argb(@color); // 创建 #AARRGGBB 格式的颜色值
    • 使用在IE滤镜中,以及.NETAndroid开发中
  • hsl(@hue, @saturation, @lightness); // 创建颜色值
    • 通过色相、饱和度、亮度三种值
    • @hue : 整数0-360 表示度数
    • @saturation : 百分比0-100% 或者数字 0 - 1
    • @lightness: 百分比0-100% 或者数字0 - 1
    • 返回值十六进制的颜色值
/*如果想使用一种颜色来创建另一种颜色的时候就很方便*/
@new: hsl(hue(@old),45%,90%);

/*这里@new 将使用@old 的色相值,以及它自己的饱和度和亮度*/
1
2
3
4
  • hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
  • hsv(@hue, @saturation, @value); // 创建颜色值
    • @hue 表示色相 , 整数0-360表示度数
    • @saturation 表示饱和度,百分比0-100% 或数字 0-1
    • @value 表示色调,百分比 0-100% 或数字 0-1
    • 创建不透明的颜色对象
hsv(90,100%,50%)

// 输出#408000
1
2
3
  • hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
  • hue(@color); // 从颜色值中提取 hue 值(色相)
    • 返回值0-360的整数
hue(hsl(90,100%,50%))

// 输出  90
1
2
3
  • saturation(@color); // 从颜色值中提取 saturation 值(饱和度)
    • 返回值 百分比0-100
saturation(hsl(90,100%,50%))

// 输出  100%
1
2
3
  • lightness(@color); // 从颜色值中提取 'lightness' 值(亮度)
    • 返回0-100的百分比值
lightness(hsl(90,100%,50%))

// 输出  50%
1
2
3
  • * hsvhue(@color); // 从颜色中提取 hue 值,以HSV色彩空间表示(色相)
    • 返回0-360的整数
  • * hsvsaturation(@color); // 从颜色中提取 saturation 值,以HSV色彩空间表示(饱和度)
    • 返回0-100百分比
  • * hsvvalue(@color); // 从颜色中提取 value 值,以HSV色彩空间表示(色调)
    • 返回0-100百分比
  • red(@color); // 从颜色值中提取 'red' 值(红色)
    • 返回整数0-255
  • green(@color); // 从颜色值中提取 'green' 值(绿色)
    • 返回整数0-255
  • blue(@color); // 从颜色值中提取 'blue' 值(蓝色)
    • 返回整数0-255
  • alpha(@color); // 从颜色值中提取 'alpha' 值(透明度)
    • 返回浮点数0-1
  • luma(@color); // 从颜色值中提取 'luma' 值(亮度的百分比表示法)
    • 返回百分比0-100%
# 颜色运算(Color operations)

颜色值运算有几点注意事项:

  • 参数必须单位/格式相同
  • 百分比将作为绝对值处理,10%增加10%,是20%而不是11%
  • 参数值只能在限定的范围内
  • 返回值的时候,除了十六进制外将其他格式做简化处理
  • saturate(@color, 10%); // 饱和度增加 10%
  • desaturate(@color, 10%); // 饱和度降低 10%
  • lighten(@color, 10%); // 亮度增加 10%
  • darken(@color, 10%); // 亮度降低 10%
  • fadein(@color, 10%); // 不透明度增加 10%,更不透明
  • fadeout(@color, 10%); // 不透明度降低 10%,更透明
  • fade(@color, 50%); // 设定透明度为 50%
  • spin(@color, 10); // 色相值增加 10
    • 向任意方向旋转颜色的色相角度,旋转范围是0-360,超过将从起点继续旋转,比如旋转360720是相同的结果。
    • 需要注意的是,颜色要通过 RGB 进行格式转换,这个过程不能保留灰色的色相值(灰色没有饱和度,色相值也就没有意义了),因此要通过函数保留颜色的色相值
    • 因为颜色值永远输出为RGB格式,因此spin()函数对灰色无效
  • mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
    • 第三个参数是平衡两种颜色的百分比,默认是50%
  • greyscale(@color); // 完全移除饱和度,输出灰色
    • desaturate(@color, 100%)效果相同
  • contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1luma 值 > 43% 输出 @darkcolor,否则输出 @lightcolor
    • 比较颜色的,比较复杂,等用到的时候再说吧
# 颜色混合(Color blending)

颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似,因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

  • multiply(@color1, @color2);
    • 分别将两种颜色的RGB三种值做乘法运算,然后再除以255,输出的结果是更深的颜色
    • 对应ps中的“变暗/正片叠底”
  • screen(@color1, @color2);
    • 结果是更亮的颜色,对应ps中的“变亮/滤色”
  • overlay(@color1, @color2);
    • 结合前面两个函数的效果,让浅的更浅,深的更深,类似于ps中的“叠加”
    • 第一个参数的叠加的对象,第二个参数是被叠加的颜色
  • softlight(@color1, @color2);
    • overlay效果相似,只是当纯黑色和纯白色作为参数的时候输出结果不是纯黑纯白,对应ps中的“柔光”
    • 第一个参数是混合色(光源),第二个参数是被混合的颜色
  • hardlight(@color1, @color2);
    • overlay效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,对应ps中的“强光/亮光/线性光/点光”
    • 第一个参数是混合色(光源),第二个参数是被混合的颜色
  • difference(@color1, @color2);
    • 从第一个颜色值中减去第二个,输出是更深的颜色,对应ps中的“差值/排除”
    • 第一个参数是被减的颜色对象,第二个参数是减去的颜色对象
  • exclusion(@color1, @color2);
    • 效果和difference函数效果相似,只是输出结果差别更小,ps中的“差值/排除”
    • 第一个参数是被减的颜色对象,第二个参数是减去的颜色对象
  • average(@color1, @color2); //对RGB三种颜色取平均值
  • negation(@color1, @color2);
    • difference函数效果相反,输出结果是更亮的颜色
    • 注意:效果相反不代表做加法运算
    • 第一个参数是被减的颜色对象,第二个参数是减去的颜色对象
# 判断函数
  • iscolor(@colorOrAnything); // 判断一个值是否是颜色
  • isnumber(@numberOrAnything); // 判断一个值是否是数字(可含单位)
  • isstring(@stringOrAnything); // 判断一个值是否是字符串
  • iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
  • isurl(@urlOrAnything); // 判断一个值是否是url
  • ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
  • ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
  • isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
  • * isunit(@numberOrAnything, "rem"); // 判断一个值是否是指定单位的数值
更新时间: 2021-02-25 00:05