CSS 笔记（十二）：预处理器 —— Less

最新推荐文章于 2024-04-17 18:27:07 发布
最新推荐文章于 2024-04-17 18:27:07 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： CSS 笔记 文章标签： css less javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Raymiles/article/details/126691068
版权

CSS 笔记（十二）：预处理器 —— Less

什么是 CSS 预处理器

CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性，使用 CSS 预处理器可以使 CSS 具有简洁，适应性强，代码直观等优点，常见的 CSS 预处理器如下：

  • Less
  • Sass
  • Stylus

什么是 Less

Less（Leaner Style Sheets）是一种 CSS 预处理语言，为 CSS 赋予了动态语言的特性，扩展了 CSS 语言，增加了变量、Mixin（混合）、嵌套、函数和运算等特性，使 CSS 更易于维护和扩展

如何使用 Less

引入

  1. 编写（引入） Less 代码
    • 内嵌方式时，必须说明文本类型
      • <style type="text/less">...</style>
    • 外链方式时，以 .less 为文件扩展名，并以 link 导入
      • <link rel="stylesheet/less" type="text/css", href="style.less">
  2. 引入 less.js 文件
    • <script src="./js/less.js"></script>

使用 Less 时，必须先引入 Less 代码，之后引入 less.js 文件，此外，使用外链方式引入 .less 文件时，必须在服务端环境才能生效

预编译

使用引入的方式时，将损耗浏览器性能，可以使用预编译将 .less 文件编译为 .css 文件，之后引入 .css 文件即可

  1. 编写 .less 文件
  2. 预编译生成 .css 文件
  3. 引入 .css 文件

使用此方式不用引入 less.js 文件，也无需在服务端环境运行

注释

类似于 JavaScript，Less 也有单行注释与多行注释

// 单行注释

/*
    多行注释
*/

必须注意的是，将 .less 文件编译为 .css 文件时，单行注释并不参与编译，因此在 .css 文件中不存在 .less 文件中的单行注释

变量

类似于 JavaScript，Less 也有变量，其特性与 ES6 之前使用 var 相似，示例如下：

@w: 200px;  // 初始化
@h: @w; // 赋值
@bc: pink;

.box {
    @bc: blue;  // 作用域
    width: @w;
    height: @h;
    background-color: @bc;  // 蓝
}

.reyn {
    width: @w;
    height: @h;
    background-color: @bc;  // 红
}

@bc: red;   // 延迟加载、覆盖

在上述示例中，展示的特性如下：

  1. 作用域
  2. 延迟加载
  3. 赋值
  4. 初始化
  5. 覆盖

插值

除了可以将属性值赋予变量之外，也可以将选择器与属性名称赋予变量，不过，必须以插值的形式使用，示例如下：

@size: 200px;
@w: width;
@s: div;

@{s} {
    @{w}: @size;
    height: @size;
    background-color: red;
}

运算

在 Less 中，支持简单的加、减、乘、除运算，示例如下：

@size: 200px;
@bc: red;

div {
    width: @size;
    height: @size;
    background-color: @bc;
    position: absolute;
    left: 50%;
    margin-left: (-@size / 2px);  // 居中
}

在上述示例中，运算时必须指明单位，可以指定任意一个操作数，也可以均指定

混合

混合（Mix in），即将重复使用的代码封装到一个类中，在需要使用的地方调用此类即可，示例如下：

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@size: 300px;

.reyn {
    width: @size;
    height: @size;
    background-color: red;
    .center;
    .morales {
        width: (@size - 100px);
        height: (@size - 100px);
        background-color: blue;
        .center;
    }
}

通过观察编译之后的 .css 文件，混合的本质即将某个被引用的类中的所有代码拷贝到引用此类的位置，此外，在 .css 文件中保存了被引用的类，使用以下写法时，在 .css 文件中不会保留被引用的类

