Less常见用法

发表于 | 分类于 |
字数统计 1.4k | 阅读时长 6

less常见用法

最近在写组件库，对Less的用法感觉很多都生疏了，所以去看了下官方文档跟掘金～ 整理一篇笔记出来

定义常量（只能定义一次，不能重复使用）

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@color: #999;
@bgColor: skyblue
@width: 50%;

#wrap{
    color: @color;
    background: @bgColor
}


// 选择器变量（@{}使用）
@mySelector: #wrap;
@Wrap: wrap;

@{mySelector}{  // 变量名必须使用打括号包裹起来
    color: @color;
    background: @bgColor
}



// 属性变量 （直接使用）
@borderStyle: border-style;
@Solid: solid;
#wrap{
 @{borderStyle}: @Solid;  // 变量名 必须使用大括号包裹 
}


// url变量（@{}）
@images: '../img/dog.png'
body{
    background: url("@{images}");   // 大括号包裹
}


// 声明变量
// 结构 @name{属性: 值};
// 使用 @name();
@background:{background:red;};
#main{
    @background();
}

变量运算

  • 加减法时，以第一个数据的单位为基准
  • 乘除法时 注意单位一定要统一单位统一

嵌套用法

&：代表上一层选择器的名字

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#main {
    @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;
    }
}

默认参数写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border: 1px solid @color;
    box-shadow: @argumengts;    // 指代全部参数
}

#main {
    .border(0px,5px,30px,red);   // 必须带着单位
}
#wrap {
    .border(0px);    
}
#content{0
    .border;    // 等价于 .border();
}


// 数量不定参数
.boxShadow(...){  
    box-shadow: @arguments; 
}

方法匹配模式

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
29
30
31
32
/* 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)
}

// 匹配规则
// 第一个参数left要会找到方法中匹配程度最高的，如果匹配程度相同则将全部选择，并存在着样式覆盖替换
// 如果匹配的参数是变量，则将会匹配如@_.

/* 生成的 CSS */
#main{
  border-color:transparent  transparent  transparent #999;
  border-style: solid;
  border-width: 50px;
}

方法的条件筛选

Less没有if和else，可是他有when

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#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;
    }
}

方法使用!important 会给属性都加上!important。

循环方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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%;
}

属性拼接方法

+_代表的是空格，+ 代表的是逗号

  • 逗号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* Less */
    .boxShadow() {
        box-shadow+: inset 0 0 10px #555;
    }
    .main {
      .boxShadow();
      box-shadow+: 0 0 20px black;
    }
    /* 生成后的 CSS */
    .main {
      box-shadow: inset 0 0 10px #555, 0 0 20px black;
    }

  • 空格

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* Less */
    .Animation() {
      transform+_: scale(2);
    }
    .main {
      .Animation();
      transform+_: rotate(15deg);
    }

    /* 生成的 CSS */
    .main {
      transform: scale(2) rotate(15deg);
    }

继承

extend 是 Less的一个伪类。它可以继承所匹配声明中的全部样式

extends 关键字使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.animation{
    transition: all .3s ease-out;
    .hide{
        transform: scale(0);
    }
}

#main{
    &:extend(.animation)
}

#con{
    &:extend(.animation .hide)
}

// 输出
.animation,#main{
    transition: all 0.3s ease-out;
}

.animation .hide, #con {
    transform: scale(0);
}

all全局搜索替换

使用选择器匹配到的全部声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#main{
    width: 200px;
}

#mian{
    &:after{
        content: 'Less is good!';
    }
}
#wrap:extends(#main all){}

/*生成的CSS */
#main,#wrap{
    width: 200px;
}

#main:after, #wrap:after{
    content: 'Less is good!'; 
}

导入

  1. 省略文件后缀
    1
    import 'main';    // import 'main.less'
  2. @import 的位置可以随意放置
    1
    2
    3
    4
    5
    #main{
        font-size: 15px;
    }

    @import 'style'
  3. reference 引入外部文件，但不会把导入的文件编译到最终输出中，只引用
    1
    @import (reference) 'bootstrap.less';
  4. once @import语句的默认行为。表明相同文件只会被导入一次，而随后的导入文件重复的代码都不会被重复解析
    1
    2
    @import (once) "foo.less";
    @import (once) "foo.less";      // 不会被重复解析
  5. multiple 使用@import(multiple)允许导入多个同名文件
    1
    2
    3
    4
    5
    .a{
        color: green;
    }
    @import (multiple) 'foo.less';
    @import (multiple) 'foo.less';

其他

避免编译

结构 ~’ 值 ‘

1
2
3
4
5
6
7
8
#main{
    width: ~'calc(300px-30px)';
}

// 生成的css
#main{
    width: calc(300px-30px);
}

变量拼串

在下面例子中， 实现了不同的 transtion-delay、animation、@keyframes；

结构： ~’字符@{变量}字符’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.judge(@i) when(@i=1){
  @size:15px;
}
.judge(@i) when(@i>1){
  @size:16px;
}
.loopAnimation(@i) when (@i<16) {
  
  .circle:nth-child(@{i}){
      .judeg(@i);
      border-radius:@size @size 0 0;
      animation: ~"circle-@{i}" @duration infinite @ease;
      transition-delay:~"@{i}ms";
  }
  @keyframes ~"circle-@{i}" {
      // do something...
  }
  .loopAnimation(@i + 1);
}

使用JS

Less是由JS编写的

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
/* 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";
}
-------------本文结束感谢您的阅读-------------