less基础——嵌套、混合、继承

最新推荐文章于 2025-07-30 10:00:00 发布
原创 最新推荐文章于 2025-07-30 10:00:00 发布 · 3.4k 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#less #css #css3
本文详细介绍了Less预处理器的基本特性，包括其特有的注释方式、变量定义与使用（包括属性值和选择器作为变量、变量的延时加载）、嵌套规则、混合功能（普通混合、不带输出的混合、带参数混合、参数带默认值的混合、命名参数混合）以及运算和继承。此外，还探讨了避免编译的技巧，展示了如何利用Less提高CSS代码的复用性和组织性。

文章目录

less注释

less的注释 //
css的注释是/**/，css注释也可以在less中起作用，不同的是css注释会被编译到css文件中，而less注释（//）不会被编译到css文件中。

即，在less中：
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

eg:
less文件：

/*这是想暴露出去的注释*/
// 这是见不得人的注释

对应的css文件：

/*这是想暴露出去的注释*/

less变量

变量的定义

变量的定义格式：@变量名:变量值;
变量的调用：@变量名
eg:
less:

/*这是想暴露出去的注释*/
// 这是见不得人的注释
@color:pink;
* {
    margin: 0;
    padding: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: @color;
        height: 100px;
        width: 100px;
    }
}

css:

/*这是想暴露出去的注释*/
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
/*# sourceMappingURL=./index.css.map */

注意： 变量的作用域是块级作用域，即一个{}代表一个作用域。

属性值或选择器做变量

变量的定义格式：@变量名:变量值;
变量的调用：@{变量名}

less:

/*这是想暴露出去的注释*/
// 这是见不得人的注释
@color:pink;
@m:margin;
@selector:#wrap;
* {
    @{m}: 0;
    padding: 0;
}

@{selector} {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    @{m}: 0 auto;

    .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: @color;
        height: 100px;
        width: 100px;
    }
}

对应的css

/*这是想暴露出去的注释*/
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
/*# sourceMappingURL=./index.css.map */

变量作为url

变量的定义格式：@url:url地址;
变量的调用：@{url}

变量的延时加载

即需要将其他语句都执行完，最后加载变量的具体值。
eg：
less

@var: 0;
.class{
    @var: 1;
    .brass{
        @var: 2;
        three:@var;
        @var: 3;
    }
    one:@var
}

对应的css

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

less:块级作用域，一个{}代表一个作用域。
three: 3;的值是3不是2，先将@var的值加载完成之后再赋值，这就是变量的延时调用。

less嵌套规则

普通嵌套：父子关系，两个选择器之间自动添加空格
&：代表外层父元素，代表对氟元素进行操作
eg：
less

* {
    margin: 0;
    padding: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: pink;
        height: 100px;
        width: 100px;

        &:hover {
            background-color: aqua;
        }
    }
}

css

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner:hover {
  background-color: aqua;
}
/*# sourceMappingURL=./初始less.css.map */

less混合（minix）

混合的作用：避免大量重复代码。
即如果有两个类有相同的样式，如果重复写就会造成很多重复代码，使用混合可以将重复代码提取，谁需要谁再进行调用即可。(调用的过程就是ctrl+c 和ctrl+v的过程)
混合就是将一系列属性从一个规则集引入到另一个规则集的方式

普通混合

混合定义：
在less规范中有明确的指定，使用.定义

.混合名{
混合内容
}

混合调用：.混合名

eg:
less

.center{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: pink;
    height: 100px;
    width: 100px;
}

* {
    margin: 0;
    padding: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        .center;
    }
    .inner2{
        .center;
    }
}

对应的css

.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
/*# sourceMappingURL=./01.css.map */

不带输出的混合

上述代码.center也会被编译成css，即html中的元素可以使用类center的样式。但是有些情况下我们只希望它做混合用，不希望它被编译成css代码，我们只需要在混合名后面加上()即可，这样css中就不会有.center了。
这就是不带输出的混合。

注意如果混合加（），调用的时候应该也加（）。（如果括号内没有参数，调用的时候加不加括号是一样的但是还是加上吧）
eg：
less

.center(){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: pink;
    height: 100px;
    width: 100px;
}

* {
    margin: 0;
    padding: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        .center();
    }
    .inner2{
        .center();
    }
}

对应的css

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
/*# sourceMappingURL=./01.css.map */

带参数的混合

（）中可以传参数，格式有点像函数，但是他不是函数。
eg:
less

.center(@h,@w,@color){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: @color;
    height: @h;
    width: @w;
}

* {
    margin: 0;
    padding: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        .center(100px,100px,pink);
    }
    .inner2{
        .center(200px, 200px, pink);
    }
}