.center() {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@size: 300px;

.reyn {
    width: @size;
    height: @size;
    background-color: red;
    .center();
    .morales {
        width: (@size - 100px);
        height: (@size - 100px);
        background-color: blue;
        .center();
    }
}

在上述示例中，引用类时的 () 不是必须的

参数

类似于 JavaScript 中的函数，Less 中的混合也可以使用参数以及相关特性，示例如下：

.whbc(@w: 100px, @h: 100px, @bc: pink) {
    width: @w;
    height: @h;
    background-color: @bc;
}

.box1 {
    .whbc(200px, 200px, red);
}

.box2 {
    .whbc(300px, 300px);
}

.box3 {
    .whbc(@bc: blue);
}

在上述示例中，Less 中的混合可以使用默认参数，此外，可以在传递实参时指定哪一个形参接收此参数，此外，Less 中的混合可以使用 ...，也可以使用 arguments，来使用所有参数，示例如下：

.animate(@name, @time, ...) {
    transition: @arguments;
}

@size: 200px;

div {
    width: @size;
    height: @size;
    background-color: red;
    .animate(all, 4s, linear, 0.5s);
}

div:hover {
    width: (@size * 2);
    height: (@size * 2);
    background-color: blue;
}

匹配模式

在若干同名的混合中使用一个特定的混合时，可以使用匹配模式匹配某一个混合，示例如下：

.triangle(topLoc, @width, @color) {
    width: 0;
    height: 0;
    border-width: @width;
    border-style: solid;
    border-color: @color transparent transparent transparent;
}

.triangle(rightLoc, @width, @color) {
    width: 0;
    height: 0;
    border-width: @width;
    border-style: solid;
    border-color: transparent @color transparent transparent;
}

.triangle(downLoc, @width, @color) {
    width: 0;
    height: 0;
    border-width: @width;
    border-style: solid;
    border-color: transparent transparent @color transparent;
}

.triangle(leftLoc, @width, @color) {
    width: 0;
    height: 0;
    border-width: @width;
    border-style: solid;
    border-color: transparent transparent transparent @color;
}

.box {
    .triangle(downLoc, 20px, red);
}

在 Less 中，在所有形参之前添加一个混合标识，在引用时说明此标识即可，此外，在上述示例中，存在冗余代码，可以使用通用匹配模式减少冗余，示例如下：

.triangle(@_, @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
}
.triangle(topLoc, @width, @color) {
    border-width: @width;
    border-color: @color transparent transparent transparent;
}

.triangle(rightLoc, @width, @color) {
    border-width: @width;
    border-color: transparent @color transparent transparent;
}

.triangle(downLoc, @width, @color) {
    border-width: @width;
    border-color: transparent transparent @color transparent;
}

.triangle(leftLoc, @width, @color) {
    border-width: @width;
    border-color: transparent transparent transparent @color;
}

.box {
    .triangle(downLoc, 20px, red);
}

在上述示例中，将之前所有混合中的相同代码封装在另一个同名混合中，使用 @_ 标识此混合（通用混合），如此，在匹配任意一个同名混合时，均将同时匹配通用混合

导入

在 .less 中可以导入其它 .less 文件，且可以省略文件扩展名，示例如下：

@import "triangle";

.box {
    .triangle(downLoc, 20px, red);
}

层级结构

在 Less 中使用伪类选择器时，具有特殊的写法，示例如下：

.center() {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@size: 300px;

.reyn {
    width: @size;
    height: @size;
    background-color: red;
    .center();
    .morales {
        &:hover {
            background-color: skyblue;
        }
        width: (@size - 100px);
        height: (@size - 100px);
        background-color: blue;
        .center();
    }
}

在 Less 中，如果使用嵌套的形式定义 CSS 类，那么在编译之后的 .css 文件中将以后代选择器的形式组织嵌套类，使用 & 符号可以关闭此功能，因此，可以使用此符号编写伪元素选择器，示例如下：

.center() {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@size: 300px;

.reyn {
    width: @size;
    height: @size;
    background-color: red;
    .center();
    &::after {
        content: "";
        display: block;
        width: 100px;
        height: 100px;
    }
}

继承

在 Less 中，可以使用继承减少代码的冗余度，示例如下：

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@size: 300px;

.reyn:extend(.center) {
    width: @size;
    height: @size;
    background-color: red;
    .morales:extend(.center) {
        width: (@size - 100px);
        height: (@size - 100px);
        background-color: blue;
    }
}

在上述示例中，实现的功能与使用混合时相同，区别在于，使用继承时，在编译之后的 .css 文件中以并集选择器的方式处理，而非拷贝

条件判断

在 Less 中，可以使用 when 条件判断决定在引用一个混合时，是否执行此混合，在条件中可以使用的运算符如下：

  • 比较
    • >
    • <
    • >=
    • <=
    • =
  • 逻辑
    • ,
    • and
  • 内置函数

示例如下：

.size(@w, @h) when (@w < 50) {
    width: @w;
    height: @h;
}

.size(@w, @h) when (@w > 50)and(@h <= 50) {  // 与
    width: @w;
    height: @h;
}

.size(@w, @h) when (@w = 50),(@h >= 50) {    // 或
    width: @w;
    height: @h;
}

.size(@w, @h) when (ispixel(@w)) {
    width: @w;
    height: @h;
}
Reyn Morales
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS常见的预处理器有哪些？
祈澈菇凉
10-21 666
它提供了许多功能，如变量、嵌套规则、混合（Mixins）、继承（Inheritance）等，以增强CSS的可维护性和灵活性。这些CSS预处理器都提供了类似的功能，如变量、嵌套规则、混合等，使用CSS预处理器需要在开发过程中进行编译，生成最终的CSS文件。2：LESS（Leaner CSS）：LESS是另一个流行的CSS预处理器，提供了类似于Sass的功能，如变量、嵌套规则、混合等。3：Stylus：Stylus是一种简洁、灵活的CSS预处理器，具有类似于Sass和LESS的功能。
前端基础 - 深入浅出css预处理器
zhqi9277的博客
07-22 1773
CSS预处理器是一种基于CSS的另一种语言，通过预处理器编写的代码会被编译成普通的CSS文件。预处理器在CSS的基础上添加了许多新特性和功能，有助于提升CSS文件的组织结构和代码可维护性。
前端构建 Less入门(CSS预处理器)
10-20
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
CSS 预处理器
最新发布
猫老板的豆
04-17 1158
Sass和Less都使用符号来定义变量。Stylus则既可以使用符号，也可以使用符号来定义变量。
css 预处理器
且听风吟的博客
02-11 8746
由于多个项目中用到了sass和less，所以就学习了一下相关知识，记录下来方便随时查看。 前言 css是用来编写网站样式，但是，其写法比较一成不变。 如果想要使用 css 实现 js 一样的变量、常量等，就会比较臃肿，难以维护。 所以，作为css的扩展，出现了css预处理器。 CSS预处理器 css预处理器定义了一种新的语言，主要是通过用一种专门的编程语言，为css添加一些编程特性，再编译生成css文件。 它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，对于那些需要大量样式表和样
关于html样式和css样式的区别,less和css的区别是什么？
weixin_39944074的博客
07-20 503
LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。LESS是一种动态样式表语言，扩展了CSS的功能。下面我们来看一下less与css的一些介绍和他们的区别。less与css介绍：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用...
Less语法介绍以及和CSS的区别(整理版)
m0_63779088的博客
07-19 5258
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展Less和CSS非常像，因此很容易学习。而且Less仅对CSS语言增加了少许方便的扩展Less文件需要经过Less预处理器编译成为CSS。...
css经典学习笔记.zip
11-01
预处理器如Sass和Less扩展了CSS，引入变量、嵌套规则、混合等功能，提高代码可维护性。后处理器如PostCSS则处理CSS代码，添加自动化任务，如自动添加浏览器前缀。 七、CSS性能优化 优化CSS性能包括减少选择器...
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符、函数等特性，使得CSS编写更加简洁、可维护性更强。本笔记将深入探讨LESS的重要概念、...
vue第五天笔记04——打包
08-23
5. **CSS预处理器**：Vue项目中常使用Sass、Less等CSS预处理器，它们提供了更丰富的语法特性。Webpack会通过相应的加载器（如`style-loader`和`css-loader`）处理这些预处理器的代码。 6. **优化**：Webpack提供了...
less语法小结-源代码+注释.rar
04-07
在前端开发领域，Less是一种强大的CSS预处理器，它扩展了CSS的功能，让样式表编写更加简洁、高效。本文将基于“less语法小结-源代码+注释.rar”这个压缩包中的内容，深入探讨Less的重要特性，包括变量、混合、继承...
web开发技术——课程笔记.rar
03-17
此外，CSS预处理器如Sass和Less能提高代码的可维护性。 3. JavaScript： JavaScript是网页动态功能的核心，用于处理用户交互、数据操作和服务器通信。学习JavaScript需掌握变量、数据类型、控制流、函数、对象和...
css预处理器
m0_67388537的博客
07-13 359
打开左下角的window开始键，翻到window powerShell选项，然后点开，在window PowerShell选项上点击右键，选择使用管理员身份运行。SASS是一种CSS的开发工具，提供了许多便利的写法，它扩展了CSS语言，增加了变量，Mixin，函数等特性，，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令。基于ruby的sass插件 可以在windows或苹果机器上使用。
CSS基础：Less的使用以及注意项
u011863822的博客
04-01 5181
本篇主要聊的less的安装，以及使用过程中如果声明变量，方法。还有其继承，导入when和if关键字。
CSS预处理器
夜栩的博客
06-27 920
所谓的CSS预处理器，它们是一类工具或语言扩展，用于增强CSS的功能并提供更高效的开发方式。它可以通过引入变量、嵌套、混合、继承、条件语句等功能，使得编写和维护样式表更加便捷和灵活。
less和css的区别/less和scss的区别
m0_67841039的博客
06-15 3829
区别：1、Less是一门CSS预处理语言，而css是一种用来表现HTML或XML等文件样式的计算机语言；2、less扩展了CSS语言，增加了css本身没有的变量、函数等特性；3、css可以被浏览器直接识别，less需要先编译为css。...
常见的CSS预处理器——Less
RouKou的博客
05-18 2622
目录 一.Less介绍 1. 官方介绍 2.自我理解 二.Less的使用 1.在VSCode上的安装使用 （1）插件安装 2.在HMTL上的引用 三.常见用法示例 1.从第一个Less变量开始 2.变量计算 3.变量混合 4.嵌套规则 5.函数的使用 6.条件判断 7.变量作用域 8.不得不说的import指令 9.综合实例 一.Less介绍 1. 官方介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CS
HTML-用less写css样式
qq_45152044的博客
01-16 1733
用less写css样式
css预处理器的比较less sass
04-28
CSS预处理器是一种能够扩展CSS语言功能并加快CSS开发效率的工具。目前比较流行的CSS预处理器有Less和Sass两种。它们都提供了类似的功能，但之间还是有一些差别的。 首先，语法不同。LESS的语法比较类似CSS，采用大括号和分号作为语句结尾。而Sass则更加简洁，采用缩进来标记代码块的开始和结束。 其次，变量的声明方式不同。在LESS中，变量的声明采用@符号，如@color: #333;。而Sass则采用$符号，如$color: #333;。 此外，还有一些小差别。比如，Sass支持嵌套和迭代，可以在一定程度上简化代码。LESS则支持混合（mixin）的定义和使用，方便重用样式。 总的来说，LESS和Sass都是很好的CSS预处理器工具，选择哪一种主要看自己的喜好和使用习惯。如果对CSS语法较为熟悉，可能会更喜欢LESS；如果想要更简洁的语法和更多的功能，可能会更喜欢Sass。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值