Less知识点总结

最新推荐文章于 2024-02-26 19:13:50 发布

果冻OoO

最新推荐文章于 2024-02-26 19:13:50 发布

阅读量450

点赞数

分类专栏：前端学习 CSS 文章标签： less 前端 css

本文链接：https://blog.csdn.net/qq_42002794/article/details/122141325

版权

前端学习同时被 2 个专栏收录

26 篇文章 6 订阅

订阅专栏

CSS

6 篇文章 1 订阅

订阅专栏

一、Css预处理器和Less基本介绍

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。

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

注释：

单行注释

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

块注释

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

二、环境使用总结

1. 在 Node.js 环境中使用

npm i -g less
# or
yarn global add less

# 查看版本，有版本则安装成功
lessc -v
# 成功示例：lessc 4.1.2 (Less Compiler) [JavaScript]

Easy Less :

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

2.在 webpack 中使用

基本步骤：

安装 less 以及 less-loader
配置 webpack
如果是 .vue 文件要在 style 标签上增加属性 lang="less"

安装：

npm i less less-loader --save-dev
# or
yarn add less less-loader --dev

配置 webpack ：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

如果是 Vue.js 的项目则需要增加 style 标签的 lang 属性：

3. 在浏览器环境中使用

在 .html 文件的 head 标签内进行引入：

<head>
    <!-- 引入 less -->
    <link rel="stylesheet/less" type="text/css" href="./index.less" />
    <!-- 引入 less.js 核心库 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
</head>

三、用法总结

1、定义变量

我们可以使用 @ 符号开头定义变量，注意要在结尾处加上分号。

@width: 10px;
@height: @width + 10px;

#header {
    width: @width;
    height: @height;
}

编译后代码：

#header {
    width: 10px;
    height: 20px;
}

实际开发中，我们可以根据不同的类型来命名不同的变量，这样不但便于理解，而且易于维护。

/* ============ 距离 ============ */
@space-large: 36px;
@space-middle: 24px;
@space-small: 12px;
// ...

/* ============ 颜色 ============ */
// 颜色可以说是一个项目中定义最多的变量了,可以单独拆分出一个 less 文件进行维护
@color-theme: #0094ff;
@title-color: #090909;
// ...

2、作用域

类似于 JavaScript 中的块级作用域， Less 中同样存在变量的作用域。即有限从最近的作用域下读取变量，换句话说，如果有两个同名变量，那么谁和使用行近谁生效。

// 定义一个同名变量 @color-title
.demo {
    @color-title: pink;

    .item {
        @color-title: skyblue;

        .title {
            color: @color-title; // skyblue
        }
    }
}

编译后代码：

.demo .item .title {
  color: skyblue;
}

3、使用嵌套

在 css 中经常会用到子代选择器，效果可能是这样的：

.container {
  width: 1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

上面的代码嵌套了很多层，写起来很繁琐。可如果用 less 的嵌套语法来写这段代码，就比较简洁。

嵌套的举例如下：

.container {
  width: @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

  div {
    width: 100px;

    .hello {
      background-color: #00f;
    }

  }
}

将上面的less文件编译为 css 文件后，自动生成的代码如下：

.container {
    width: 1024px;
}

.container > .row {
    height: 100%;
}

.container > .row a {
    color: #f40;
}

.container > .row a:hover {
    color: #f50;
}

.container div {
    width: 100px;
}

.container div .hello {
    background-color: #00f;
}

4、Mixin

Mixin 的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。

（1）在 less 文件中定义一个类：（将重复的代码放到自定义的类中）

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

上方代码中，第一行里面，括号里的内容是参数：这个参数是缺省值。

（2）在 less 文件中引用上面这个类：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

5、import

我们可以在一个 less 文件中引入其他的 less 文件，引入后就可以使用被引入文件的变量和映射。一般在一个 less 文件的最顶部进行引入。

// 可以这样引入
@import url(a.less);

// 或者这样引入
@import 'b.less';

// 当然也可以引入 CSS 文件
@import 'style.css';

6. 函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。下面列举一些常用的函数，完整版请移步官网的《Less 函数手册》。

逻辑函数
- if 根据表达式返回不同结果
- boolean 存储一个布尔值，用于 if 判断
字符串函数
- escape 将URL 编码应用于输入字符串中的特殊字符
- replace 替换字符串中的文本
数学函数
- ceil 向上舍入到下一个最高整数
- floor 向下舍入到下一个最小整数
- percentage 将浮点数转换为百分比字符串
- sqrt 计算一个数的平方根。保持单位不变
- abs 计算一个数的绝对值。保持单位不变
- min 返回一个或多个值中的最小值
- max 返回一个或多个值中的最大值

7. 运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 10%;
@filler: @base * 2; // 结果是 20%
@other: @base + @filler; // 结果是 30%

果冻OoO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Less知识点总结

一、Css预处理器和Less基本介绍CSS预处理器之Less详解CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。Less是一个CSS预处理器, Less文件后缀是.less 扩充了 CS
复制链接

扫一扫