less使用（入门）

最新推荐文章于 2023-12-01 19:38:53 发布

@大熊

最新推荐文章于 2023-12-01 19:38:53 发布

阅读量259

点赞数 1

分类专栏：笔记文章标签： less css 前端

本文链接：https://blog.youkuaiyun.com/qq_51558433/article/details/125995002

版权

笔记专栏收录该内容

28 篇文章

订阅专栏

本文介绍了Less的使用，包括在浏览器中的应用、变量的声明、选择器嵌套（特别是&的用法）、算数运算、混入（Mixins）及其传参与映射的结合使用、继承（extend）和作用域（scope）。通过学习，你可以更好地掌握Less这门CSS预处理器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Less

less(Leaner Style Sheets)

使用

浏览器使用

npm的自己查懒得写哈哈哈

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less" ></script>

1.变量

使用@前缀声明变量

// @自定义变量名：变量值；
@mainColor: red;

.box {
    color: @mainColor;
}

2.选择器嵌套

.box {
    .left {
        ...
    }
}

2.1. &

代表当前选择器的父级（官方解释）
（就是代表当前选择器）

// css中
.link:hover{}

// less中
.link {
    &:hover {
    }
}

3.运算

算数运算可以对任何数字、颜色或变量进行运算

不常用（有点笨）

不同单位之间进行算数运算，单位以最左侧的单位为准

.box {
    width:10px + 20px;
    color: #ff0 + #aff;
}

4.混入（Mixins）

混入的选择器建议使用class选择器
当混入的时候也要使用class

// a.less文件
.w150 {
    width: 150px;
}

// b.css文件
.box {
    height:100px;
    color: #f00;
    .w150();
}

4.1.混入传参

// a.less文件
// @width:5px  表示默认值是5px
.main_border(@width:5px, @bcolor:red) {
    border: @width, solid, @bcolor;
}

// b.css文件
.box {
    width: 10px;
    height: 100px;
    .main_border(1px, orange)
}

4.2混入和映射（map）的结合使用

// a.less
.main {
    width: 100px;
    height: 200px;
}

// b.css
// 只想用.main的width属性
.box {
    width: .main()[width];
    height: 200px;
}

以下案列弥补了less中不能定义函数的缺陷

.pxToRem(@px) {
    result:(@px / 10) * 1rem
}
.box {
    width: .pxToRem(100)[result]
}

5.继承（extend）

// a.less
.main {
    border: 1px solid #ccc;
}

// b.css
.box {
    width:100px;
    &:extend(.main)
}

6. 作用域（scope）

在查找一个变量时，首先在本地查找变量和混合（mixins）
如果找不到，则从父级作用域继承