html+css 有关于less的使用和全面解释

目录

less

注释

运算

嵌套

变量

导入

导出

禁止导出


less

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

注意:浏览器不识别 Less 代码,目前阶段,网页要引入对应的 CSS 文件

VS Code 插件:Easy LESS,保存 less文件后自动生成对应的 CSS 文件

注释

  • 单行注释

    • 语法:// 注释内容

    • 快捷键:ctrl + /

    • less被解析成css文件时行注释无法被解析进入css文件

  • 块注释

    • 语法:/* 注释内容 */

    • 快捷键: Shift + Alt + A

    • less被解析成css文件时只有块注释可以被解析进入css文件

运算

  • 加、减、乘直接书写计算表达式

  • 除法需要添加 小括号 或 .

  • 表达式存在多个单位以第一个单位为准

嵌套

作用:快速生成后代选择器

提示:用 & 表示当前选择器,不会生成后代选择器,通常配合hover伪类或nth-child结构伪类使用

变量

概念:容器,存储数据

作用:存储数据,方便使用和修改

语法:

  • 定义变量:@变量名: 数据;

  • 使用变量:CSS属性:@变量名;

css 复制代码
// 定义变量
@myColor: pink;
// 使用变量
.box {
  color: @myColor;
}
a {
  color: @myColor;
}

导入

作用:导入 less 公共样式文件,可以将多个less文件导入到一个less文件中,以减少在html文件中的引入

语法:导入: @import "文件路径";

提示:如果是 less 文件可以省略后缀

css 复制代码
@import './base.less';
@import './common';

导出

写法:在 less 文件的第一行添加 // out: 存储URL

提示:文件夹名称后面添加 /

css 复制代码
// out: ./index.css
// out: ./css/

禁止导出

使用场景:默认情况下一个less文件会生成一个css文件,当多个less文件导入到一个less文件中,已经导入的less文件就不需要生成css文件

写法:在 less 文件第一行添加: // out: false

相关推荐
凤枭香1 分钟前
Python OpenCV 傅里叶变换
开发语言·图像处理·python·opencv
ULTRA??5 分钟前
C加加中的结构化绑定(解包,折叠展开)
开发语言·c++
远望清一色21 分钟前
基于MATLAB的实现垃圾分类Matlab源码
开发语言·matlab
GIS程序媛—椰子27 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
confiself31 分钟前
大模型系列——LLAMA-O1 复刻代码解读
java·开发语言
DogEgg_00134 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端37 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100940 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
XiaoLeisj43 分钟前
【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期
java·开发语言·java-ee
杜杜的man1 小时前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang