less的使用

目录

 less中的注释：

less中的变量：

1、作为普通属性值来直接使用，直接用@color。

2、 作为选择器和是属性名：@{selector的值}的形式。

3、 作为url使用. 

4、变量的延时加载

less 的嵌套规则

less的混合和命名参数

---

less中的注释：

             以//开头的注释，不会被编译到 css文件中。

             以/**/开头的注释，会被编译到css文件中。

---

less中的变量：

使用@来声明的一个变量：@color:pink

1、作为普通属性值来直接使用，直接用@color。

       作为变量可以用作与计算，不仅变量与变量之间的可以作运算，变量与数字类型也可以

less样式

// 这行注释再css里面不会显示
/*这行注释再css里面能够看到*/
@color:pink;@w:100px;@m:50px;
div{
    background-color: @color;
    width: @w+@m;
}

  css样式

/*这行注释再css里面能够看到*/
div {
  background-color: pink;
  width: 150px;
}

2、 作为选择器和是属性名：@{selector的值}的形式。

less样式

@selector:#header;
@{selector}{
    width:100px;
    height:200px
}

注意：花括号不能省略，选择器的前缀可以写到值中，如：上面代码。也可以写到变量前面，如下面less代码

@selector:header;
#@{selector}{
    width:100px;
    height:200px
}

上面两个代码都是一样的，都会生成下面是css样式

#header {
  width: 100px;
  height: 200px;
}

3、 作为url使用. 

   作为url使用时，可以用@url对路径的拼接。如下：

@url:'../img';
div{
    background: url('@{url}/logo.png');
}

4、变量的延时加载

       ● 即变量先解析完再进行加载，less会在的样式加载之前加载变量----这是与js中变量的区别

       ● less的变量的作用域是块级作用域，会从相应的块级作用域中找相应的变量，如果没有找父级的作用域中的变量----这点与js变量很像。

less样式

@var:pink;

.father{
    background: @var;
    .son{
        @var:blue;
        color:@var;
        @var:yellow;
    }
    @var:red;
}

css样式

.father {
  background: red;
}
.father .son {
  color: yellow;
}

---

less 的嵌套规则

可以是父子级嵌套，即子级的样式写在父级的里面

less样式

@var:pink;@w:100px;
.father{
    background: @var;
    .son_one{
        color:@var;
    }
    .son_two{
        width: @w;
        height: @w+10px;
    }
}

css样式

.father {
  background: pink;
}
.father .son_one {
  color: pink;
}
.father .son_two {
  width: 100px;
  height: 110px;
}

这是我们会发现一个问题，父子级生成的css样式选择器之间会有空格，有时我们不需要这个空格，如使用到伪类时，:hover 等。

需要给谁加hover,就要加他的子级里面。用&作为区分

less代码

@var:pink;@w:100px;
.father{
    background: @var;
    .son_one{
        color:@var;
        &:hover{
            color: yellow;
        }
    }
    .son_two{
        width: @w;
        height: @w+10px;
    }
}

css样式

.father {
  background: pink;
}
.father .son_one {
  color: pink;
}
.father .son_one:hover {
  color: yellow;
}
.father .son_two {
  width: 100px;
  height: 110px;
}

---

less的混合和命名参数

        less的混合和js中函数很像。

        less的混合，是以 " . " 开头。

        如.public{},这样在编译的css中也会显示。

        .public(){},这样在编译的css中不会显示，且小括号里面可以传参数,两个参数之间用逗号隔开，且传的参数可以有默认值，与参数之间用冒号。

less样式

.public(@w:100px,@h:200px){
    width: @w;
    height: @h;
    color: yellow;
}
.father{
    width: 200px;
    height: 200px;
    background-color: #fff;
    .son_one{
        .public(50px,100px);
    }
    .son_two{
        .public()
    }
}

css样式

.father {
  width: 200px;
  height: 200px;
  background-color: #fff;
}
.father .son_one {
  width: 50px;
  height: 100px;
  color: yellow;
}
.father .son_two {
  width: 100px;
  height: 200px;
  color: yellow;
}

结束！以上笔者了总结的，，写这篇博客，是为了加深一下记忆，也希望能够帮助你，笔者也是一个初学者，可能知识不够全面，希望各位大佬进行补充和纠正。