Less 的使用

最新推荐文章于 2024-07-24 11:40:30 发布
最新推荐文章于 2024-07-24 11:40:30 发布
阅读量256 收藏 1
点赞数
分类专栏： Front-End 文章标签： less css vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_H/article/details/120633149
版权

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言

编译 Less

方法1：使用命令行编译

① 安装：

npm install -g less

如果不能运行，就到 node 官网下载 node
安装完成后，输入 node -v / npm -v 查看版本，以确定是否安装成功

node- v
npm -v

npm 是 node 管理包的工具，就可以通过 npm 命令安装 less 啦

② 编译：

  1. 未指定编译路径
lessc styles.less
  1. 指定编译路径
lessc styles.less styles.css

lessc styles.less > styles.css

这样，会在编译成功后，生成新的 style.css 文件，编译的结果不会打印到控制台

  1. 编译后，将编译结果的 css 文件进行压缩

需要先下载 less-plugin-clean-css 插件

npm install less-plugin-clean-css -g

使用插件进行压缩

lessc --clean-css styles.less styles.min.css
  • 缺点：每写一次 less，都需要手动编译
方法2：使用外部工具编译

能帮助我们自动编译，实时刷新

安装考拉 less 客户端编译工具：

  • 可以选择是否压缩编译结果 compress
  • 可以选择是否监听 less 文件的变化
  • 可以自动编译
  • 可以生成资源地图 Source Map 文件
方法3：使用开发工具编译（基本都是用这个方法）
  • WebStorm：内置 File Watchers，设置方法：
    文件 → 设置 → 工具 → File Watchers → 添加选择 less → 指定输出目录
  • VSCode：下载 Easy Less 插件，使用 less 自动编译功能

注释

  • 多行注释：/* 注释内容 */

这种注释是 css 的注释，编译以后，会保留显示在 css 文件中

  • 单行注释：// 注释内容

这种代码注释，css 并不识别，不会显示在 css 文件中

.height {
    width: 100px;
    height: 100px;
    // less 中的单行注释内容
    /* less 中的
    多行注释内容 */
}

.height {
    width: 100px;
    height: 100px;
    /* less 中的
    多行注释内容 */
}

变量（Variables）

使用 @ 定义变量：@变量名: 变量值;

  • 属性值使用变量

注意：变量值用于设置属性值，要符合 css 属性规范

@width: 10px;
@height: @width + 10px;
@color: #ccc;
@border: 2px solid red;

#header {
    width: @width;
    height: @height;
    color: @color;
    border: @border;
}

编译为：

#header {
    width: 10px;
    height: 20px;
    color: #ccc;
    border: 2px solid red;
}
  1. 在字符串中使用变量，需要用 {} 将变量名括住
@picUrl: './index/pic/1.jpg';

.box {
    background: url('@{picUrl}') no-repeat center / contain;
}

编译为：

.box {
    background: url('index/pic/1.jpg') no-repeat center / contain;
}
  1. 属性名使用变量，也需要使用 {} 将变量名括住
@boxWidth: width;

.box {
    @{boxWidth}: 100px;
}

编译为：

.box {
    width: 100px;
}
  1. 选择器使用变量，也需要使用 {} 将变量名括住
@selector: .wrap;

@{selector} {
    background: pink;
}

编译为：

.wrap {
    background: pink;
}

导入 less 文件

@import './header.less';

在一个 less 文件中导入另一个 less 文件，会把两个 less 文件编译成一个 css 文件

// header.less
.wrap {
    background: pink;
}

// index.less
@boxWidth: width;

.box {
    @{boxWidth}: 100px;
    height: 100px;
}

@import './header.less';

/* index.css */
.box {
    width: 100px;
    height: 100px;
}

.wrap {
    background: pink;
}

less 的作用域

less 中的是块级作用域，每个 {} 都是独立的作用域：

  • 同一作用域中，后定义的变量会覆盖前面的同名变量
  • 不能在变量的作用域外，使用该变量
  • 局部作用域中的变量，会覆盖全局作用域中的同名变量
@color: red;

.box {
    @color: blue;
    background: @color; // 最终颜色是 blue 
}
  • 注意：变量会被预解析。可以先使用，再定义
.box {
    background: @color; // 先使用
}

@color: red; // 再定义

less 中的运算

  • 在 less 中，可以直接算出属性值
  • 变量也可以参与运算
  • 单位：以最左侧操作数的单位为准
.box {
    background: pink;
    height: @boxWidth - 50;
    width: 50px * 3;
}

@boxWidth: 100px;

嵌套

#box {
    color: black;

    .navigation {
        font-size: 12px;
    }

    .logo {
        width: 300px;
    }
}

会编译为：

#box {
    color: black;
}

#box .navigation {
    font-size: 12px;
}

#box .logo {
    width: 300px;
}
  • 可以使用 & 表示当前选择器的父级
#box {
    color: black;

    &:after {
        content: " ";
    }

    &>.child {
        width: 10px;
        height: 10px;
    }
}

编译为：

#box {
    color: black;
}

#box:after {
    content: " ";
}

