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

相关推荐
中微子3 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
我是苏苏1 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js