2020-02-19(less)

less简介

• less其实是一种编程语言，通过less编写类似于css的代码，最后编译成正常的css文件，给项目使用。
• 虽然说类似，但是功能上比css更强大，在css的基础上扩展了变量、函数、循环、继承等功能。
• 像这一类的语言，我们称为CSS预处理器。
  注：不能直接在浏览器引入使用，需要编译成css
• 带来的好处：代码更简洁，不需要考虑前缀，结构更清晰，更容易修改
• 还有什么常用的 CSS 预处理器：less，sass，stylus。

less功能

1，嵌套

• 我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
  类似于html的结构，通过嵌套，来表现父子级关系，不建议嵌套过多层（包含选择器：不推荐超过三层）

.box{
  .nav{
    border: 1px solid #000;
  }
}
--------------------------------------
.box .nav {
  border: 1px solid #000;
}

& —— 父选择器
.clearfix{
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}
----------------------------------
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.box{
  .warp &{
    width: 200px;
  }
}
----------------------------------
.warp .box {
  width: 200px;
}

2，变量
语法 [ @变量名：变量值; ]
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

@w:100px;

.box{
  width:@w;
}
------------------------
.box {
  width: 100px;
}

更多的变量使用方案
针对于属性值的，例如：图片引入地址

@imgurl:"../images";

.box1{
  background: url('@{imgurl}/1.jpg');
}
.box2{
  background: url('@{imgurl}/2.jpg');
}
.box3{
  background: url('@{imgurl}/3.jpg');
}
--------------------------------------------
.box1 {
  background: url('../images/1.jpg');
}
.box2 {
  background: url('../images/2.jpg');
}
.box3 {
  background: url('../images/3.jpg');
}
作为插入到一部分内容的变量，要包含在`{}`

针对选择器的

@box:box_one;

.@{box}{
  width: 100px;
}
------------------
.box_one {
  width: 100px;
}

变量使用注意事项

1. 变量的声明不是必须在使用前

div{
 width: @w;
}
@w:200px;
----------------------
div {
  width: 200px;
}

2. 变量名同作用域下不能重复，否则会被更改掉

@w:200px;
@w:300px;
div{
  width: @w;
}
-----------------------
div {
  width: 300px;
}

3. 作用域，less中，是有作用域的，作用域会影响当前的变量，在什么范围内是有效的，是否会替换

@w:300px;
.box1{
  @w:200px;
  width:@w;
}
.box2{
  width:@w;
}
---------------------------
.box1 {
  width: 200px;
}
.box2 {
  width: 300px;
}

混合

将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

• 无参数混合

.box{
  height: 200px;
  background: red;
}
.content{
  .box;//也可以是 .box()
}
----------------------------------------
.box {
  height: 200px;
  background: red;
}
.content {
  height: 200px;
  background: red;
}

传参混合

.box(@a,@b){
  height: @a;
  background: @b;
}
.content{
  .box(200px,red);
}
-------------------------
.content {
  height: 200px;
  background: #ff0000;
}

这种方式，对于数值方面更加自由，但是也有缺点，加了()的那个样式，会发现在css中没有出现。而且，如果使用的时候，不传入参数，会编译失败，这时候我们可以设置默认值

默认值设置

.box(@a:200px,@b:red){
  height: @a;
  background: @b;
}
.content{
  .box;
}
-------------------------------
.content {
  height: 200px;
  background: #ff0000;
}

arguments

.border(@w:2px,@s:solid,@c:red){
  border: @arguments;
}
.box{
  .border;
}
----------------------------------
.box {
  border: 2px solid #ff0000;
}

运算

css预处理器的强大，不止在于变量，还有超级好用的运算。
案例：在不使用怪异盒模型的情况下，设置一个padding为50，可视宽高为800 * 800的盒子

.box{
  width:800px - 50 * 2;
  height:800px - 50 * 2;
  padding:50px;
}
---------------------------
.box {
  width: 700px;
  height: 700px;
  padding: 50px;
}

