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属性:@变量名;

// 定义变量
@myColor: pink;
// 使用变量
.box {
  color: @myColor;
}
a {
  color: @myColor;
}

导入

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

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

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

@import './base.less';
@import './common';

导出

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

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

// out: ./index.css
// out: ./css/

禁止导出

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

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

相关推荐

  1. Scssless预处理器使用对比

    2024-01-06 10:44:02       57 阅读
  2. scssless区别

    2024-01-06 10:44:02       44 阅读
  3. 串口与中断关系使用--详细解释

    2024-01-06 10:44:02       40 阅读
  4. 使用 less

    2024-01-06 10:44:02       32 阅读
  5. lesssass啥区别哪个更加好

    2024-01-06 10:44:02       27 阅读
  6. HTMLCSS旋转圣诞树源码附注释

    2024-01-06 10:44:02       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-06 10:44:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-06 10:44:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-06 10:44:02       87 阅读
  4. Python语言-面向对象

    2024-01-06 10:44:02       96 阅读

热门阅读

  1. vs2019+qt+opencv+open3d

    2024-01-06 10:44:02       54 阅读
  2. TCP和UDP的区别是什么

    2024-01-06 10:44:02       65 阅读
  3. activiti 简介教程

    2024-01-06 10:44:02       59 阅读
  4. SkyWalking部署-K8S

    2024-01-06 10:44:02       59 阅读
  5. 【LeetCode】1193. 每月交易 I

    2024-01-06 10:44:02       56 阅读
  6. LeetCode第102题 - 二叉树的层序遍历

    2024-01-06 10:44:02       56 阅读
  7. 【Android】使用android studio查看内置数据库信息

    2024-01-06 10:44:02       59 阅读
  8. 网络安全协议:保护数据和信息的关键

    2024-01-06 10:44:02       63 阅读