Less语法详述

黄马小配件

已于 2022-12-12 21:48:50 修改

阅读量457

点赞数 1

文章标签： less 前端 css

于 2022-12-12 21:46:36 首次发布

本文链接： https://blog.csdn.net/m0_59812088/article/details/128292809

版权

Less语法：

1、 Less是一个CSS预处理器, Less文件后缀是.less
2、扩充了CSS 语言, 使CSS 具备一定的逻辑性、计算能力。
3、注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less（vscode插件）

作用：less文件保存自动生成css文件

Less语法注释

注释：
单行注释：
语法：// 注释内容
快捷键：ctrl + /

块注释：
语法：/* 注释内容*/
快捷键： shift + alt + A

Less运算语法

运算：
加、减、乘直接书写计算表达式
除法需要添加小括号或.（英文的“.”）

注意：
Ø 表达式存在多个单位以第一个单位为准

div {
  width: 100px + 200px;
  width: 200px - 100px;
  width: 50 * 4px;
  width: (200px / 100);
  width: 400px + 100deg + 20%;
  height: 100px+200px;
  width: (70 / 37.5rem);
}

Less嵌套语法：

// 1.生成后代选择器
// 2.生成子代选择器 >
// 3.交集选择器
// 4.并集选择器
// 5.伪类选择器  :hover
// 6.添加伪元素
// 7.结构伪类选择器
.father {
  color: #333;
  
  // 生成后代选择器
  .son {
    width: 200px;
    height: 200px;
  }
}

// 生成子代选择器 >
.box1 {
  >.box2 {
    color: orange;
  }
}

// &:当前选择器,表示的就是直接上级
.head {
  span {
    &.text {
      font-size: 20px;
    }
  }
}

// 并集选择器
.father {
  .son1,.son2 {
    color: tomato;
  }
}

// 交集选择
.father {
  .free.active {
    color: tomato;
  }
}

// 伪类选择器  :hover
.box {
  li {
    a{
      &:hover {
        color: #333;
      }
    }
  }
}

// 添加伪元素
.father {
  a::before {
    content: "";
  }
}
.father {
  a {
    &::before {
      content: "";
    }
  }
}

// 结构伪类选择器
.box {
  ul {
    li:nth-child(2) {
      font-size: 30px;
    }
  }
}
.box {
  ul{
    li {
      &:nth-child(2) {
        font-size: 50px;
      }
    }
  }
}

Less变量设置属性值

// 变量  @变量名: 值;
@ThemeColor:#6cf;
@fontSize:14px;
body {
  background-color: #f3f4f3;
}

p {
  color: @ThemeColor;
  font-size: @fontSize;
}

a {
  background-color: @ThemeColor;
}

div {
  box-shadow: @ThemeColor;
}

Less导入写法引用其他Less文件

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

// @import "你要导入的文件路径";
@import "./03-计算.less";

使用Less语法导出CSS文件

方法一：
配置EasyLess插件，实现所有Less有相同的导出路径
l 配置插件：设置→ 搜索EasyLess → 在setting.json中编辑→ 添加代码（注意，必须是双引号）

方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加/
// out: ../css/

Less禁止导出

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

Less压缩导出

// compress: true ,out: ../css/
.box {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  text-align: center;
  font-size: 60px;
  line-height: 60px;
}