#box>.child {
    width: 10px;
    height: 10px;
}

混入

可以理解为 CSS 中函数

定义 & 调用

.boxSizing () {
    width: 100px;
    height: 100px;
}

.box {
    .boxSizing();
    background: skyblue;
}

调用结果会编译为：

.box {
    width: 100px;
    height: 100px;
    background: skyblue;
}
  • 注意：先写的 CSS 样式会被后面的同名样式覆盖
.boxSizing () {
    width: 100px;
    height: 100px;
    background: skyblue;
}

.box {
    .boxSizing();
    background: lightcoral; // 最后是 lightcoral 色
}

参数设置

混入可以传入参数

@color: lightcoral;

.boxSizing (@bgColor, @size) { // 定义有参混入
    width: @size;
    height: @size;
    border: @size * 0.2 solid pink;
    background: @bgColor;
}

.box {
    .boxSizing(@color, 100px); // 传入参数
}
  • 如果没有参数，调用混入时，可以把 () 省略
.wrap() { // 定义的是混入
    width: 100px;
    height: 100px;
    border: 10px solid pink;
    background: lightcoral;
}

.box {
    .wrap; // 调用混入
}

此时要和样式复用区分开

.wrap { // 没有定义混入
    width: 100px;
    height: 100px;
    border: 10px solid pink;
    background: lightcoral;
}

.box {
    .wrap; // 直接复用样式
}
  • 可以设置默认参数
.boxSizing (@size, @bgColor: lightcoral) { // 设置了 @bgColor 的默认值
    width: @size;
    height: @size;
    border: @size * 0.2 solid pink;
    background: @bgColor;
}

.box {
    .boxSizing(100px); // 没有传入 @bgColor 参数
}

嵌套使用

  • 混入里面还能写选择器
.wrap() {
    width: 100px;
    height: 100px;
    border: 10px solid pink;
    background: lightcoral;

    span {
        display: block;
        width: 10px;
        height: 10px;
        background: lightcyan;
    }
}

.box {
    .wrap();
}

会编译为：

.box {
    width: 100px;
    height: 100px;
    border: 10px solid pink;
    background: lightcoral;
}

.box span {
    display: block;
    width: 10px;
    height: 10px;
    background: lightcyan;
}
  • 混入里面可以嵌套混入
.style() {
    width: 100px;
    height: 100px;

    .bg1() {
        background: lightcoral;
    }

    .bg2() {
        background: lightcyan;
    }

    .border1() {
        border: 10px solid pink;
    }

    .border2() {
        border: 10px solid skyBlue;
    }
}

.box {
    .style();
    .style .bg2(); // 可以选择需要的样式
    .style .border2();
}

编译为：

.box {
    width: 100px;
    height: 100px;
    background: lightcyan;
    border: 10px solid skyBlue;
}

条件判断

  • when：满足指定条件后，才会调用该混入
.boxSizing (@size, @bgColor: lightcoral) when (@size < 150px) {
    width: @size;
    height: @size;
    border: @size * 0.2 solid pink;
    background: @bgColor;
}

.box {
    .boxSizing(100px);
}
  • and：需要满足多个条件时，用 and 拼接
.boxSizing (@size, @bgColor: lightcoral) when (@size < 150px) and (@bgColor =skyBlue) {
    width: @size;
    height: @size;
    border: @size * 0.2 solid pink;
    background: @bgColor;
}

.box {
    .boxSizing(100px, skyBlue);
}

也可以直接用 , 拼接

.boxSizing (@size, @bgColor: lightcoral) when (@size < 150px), (@bgColor =skyBlue) {
    width: @size;
    height: @size;
    border: @size * 0.2 solid pink;
    background: @bgColor;
}

.box {
    .boxSizing(100px, skyBlue);
}
  • not：不满足指定条件时，用 not 判断
.boxSizing (@size, @bgColor: lightcoral) when not (@bgColor =skyBlue) and (@size < 150px) {
    width: @size;
    height: @size;
    border: @size * 0.2 solid pink;
    background: @bgColor;
}

