🌻Less

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

简介

  • Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
  • 注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件。
  • VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件。

语法

大多语法与 CSS 一致，但为了简化 CSS 的写法，在某些地方有自己的特点语法。

注释

  • 单行注释
    • 语法：// 注释内容
    • 快捷键：ctrl + /
  • 块注释
    • 语法：/* 注释内容 */
    • 快捷键： Shift + Alt + A

运算

  • 加、减、乘直接书写计算表达式
  • 除法需要添加，小括号或.
  • 表达式存在多个单位以第一个单位为准

嵌套

  • 快速生成后代选择器
  • 用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用

变量

概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
  • 定义变量：@变量名: 数据;
  • 使用变量：CSS属性：@变量名;

导入

作用：导入 less 公共样式文件
提示：如果是 less 文件可以省略后缀

导出

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

禁止导出

写法：在 less 文件第一行添加:  // out: false
🌻
欢迎在下方留言讨论~
MybatisSass
Loading...
目录