less学习笔记

Less学习笔记

Less是一个css预处理器，Less文件后缀是.less。扩充了css语言，是css具备一定的逻辑性、计算能力。但是浏览器并不能识别Less代码，因此我们需要使用相应的vscode插件Easy LESS用来保存less文件后自动生成对应的css文件。

1、运算

Less的运算支持加、减、乘、除，但是只有加、减、乘是可以直接书写计算表达式，除法需要添加小括号

.box{
  width: 100 + 20px;
  width: 100 - 20px;
  width: 100 * 20px;
  width: (100 / 20px);	//推荐
  width: 100 ./ 20px;
}

如果表达式存在多个单位，以第一个单位为准。

2、嵌套

在Less中对于那些存在父子关系的盒子，我们可以通过嵌套的形式对样式进行编写修改，Easy LESS插件可以帮我们直接转化。

.father{
  color: red;
  .son{
    width: 100px;
    .a{
      color: green;
      &:hover{
        color: blue;
      }
    }
  }
}

.father{
  color: red;
}
.father .son{
  width: 100px;
}
.father .son a{
  color: green;
}
.father .son a:hover{
  color: blue;
}

3、变量

我们在Less中也可以定义变量，用于存储一些会反复使用到的属性值，增加代码复用率。

//定义变量
@myColor: pink;

//使用变量
.box{
	color: @myColor;
}

a{
	color: @myColor;
}

4、导入

我们使用Less时，几个文件之间会存在公共的部分，我们可以把公共的部分提取成为一个单独的Less文件，然后其他文件需要使用时可以直接把该文件直接导入使用。

@import '文件路径'

5、导出

我们使用Less时，需要有一定要求的导出时我们就需要使用out对导出Less文件进行相应的处理。

/*
	这是将Less文件导入mycss文件夹内，并生成名称位index的css文件
*/
//out: ./mycss/index.css

6、禁止导出

对于一些公共使用的Less文件，我们会导入到需要的文件内，因此我们对于这部分的Less文件其实可以不用导出，这时候我们就需要把它禁止导出。

//out: false