.box {
    .boxSizing(100px);
}
JS.Huang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
less的使用
苦涩
10-20 318
less 变量和插值 less变量插值使用@{}表示 // less变量 @c: #e4393c; // less变量插值使用@{}表示 // 选择器变量插值 @b: box; // 路径变量插值 @imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'; // 属性变量插值 @bgsize: background-size; // ---------------------------------
less基本使用
weixin_52163352的博客
04-19 423
这里写自定义目录标题了解less变量嵌套函数运算作用域注释 了解less css是一门标记性语言，它的语法并不困难，使用起来基本没什么要求，但正是因为语法简单，书写css代码的时候就需要大量的看似没有逻辑大量的代码，代码多了之后后期很难做到维护修改，而且也会出现大量的重复代码，因此写的时候简单，一旦出了问题需要修改，就会非常困难，但是less的出现让我们可以像写js一下使用函数，变量等来书写css代码，也就提升了代码的复用和维护。 less是一门向后兼容的扩展语言 变量 css的代码重复率其实是非常高的，比
less的安装、安装less指定版本
05-07 6053
less的安装、安装less指定版本
Vue项目安装less和less-loader
热门推荐
weixin_52580677的博客
10-24 2万+
less-loader的版本号要搭配webpack的版本号来选择，webpack@4+可以选择的less-loader版本是5~7。完成less的安装后，我们只需要在style节点上加上lang=‘less’，就可以使用less语法了。在vue项目打开终端，进入项目安装（我记得less好像全局安装没用，每个vue项目要单独安装）less目前的最高版本是5+，但保险起见，我们还是安装4+比较好。上一步中，我们已经知道webpack的版本是4+如果没有安装，要先进行安装。打开cmd，通过命令查看。
npm安装 less
总结前端开发中遇到的问题，分享前端知识
01-14 6503
npm installless less-loader--save-dev
less-plugin-clean-css：使用clean-css对CSS进行后期处理和压缩
02-23
少插件清洁css 使用压缩少的css输出。 少用 npm install -g less-plugin-clean-css 然后在命令行上 lessc file.less --clean-css="--s1 --advanced --compatibility=ie8" 见的可用命令选项-唯一的区别是advanced和rebase ，我们默认为false，因为它并不总是完全安全的。 程序化用法 var LessPluginCleanCSS = require ( 'less-plugin-clean-css' ) , cleanCSSPlugin = new LessPluginCleanCSS ( { advanced : true } ) ; less . render ( lessString , { plugins : [ cleanCSSPlugin ] } ) .
less 安装 npm install less less-loader --save-dev报错
qq_22656655的博客
06-18 4343
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node": HTTP error 404 Not Found 使用npm insta..
less使用教程
04-09
less使用的入门教程,详细介绍less的使用方法
less使用demo( css预处理语言)
03-20
Less使用变量和嵌套规则来简化样式表，使其更易于维护和修改，从而减少了代码量。 更好的可读性： Less的嵌套规则使代码更易于阅读和理解，使开发人员更容易找到所需的代码块。 更高的可重用性： Less的变量和混合...
less-plugin-pleeease:后处理 Less 使用pleeease
06-29
后处理 Less 使用pleeease。 较少使用 npm install -g less-plugin-pleeease 然后在命令行上， lessc file.less --pleeease="browsers" 浏览器是由逗号分隔的列表。 允许您一次性覆盖多个选项。 接受与 ...
vue2中使用less简易教程
08-27
Vue2 中使用 Less 简易教程 Vue2 中使用 Less 是非常简单的，因为不需要手动配置 Webpack。只需要安装 Less 和 Less-loader 就可以了。在本教程中，我们将介绍如何在 Vue2 中使用 Less，并且详细解释每一个步骤。 ...
css 媒体查询 aspect-ratio less 使用方法
12-13
css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下：   // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图样式 @media screen and (min-...
Less安装与使用
cczsmile的博客
04-09 250
$ npm install -g less $ npm install -g less-plugin-clean-css lessc位置 C:\users\..\AppData\Roaming\npm\lessc webstorm配置Less压缩 --plugin=less-plugin-clean-css 命令行用法 Once installed, you can i...
Vue安装使用less
qq_53588618的博客
06-07 2057
一般来说，我们在创建Vue项目的时候就可以进行选配less，但是在没有选配的情况下怎么进行安装。在vue文件中找到 style 样式区。
绝大多数浏览器滚动条样式兼容性写法
J1ong的博客
12-02 1056
* { scrollbar-color: #ffffff rgba(0,0,0,0.4); /* 滑块颜色 滚动条背景颜色 */ scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */ } /*滚动条样式*/ *::-webkit-scrollbar{ width: 8px; } *::-webkit-scrollbar-thumb{ border-radius: 5px; height: 50px; background-colo
npm install less-loader报错，无法使用less
c12345666的博客
03-14 3795
npm install less-loader报错，大概率是因为版本的问题 看了网上很多安装less和less-loader的安装博客，都没有带版本号，自己在用的时候总是安装失败，如果你的情况和我一样，那大概率是版本的问题 解决方案 1.卸载原来的lessnpm uninstall less-loader 2.下载合适版本的less-loadernpm install less-loader@5.0.0 -D 如果严格控制版本号的话：npm install less@3.9.0 less-loader@
Less CSS 预处理器
weixin_42754922的博客
03-21 905
混合 Mixins 混合类似于编程语言中的函数。 混合参数 参数可以使用逗号或分号分隔。 命名参数：Mixins通过使用它们的名称提供参数值而不是位置。 参数没有放置值的任何顺序，它们可以通过名称引用。 .mixin(@color: black; @fontSize: 10px) { color: @color; font-size: @fontSize; } .class1 { .mixin(@fontSize: 20px; @c...
CSS、less、 Sass、
最新发布
qq_33715850的博客
07-24 450
CSS、less、 Sass、
less 使用自定义函数
05-31
要在less命令中使用自定义函数，可以使用lesskey工具创建一个按键映射文件，然后在文件中定义自定义函数并将其与按键绑定。以下是一个示例： 1. 创建一个文件，比如说lesskeyrc： ``` touch lesskeyrc ``` 2. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JS.Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值