对应的css

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 200px;
  width: 200px;
}
/*# sourceMappingURL=./01.css.map */

参数带默认值的混合

参数可以设置默认值，格式：@参数名：参数默认值
less：

.center(@h:100px,@w:100px,@color:pink){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: @color;
    height: @h;
    width: @w;
}

* {
    margin: 0;
    padding: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        .center();
    }
    .inner2{
        .center(200px, 200px, deeppink);
    }
}

对应css

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: deeppink;
  height: 200px;
  width: 200px;
}
/*# sourceMappingURL=./01.css.map */

命名参数

如果混合有多个参数但是我们只想给其中一个指定的参数传参就需要用到命名参数了。
即给指定名字的参数传值。
eg：
less:

.center(@h:100px,@w:100px,@color:pink){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: @color;
    height: @h;
    width: @w;
}
#wrap {
    .inner {
        .center(@color:yellow);
    }
    .inner2{
        .center(200px, 200px, deeppink);
    }
}

css:

#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: yellow;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: deeppink;
  height: 200px;
  width: 200px;
}
/*# sourceMappingURL=./01.css.map */

匹配模式

匹配模式就相当于是同名混合使用不同的参数，调用不同的混合函数。
想要通过匹配模式更灵活的调用混合。（有点像java中的重载）

规则：

  • 第一个参数一般代表匹配模式。
    即不同的参数根据第一个参数决定调用哪一个混合
  • 如果混合的第一个参数为 @_，那么其他的与之同名的混合被调用的时候都会先调用该混合。
    （注意： 其他的同名的混合可以自动调用该混合还有一个前提就是：该混合的参数与自动调用该混合的混合的参数个数是一样的，这样才能匹配到）

eg：
triangle.less

.triangle(@_,@w,@c){
    width: 0;
    height: 0;
    overflow: hidden;
}
.triangle(L,@w, @c) {
    border-width: @w;
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}
.triangle(T,@w, @c) {
    border-width: @w;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(R,@w, @c) {
    border-width: @w;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(B,@w, @c) {
    border-width: @w;
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}

03.less

@import "./triangle.less";

#wrap .sjx {
    .triangle(L,40px,red);
}

03.css

#wrap .sjx {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 40px;
  border-style: dashed solid dashed dashed;
  border-color: transparent red transparent transparent;
}
/*# sourceMappingURL=./03.css.map */

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./03.css">

</head>
<body>
    <div id='wrap'>
        <div class="sjx"></div>  
    </div>
    
</body>
</html>

输出：
在这里插入图片描述

arguments

arguments装的是实参伪数组。
伪数组：具有length属性的对象。

eg：
less

.border(@1,@2,@3){
    border: @arguments;  
    // 等价于border: @1 @2 @3; 
}

#wrap .sjx {
    .border(1px,solid,black);
}

对应的css

#wrap .sjx {
  border: 1px solid black;
}
/*# sourceMappingURL=./04.css.map */

less运算

在less中可以进行加减乘除的运算
less:

#wrap .sjx {
    width: (100+100px);
    // 计算双方只需要带单位
}

css

#wrap .sjx {
  width: 200px;
}
/*# sourceMappingURL=./05.css.map */

less继承

继承的产生：

问题的产生，只用混合可能会造成重复代码。
eg：
center.less

.center(@w,@h,@c){
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background-color: @c;
}

minix.less

@import "./center.less";

*{
    padding: 0;
    margin: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    
    .inner{
        &:nth-child(1) {
           .center(200px,200px,pink);
        }

        &:nth-child(2) {
            .center(100px, 100px, yellow);
        }
        
    }
}

minix.css

* {
  padding: 0;
  margin: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: pink;
}
#wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*# sourceMappingURL=./mixin.css.map */

wrap .inner:nth-child(1) 和 wrap .inner:nth-child(2)代码会有很多重复。
这就需要继承了。

继承

继承就是一个选择器将另一个类选择器的属性拿过来使用。
继承的格式：
定义：
.类选择器{
}
调用：
选择器：extend(.类选择器)

eg:
center2.less

