less学习笔记

最新推荐文章于 2024-08-07 14:19:47 发布

芜独独

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量263

点赞数 1

文章标签： html css css3 less html5

本文链接：https://blog.csdn.net/awwwwmman/article/details/117424992

版权

本文详细介绍了Less预处理器的基础知识，包括注释、变量的定义与延迟加载、嵌套规则的使用，以及混合功能的实践，如普通混合、带参数和默认值的混合。通过具体的代码示例，阐述了Less如何提高CSS编写效率和可维护性。此外，还探讨了运算、继承、避免编译的技巧，帮助开发者更好地掌握Less。

摘要由CSDN通过智能技术生成

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避免编译

在这里插入图片描述

加入~“”可避免编译

芜独独

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
less学习笔记

目录less文档less学习笔记less基础注释变量变量的延迟加载（重点）less的嵌套规则less的混合普通混合带参数的混合带默认值的混合命名参数匹配模式arguments变量less运算less继承less文档链接: link.less学习笔记less基础注释/**/看得见的注释，//看不见的注释变量用@符号定义变量，用@{变量}引用语法糖（不常用）变量的延迟加载（重点）less的嵌套规则1.基本嵌套2.&的使用（平级）less的混合混合就是将一系列属性从
复制链接

扫一扫