Less语言

最新推荐文章于 2023-03-19 17:44:53 发布

wuxin0811

最新推荐文章于 2023-03-19 17:44:53 发布

阅读量266

点赞数 1

文章标签： less css html

本文链接：https://blog.csdn.net/wuxin0811/article/details/119999831

版权

Less是一种CSS预处理器，它引入了变量、混合、函数等特性，增强了CSS的可维护性和扩展性。通过安装less和less.js，可以将less文件编译成css并实现在HTML中应用。变量如`@color1`、`@fontSize1`等方便样式复用，运算功能允许进行尺寸单位的计算，如`calc()`函数。Less使得CSS编写更加灵活高效。

摘要由CSDN通过智能技术生成

Less是什么：

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

用法：

安装

npm install less -g

检测less是否成功

lessc -v
lessc --version

可以使用less命令将less文件转换为css文件

lessc main.less main.css

在html中使用less

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

变量：

@color1: teal;
@fonFize1: 24px;
@width1: 500px;
@height1: 500px;

body {
  color: @color1;
  font-size: @fonFize1;
  
  & > div {
    width: @width1;
    height: @height1;
  }
}

运算：

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

 // 所有操作数被转换成相同的单位
    @conversion-1: 5cm + 10mm; // 结果是 6cm
    @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

    // conversion is impossible
    @incompatible-units: 2 + 5px - 3cm; // 结果是 4px

    // example with variables
    @base: 5%;
    @filler: @base * 2; // 结果是 10%
    @other: @base + @filler; // 结果是 15%
  calc() 特例
    为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
      @var: 50vh/2;
      width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))