less学习笔记

Posted 芜独独

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less学习笔记相关的知识,希望对你有一定的参考价值。

less文档

链接: link.

less学习笔记

less基础

注释

/**/看得见的注释,//看不见的注释

变量

用@符号定义变量,用@{变量}引用语法糖(不常用)
在这里插入图片描述

在这里插入图片描述

变量的延迟加载(重点)

在这里插入图片描述
在这里插入图片描述

less的嵌套规则

1.基本嵌套
2.&的使用(平级)
在这里插入图片描述
在这里插入图片描述

less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

普通混合

<div class="content">
            <div class="one"></div>
            <div class="two"></div>
        </div>

在这里插入图片描述
在这里插入图片描述

带参数的混合

在这里插入图片描述
在这里插入图片描述

带默认值的混合

在这里插入图片描述
在这里插入图片描述

命名参数

在这里插入图片描述
在这里插入图片描述

匹配模式

<div class="sjx">
            <div class="shang"></div>
            <div class="xia"></div>
            <div class="zuo"></div>
            <div class="you"></div>
        </div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

arguments变量

在这里插入图片描述
在这里插入图片描述

less运算

一方带单位即可
在这里插入图片描述
在这里插入图片描述

less继承

性能比混合高,灵活度比混合低

<div id="wrap">
        <div class="inner">
            inner1
        </div>
        <div class="inner">
            inner2
        </div>
    </div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
采用继承extend
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
想要继承全部的状态在后面加上all
在这里插入图片描述

less避免编译

在这里插入图片描述
在这里插入图片描述
加入~“”可避免编译
在这里插入图片描述
在这里插入图片描述

以上是关于less学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

less学习笔记

less学习笔记

less学习笔记

less学习笔记

学习笔记:python3,代码片段(2017)

Less学习笔记