运算符使用注意事项(加减乘除)
运算符的左右，都保留空格
运算的时候，最好包裹在()内
font 复合样式容易有问题哦
当运算数值具有单位时，需要注意：
一个单位：最终结果根据唯一的这个单位
两个单位：为第一个单位

Math 函数 http://lesscss.cn/functions

继承

继承是less中的一个伪类，它可以匹配当前继承中的所有样式，如果用混合，操作以下css样式

.box{
  width: 200px;
  height: 200px;
  .a{
    color: red;
  }
}
.box1{
  .box;
}
---------------------------------
.box {
  width: 200px;
  height: 200px;
}
.box .a {
  color: red;
}
.box1 {
  width: 200px;
  height: 200px;
}
.box1 .a {
  color: red;
}

混合中，也同样给.box1 下面的 .a添加了样式，但其实我想要的只是.box1

.box{
  width: 200px;
  height: 200px;
  .a{
    color: red;
  }
}
.box1:extend(.box){

}
--------------------------------------------
.box,
.box1 {
  width: 200px;
  height: 200px;
}
.box .a {
  color: red;
}

和混合的最终结果是一样的，但是在显示上面是有差别的，这里最终的显示会用群组选择器，另外，继承不能使用参数

判断

• 我可不是你想调用就能调用的混合，有些时候，我也是有条件的，通过when关键词，可以为设定条件调用

.box(@w) when(@w>0){
  width:@w;
}
.box1{
  .box(40px);
}
-------------------------------------
.box1 {
  width: 40px;
}

与

and可以连接两个条件，并且两个条件都需要满足，才可以添加后续样式

.box(@w,@h) when (@w>0) and (@h>0){
  width: @w;
  height: @h;
}
.box1{
  .box(100px,0px);
}

因为高不符合条件，所以并没有添加上样式。
(椰果和布丁我都要，不然我就不喝了)

或

`,`任何一个结果符合条件，就执行后面的代码（或）

.box(@w,@h) when (@w>0),(@h>0){
  width: @w;
  height: @h;
}
.box1{
  .box(100px,0px);
}
---------------------------------------
.box1 {
  width: 100px;
  height: 0px;
}

同样的值，同样的判断，但是在这里，我们添加上了后续样式
(类似于：椰果或者布丁，我都行，其他的我不想喝)

非

`not`只要不是这个判断条件成立，就可以

.box(@w,@h) when not (@w=100){
  width: @w;
  height: @h;
}
.box1{
  .box(100px,120px);
}

因为这里的`@w = 10px`成立，所以样式没有添加上（排除当前写的这个情况，别的都可以）
(类似于：只要不是巧克力奶茶，我都可以)

深入嵌套- 命名空间问题

#box1(){
    background: red;
    .fonts(@size:12px){
        font-size: @size;
    }
}
.box2{
    #box1.fonts(20px);
}
--------------------------------------
.box2 {
  font-size: 20px;
}

这一定要指明 xx 下面的.fonts ,因为作用域不一样，不可以直接 .fonts

合并

允许对可以接受多个属性的，例如：背景、阴影进行拼接合并
利用,隔断的，使用+

.box(){
    width: 200px;
    height: 200px;
    box-shadow+: 10px 10px 5px #000;
}
.box2{
    .box();
    box-shadow+: inset 5px 5px 5px red;
}
--------------------------------------------
.box2 {
    width: 200px;
    height: 200px;
    box-shadow: 10px 10px 5px #000,
    inset 5px 5px 5px red;
}

利用空格，隔断的，使用+_

.box(){
    width: 200px;
    height: 200px;
    transform+_: translate(100px);
}
.box2{
    .box();
    transform+_: rotate(3600deg);
}
---------------------------------------------------
.box2 {
    width: 200px;
    height: 200px;
    transform: translate(100px) rotate(3600deg);
}

映射

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
    primary: blue;
    secondary: green;
}

.button {
    color: #colors[primary];
    border: 1px solid #colors[secondary];
}
---------------------------------------------------
.button {
    color: blue;
    border: 1px solid green;
}
@size:{
    max:1200px;
    mid:800px;
    min:500px;
}

.box{
    width: @size[max];
}

其他

注释
Importing —— @import “lib.less”;
避免编译 —— ~