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

相关推荐
nbsaas-boot1 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7891 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨1 小时前
GO 启动 简单服务
开发语言·后端·golang
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
斯普信专业组2 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构