.center{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

extend.less

@import "./center2.less";

* {
    padding: 0;
    margin: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;

    .inner:extend(.center) {
        &:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        &:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    }
}

extend.css

.center,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
* {
  padding: 0;
  margin: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 200px;
  height: 200px;
  background-color: pink;
}
#wrap .inner:nth-child(2) {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*# sourceMappingURL=./extend.css.map */

注意

继承不能传参数，即类选择器后面不能有()
如果加括号就不会被继承
eg：
center.less

.center(){
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

extend.css

* {
  padding: 0;
  margin: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 200px;
  height: 200px;
  background-color: pink;
}
#wrap .inner:nth-child(2) {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*# sourceMappingURL=./extend.css.map */

.center()样式没有被继承

all

默认情况下不会继承类选择器上的的伪类不会被继承（如：hover），但是如果集成的时候写上all就会全部继承。

格式： 加在类选择器名后面
eg: &:extend(.center all);
eg：
center2.less

.center{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.center:hover{
    background-color: red!important;
}

extend.less

@import "./center2.less";

* {
    padding: 0;
    margin: 0;
}

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;

    .inner {
        &:extend(.center all);
        &:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        &:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    }
}

extend.css

.center,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.center:hover,
#wrap .inner:hover {
  background-color: red!important;
}
* {
  padding: 0;
  margin: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 200px;
  height: 200px;
  background-color: pink;
}
#wrap .inner:nth-child(2) {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*# sourceMappingURL=./extend.css.map */

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./extend.css">
</head>
<body>
    <div id="wrap">
        <div class="inner">
            inner1
        </div>
        <div class="inner">
            inner2
        </div>
    </div>
    
</body>
</html>

输出：
在这里插入图片描述

继承和混合对比

继承的性能比混合高，但是灵活度比混合低。

less避免编译

less会自动编译，如：如果传递的是一个计算式，less会直接计算出来
less:

*{
    // 除法记得加括号
    margin: 100*10px;
    padding: cacl(200px+100);
}

对应的css：

* {
  margin: 1000px;
  padding: cacl(300px);
}
/*# sourceMappingURL=./text.css.map */

但是让雨果我们不希望less自动编译，而是交给浏览器进行编译，这就涉及到less的避免编译，即less不进行编译。
格式：~"避免编译的内容"
eg:
less:

*{
    // 除法记得加括号
    margin: 100*10px;
    padding:~"cacl(200px+100)";
}

css:

* {
  margin: 1000px;
  padding: cacl(200px+100);
}
/*# sourceMappingURL=./text.css.map */
MATLAB图像采集工具箱实战：用USB摄像头搭建简易监控系统
最新发布
weixin_33737134的博客
04-05 701
本文详细介绍了如何使用MATLAB的Image Acquisition Toolbox和USB摄像头搭建简易监控系统。从硬件配置、实时视频采集到运动检测算法的实现，提供了完整的代码示例和优化建议，帮助开发者快速掌握基于MATLAB的智能监控开发技术。
less继承
m0_52380041的博客
04-04 3554
继承的定义 在使用封装代码除了混合方法以外还可以使用继承的方法，继承就是该选择器除了使用自身包裹的属性外，还要执行继承的封装代码中的包裹的代码。在预处理之后，会呈现并集选择器的关系。 继承的方法 在选择器后添加 :extend(继承对象) 来进行继承 例子 less .color { color: #111111; } .color { background-color: #159262; } .border_r { border-radius: 5px; } .textare
less之继承（官方文档翻译）
兰为鹏的博客
02-15 1914
默认情况下，Extend会查找选择器之间的精确匹配。当你用extend的最后一个参数来指定来制定所有的关键字，它会告诉Less将该选择器匹配为另一个选择器的一部分。选择器将被复制，然后仅选择器的匹配部分将被扩展替换，从而形成一个新的选择器。注意，这和pre:hover:extend(div pre， .bucket tr)是一样的。一个选择器可以包含多个extend子句，但所有的extends都必须位于选择器的末尾。Extend是一个伪属性较少的类，它将放置的选择器与它引用的选择器进行合并。
Less：继承（extend）
听海边涛声
08-25 1861
Less：继承（extend）
less学习（二）：混合、继承、运算
激洪的博客
04-06 1177
less之混合、继承、运算
Less基础速学 —— 混入、运算、继承
灵魂学者的博客
05-28 1868
本篇讲关于Less预处理器中的混入，继承和运算，混合有这几种：普通混入，不带输出的混入，带参数的混入，带参数的混入，带参数且有默认值的参数，带多个参数的混入，命名参数，匹配模式以及arguments变量这些关于混入的内容，还要Less运算，集成等内容，感兴趣的读者可以翻阅一下！
Less基础
letianxf的博客
12-12 1339
一、变量 1. 普通变量 @变量名 Less变量只能定义一次，不能重复定义，否则后面的会类似于js的变量提升，覆盖前面的变量。 作为属性值的变量不能添加大括号（{}） @width :10px; @height: @width + 10px; #header { widht: @width; height: @height } 2. 选择器变量 作为选择器的变量在使用的时候需要添加大括号（{}），变量的前面可以添加选择操作符 /* less */ @mySelector: #wrap;
less-用法：简介、变量、混合、嵌套、运算、转义、函数、映射、作用域、注释、导入、继承、条件判断
小白小白从不日别的博客
07-18 5754
变量（Variables） 基本使用方式： @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } 编译为： #header { width: 10px; height: 20px; } 混合（Mixins） 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下： .bordered.
尚硅谷 Less 笔记
LiuKairui的博客
08-28 1041
目录Less 笔记1. Less的引入2. Less基础Less中的注释Less中的变量Less中的嵌套规则3. Less中的混合普通混合不带参数混合带参数的混合带默认参数的混合命名参数匹配匹配模式Arguments变量4. Less的计算5. Less的继承5.避免编译 Less 笔记 Less是一种动态样式语言，属于css预处理器的范畴，他扩展了CSS语言，增加了变量、mixin、函数的等特性，使css更易于维护和扩展 Less既可以在客户端运行，也可以借助Node.js在服务端运行 1. Less的引
CSS预处理器—Less
爱前端的程序媛的博客
02-05 383
CSS中常用预处理器有两种：Less和Sass。 今天接触的是Less预处理器，简单的了解了一下。 emmmmm，其实吧，今天主要是看了看Less的语法什么的，Less的语法跟CSS语法很像，及其的相似。Less是预处理，就是在浏览器解析代码之前，Less先执行，CSS是浏览器解析的。Less通过解析，生成CSS文件，应用在页面中。Less比CSS强大，有很多CSS没有的东西，比较灵活一点。 ...
less笔记-继承（Extend）
热门推荐
永远的北极光
09-13 3万+
一、Extend Syntax 说明：The extend is either attached to a selector or placed into a ruleset. It looks like a pseudoclass with selector parameter optionally followed by the keyword。 继承被附在选择器后面或放置在规则集（即
Less预处理——继承、导入、条件表达式和函数
HuoZhiyan 的博客
10-04 3197
Less预处理——继承、导入、条件表达式和函数...
CSS 预处理 语言 - Less（2）- 混合、运算
JHY97的博客
05-24 1023
一、less中的混合 混合就是将一系列属性从一个规则集引入到另一个规则集的方式 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。 以案例说明： html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
关于解决大段样式复用的两种思路（less的继承和混入）
九日的博客
06-29 6530
关于解决大段样式复用的两种思路。 问题： 有时候会遇到有一个地方的样式和自己需要的大部分相同，只有部分参数需要调整的情况，为了图方便我们经常是把别人的代码全部copy到自己页面然后进行改动，造成了大量的重复代码。 这里基于less讨论两种解决此问题的方式。 1.继承 例如有一个叫做.ceshi的类我们现在需要他的样式 .ceshi { margin: 0; padding: 0; color: #123456; } 正好我们的.bi-title类也需要这段代码，只是color不同，
less 继承语法
HHH917的博客
04-09 1万+
less 继承 less继承方便代码模块化 继承不支持带参数 如社区公共头部与尾部 语法： 获得继承名：extend（继承部分名）{…} 代码： less .jicheng{ width: auto; height: 50%; text-align: center; background: aqua; } .header:extend(.jicheng){ ...
Less预处理——混合方法
HuoZhiyan 的博客
10-01 2812
Less预处理——混合方法的使用
less中混合和嵌套详解
lhrdlp的学习笔记
03-24 4665
目录 1.混合(Mixin) 1.1 Mixin的定义 1.2 Mixin的定义 1.3 调用混合 1.4 less可以直接继承在其他选择器中的样式 1.5 Mixin的默认值与不定参 1.6 Mixin的判断条件 1.7 模式匹配 2.嵌套(重要) 2.1 嵌套的定义 2.2 使用嵌套的优势 2.3 使用示例 1.混合(Mixin) 1.1 Mixin的定义 Mix...
less详解和说明
胡图图不糊涂的博客
04-01 1027
一、注释 以 /*/包裹的注释会被编译到css文件里面 以//开头的注释不会编译到css里面 二、less里面的变量 用@来声明变量 注意： 1、作为普通属性值来使用：@hello（变量名）：yellow（变量值） 2、作为选择器和属性名：@{selector} 3、作为URL：@url 4、变量的延迟加载 less文件： @wnum:60%; /*定义普通变量*/ @hig...
Less 混合方法（mixin）
听海边涛声
08-25 2269
Less 混合方法（mixin）
Less less中的混合和继承
2301_78939167的博客
07-30 2057
mixin(@c:deeppink) // 当实参比形参少时，可以为实参命名，使参数准确传输。//传入的所有参数都会被@arguments变量收集。//根据需求选取方向，并会自动匹配基础属性。混合就是将一系列属性从一个规则集引入到另一个规则集的方式。//基础属性，用@_做占位符匹配任意方向。//less的混合可以给出默认参数。//不会被编译到css文件中。//会被编译到css文件中。//上下左右各方向的三角形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值