基础知识

# 变量

很简单就是前面加个@就行,注意字母开头，数字开头无限，不要使用特殊符号

<style lang='less'>
@width:250px;
@h:@width*2;
div{
  width: @width;
  height: @h;
  border: 1px red solid;
}

</style>

1
2
3
4
5
6
7
8
9
10

# 嵌套

<template>
<div>我是小雨
  <p>woshidayu</p>
</div>

</template>
<style lang='less'>
@width:250px;
@h:@width*2;
div{
  width: @width;
  height: @width;
  border: 1px red solid;
  p{
    color: green;
  }
}

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

很简单，子元素直接在父元素里面写就好了，真的是太方便了，啊哈哈哈

# 伪元素

伪元素就不能这么写了，前面的写法翻译成css其实就是加了一个空格

伪元素应该是&:hover &::before

h1+p{
    color: green;
    &:hover{
      color: hotpink;
    }
  }

1
2
3
4
5
6

# 运算

支持+ - * /

注意-号的时候要空格先，因为系统会把它判定成横线

width:50px + 5;
width:50px - 5;
width:50px * 5;
width:50px / 5;

1
2
3
4

# 注意点

1.两个数参与运算，如果都有单位，而且单位不一样，那么以第一个单位为准

2.所有符号，前后加空格

3.做除法的时候前后要用括号括起来，不然会判断你有两个值width: (@width / 5);

编辑

上次更新: 2021/08/13, 23:21:49

← 前期准备 swiper→