1月6日 ~ 1月20日每日n个知识点之less的使用

什么是less

less是一门预处理语言
文档网址：less文档
在 Node.js 环境中使用 Less ：

npm install -g less

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

基础认知

css与less比较：

less可以对css样式进行层级嵌套
就像html一样
这样使得代码管理更加方便美观效率高
注意要在vue中<style lang="less">

css：

<template>
  <div id="app">
    <div id="d1">
      <div id="d2"></div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
  #app{
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100vh;
    width: 100vw;
  }
  #d1{
    height: 500px;
    width: 400px;
    background-color: aqua;
  }

  #d2{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: brown;
  }
</style>

less:

<template>
  <div id="app">
    <div id="d1">
      <div id="d2"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
#app {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
  #d1 {
    height: 500px;
    width: 400px;
    background-color: aqua;
    #d2 {
      height: 200px;
      width: 200px;
      border-radius: 50%;
      background-color: brown;
    }
  }
}
</style>

嵌套注意点

使用伪元素时要在伪元素前加一个&表示连接

#app{
	height:100px;
	&:hover{
		height:500px;
	}
}

less注释

/ * 多行注释 * /
//单行注释
个人看法，无需了解，只要知道多行注释编译成css可以看到，单行注释编译后不可见就行，现在谁还手打注释符号（后端文档注释还是手打一下），都用ctrl+/快捷键了

less变量

1.属性值变量写法

@color:#fff;

#app{
background-color: @color;
}

2.属性变量和选择器变量写法(基本不用，除非你懒)

@selector:#app;
@bc:background-color;

@{selector}{
	@{bc}: @color;
}

变量遵守覆盖

例子

<style lang="less">
@color:#ddd;
#app {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
  #d1 {
    height: 500px;
    width: 400px;
    background-color: aqua;
    #d2 {
      @color:rgb(206, 96, 96);
      height: 200px;
      width: 200px;
      border-radius: 50%;
      background-color: @color;
    }
  }
}
</style>

less混合

混合就是在其他选择器中使用某个选择器中定义的属性以达到复用

1.普通混合

编译成css中可见

#app1{
	background-color: #ddd;
}

.class{
	#app1();
}

这时候相当于

.class{
	background-color: #ddd;
}

2.无参混合

编译成css不可见

#app1(){
	background-color: #ddd;
}

.class{
	#app1();
}

3.带参数混合

#app1(@color){
	background-color: @color;
}

.class{
	#app1(#ddd);
}

4.命名参数混合

#app1(@color){
	background-color: @color;
}

.class{
	#app1(@color:#ddd);
}

5.“匹配”混合

我不知道这个有什么专业的名称，单纯是因为符合标识匹配的思想
所以我这样称呼

#app1(A,@a){
	border-radius: @a 2px 2px 5px;
}
#app1(B,@a){
	border-radius: 2px @a 2px 5px;
}
#app1(C,@a){
	border-radius: 2px 2px @a 5px;
}

.class{
	#app1(B,10px);
}

less运算

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  
// 结果是 calc(50% + (25vh - 20px))

#app{
	height:200+50px;
}

或者

#app{
	height:calc(200px + 50px);
}

less转义

你也可以看出变量的一种
没啥用

less函数

看了一下官方文档，感觉这个功能正常人应该不会用，开发出来可能是因为作者想要装B，实在是没啥用
但是还是给一下官方文档：
less官方函数

less命名空间和访问符

为了以后方便重用或分发，可以将要用的放在#bundle下进行管理
我个人的看法是可以有但也可以不用，看个人习惯了，等于就是弄个对象把方法放在里面或者是说Java类的概思想

#bundle(){
	#app{
	height:50px
	}
}

#use{
	#bundle #app();
}

less映射

就是获取类的一个属性
语法上：混合[属性名]

#app{
	height:50px;
	width:100px;
}
#use{
	height:500px;
	#app[width];
}

导入

就是在一个less文件中导入另一个less文件或其他文件达到使用的效果
如果是less文件就可以省略.less后缀，否则不行

@import "first.css";
@import "second"