CSS预处理器Less（学习记录）

最新推荐文章于 2024-08-15 14:30:00 发布
最新推荐文章于 2024-08-15 14:30:00 发布
阅读量97 收藏
点赞数
分类专栏： 学习记录 文章标签： css less 前端

1. CSS编写的痛点

  1. CSS作为一种样式语言, 本身用来给HTML元素添加样式是没有问题的.

  2. 但是目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作.

  3. 随着代码量的增加, 必然会造成很多的编写不便：

    • 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便；
    • 比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 那么需要修改大量代码, 可维护性很差; (比如主题颜色)
    • 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆;
    • 等等一系列的问题；

2.CSS预处理器(CSS_preprocessor)

  1. CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序;
  2. 市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
  3. 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS;

3. 常见的CSS预处理器

4. Less

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

  1. Less增加了很多相比于CSS更好用的特性;
  2. 比如定义变量、混入、嵌套、计算等等；
  3. Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）；

4.1 less代码的编译

<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

easy less 保存less文件以后，就自动在当前文件夹生成css文件。

4.1 语法一：Less兼容CSS

◼ Less语法一：Less是兼容CSS的

  1. 所以我们可以在Less文件中编写所有的CSS代码；

  2. 只是将css的扩展名改成了.less结尾而已；

4.2 语法二 – 变量（Variables）

◼ 在一个大型的网页项目中，我们CSS使用到的某几种属性值往往是特定的

  1. 比如我们使用到的主题颜色值，那么每次编写类似于#f3c258格式的语法；
  2. 一方面是记忆不太方便，需要重新编写或者拷贝样式；
  3. 另一方面如果有一天主题颜色改变，我们需要修改大量的代码；

  4. 所以，我们可以将常见的颜色或者字体等定义为变量来使用；
    ◼ 在Less中使用如下的格式来定义变量；
    @变量名: 变量值;

4.3 语法三 – 嵌套（Nesting）

可以理解为&就是外面这个选择器的名称

    a.link {
      color: @mainColor;
      font-size: @smallFontSize;

      background-color: #0f0;
      
      &:hover {
        color: #00f;
      }
    }
相当于a.link:hover


  <!-- &符号的练习 -->
  <ul class="list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
  </ul>
// &符号的练习
.list {
  .item {
    font-size: 20px;

    &:hover {
      color: @mainColor;
    }

    &:nth-child(1) {
      color: orange;
    }

    &:nth-child(2) {
      color: #00f;
    }
  }
}

4.4 语法四 – 运算（Operations）

◼ 在Less中，算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

  1. 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
    css中calc自带的加减乘除运算比较弱，不支持calc(10em+20px）之类的运算的。less中的加减乘除比较强大。加减乘除单位不一样的话，时会对单位进行换算的。10em+20px，计算的结果以最左侧操作数的单位类型为准；也就是em。

  2. 如果单位换算无效或失去意义，则忽略单位；

4.5 语法五 – 混合（Mixins）

◼ 在原来的CSS编写过程中，多个选择器中可能会有大量相同的代码

  1. 我们希望可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；

  2. 在less中提供了混入（Mixins）来帮助我们完成这样的操作；
    ◼ 混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

     

    ◼ 注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用；
    一般会在less的文件夹里面创建一个mixins.less文件，里面放的都是混入的方法的定义。
    在日常开发中，推荐类选择器，因为id选择器不能重复，多人开发容易冲突。

带参数的情况：

// 2.2.混入是可以传递参数(定义变量)的
.box_border(@borderWidth: 5px, @borderColor: purple) {
  border: @borderWidth solid @borderColor;
}

.box1 {
  background-color: #f00;
  .box_border();
}

.box2 {
  width: 150px;
  background-color: #0f0;
  .box_border(10px, orange);
}

4.6 Less语法六：映射（Maps）

// 2.3.混入和映射(Map)结合使用
// 作用: 弥补less中不能自定义函数的缺陷
.box_size {
  width: 100px;
  height: 100px;
}

.box1 {
  width: .box_size() [width];
  /* 只需要 .box_size里面的width
  如果全部需要，就直接混入
  .box_size()
  */
  background-color: #f00;
}

4.7 语法七：extend继承

https://lesscss.org/less-preview/

  1. 和mixins作用类似，用于复用代码；

  2. 和mixins相比，继承代码最终会转化成并集选择器；

混合

.box_border {
  border: 5px solid #f00;
}

.box {
  width: 100px;
  background-color: orange;

   .box_border();
}
转成css后
.box_border {
  border: 5px solid #f00;
}
.box {
  width: 100px;
  background-color: orange;
  border: 5px solid #f00;
}

继承

.box_border {
  border: 5px solid #f00;
}

.box {
  width: 100px;
  background-color: orange;

 &:extend(.box_border);
}
转成css后
.box_border,
.box {
  border: 5px solid #f00;
}
.box {
  width: 100px;
  background-color: orange;
}

总结：
混合是把调用的名字插入替换成里面的内容
继承代码最终会转化成并集选择器。一般用混入多，混入可以传入参数。
混入的话，转成css后阅读性更多。

4.8 语法八：Less内置函数

  1. Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
  2. 内置函数手册：https://less.bootcss.com/functions/

4.9 语法九：作用域（Scope）

  1. 在查找一个变量时，首先在本地查找变量和混合（mixins）；

  2. 如果找不到，则从“父”级作用域继承；
    如果一个变量在全局有定义，在父元素有定义，在爷爷元素有定义，儿子就是使用距离它最近的变量，也就是父亲里面的，父亲没有就是用爷爷的。自己里面有这个变量，就使用自己的。就近原则。

     

    如果自己混入了一个
    .box_mixin {
    @mainColor: orange;
    }
    这个mainColor属性就插入到自己里面了，
    然后自己的颜色就是这个orange了。不去找父辈元素里面的这个变量了。

4.10 语法十：注释（Comments）

在Less中，块注释和行注释都可以使用
// 单行注释
/* 多行注释 */

4.11 语法十一：导入（Importing）

  1. 导入的方式和CSS的用法是一致的；
  2. 导入一个 .less 文件，此文件中的所有变量就可以全部使用了；
  3. 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；

5.认识Sass和Scss

  1. 事实上，最初Sass 是Haml的一部分，Haml 是一种模板系统，由 Ruby 开发者设计和开发。

  2. 所以，Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进；

  3. 我们会发现它的语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的。
  4. 目前在前端学习SCSS直接学习SCSS即可：
    • SCSS的语法也包括变量、嵌套、混入、函数、操作符、作用域等；
    • 通常也包括更为强大的控制语句、更灵活的函数、插值语法等；
    • 大家可以根据之前学习的less语法来学习一些SCS语法；
    • https://sass-lang.com/guide

内容出处：

作者：未路过
链接：https://www.jianshu.com/p/3013c62e4af3
来源：简书

qq_57872258
关注
专栏目录
CSS预处理器Less
天涯学馆
05-29 118
保持良好的命名约定，使用有意义的变量和混合名称。将相关的Less代码组织到不同的文件中，比如将变量、混合、基础样式、组件样式分别放在不同的文件，然后通过导入语句整合。使用像lessc这样的编译器或集成开发环境（IDE）如VSCode的EasyLESS插件，将Less文件转换为CSS。尽可能限制变量的作用域，避免全局变量导致的意外样式覆盖问题。这段代码定义了一个可定制样式的按钮，通过改变传入的参数，可以轻松创建不同风格的按钮。Less支持选择器继承，允许一个选择器继承另一个选择器的所有属性。
4.18 npm包管理工具学习以及css预处理器介绍
qq_40757785的博客
04-20 774
1.nodejs nodejs是基于google chrome v8 引擎的运行时(执行javascript代码的运行环境) 作用: 脱离浏览器环境执行javascript代码 2. npm 依赖于node环境的大型包管理器，安装nodejs时一起安装的 3.npm的使用： 检查版本号 npm -v 本地安装包 npm install 包名 （install可以简写为i） 全局安装包 npm install 包名 卸载包 npm unins...
CSS进阶-LESS(简介)
冯泽威的博客
12-21 903
LESS简介LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。LESS安装（sublime）安装less2css插件： 方法：ctrl+shift+p>install Package>输入less
CSS——LESS
01-08 399
去年就初次接触了LESS,并用他制作了一个Less.org的首页页面，但由于CSS的固有模式，没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less（我在《CSS——Bootstrap From Twitter》有简单的提到过Less），又发现了他的强大与方便，于是横下心来又重新开始学习Less。这次的学习中让我发现了他的更强大，从而也让
CSS——less
最新发布
Fan_web的博客
08-15 392
本文主要分享less的一些简单地学习内容，以及对于混合函数的一些引入，下一篇我们即将学习CSS的弹性盒知识。
css-Less
weixin_34306446的博客
01-22 254
介绍 语法 介绍 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提高开发效率。 但正因为它是预处理语言，因此不能直接被使用，需要进行编译后才可以。 less需要 nodejs支持。 安装： > npm install -g less 查看: > lessc 编译 命令编...
vue学习+css预处理器
weixin_43187545的博客
08-04 346
一、命令 1.`v-if`与`v-show` 2.`@`事件绑定 v-on的简写 用于绑定事件 3.`v-for`用于循环 v-for="{item，index} in list" 5.`v-model` 表单的同步改变 二、父子组件传值：props与$emit props怎么传值？ 1、父组件中import引入、components中引入、templete中插入<child :name=value><child/> 2、子组件中props中引入
CSS预处理器：简化网页样式的开发
CSS预处理器是一种可以扩展CSS功能的工具，它使用特定的语法和功能，使得编写和维护CSS代码变得更加简洁、模块化和可维护。与原生CSS相比，CSS预处理器通过引入变量、嵌套规则、混合、继承、运算和函数等特性，提供...
前端学习笔记-8.6css预处理器Stylus问题报错注意事项 在vue-cli项目中
qq_43000359的博客
10-04 357
要用stylus，出现了问题，被坑了。 什么是css预处理器？ 推荐：三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus 1.安装(windows7.64位) 全局输入以下命令： npm install stylus -g 项目中安装： npm install stylus 2.让编辑器支持stylus(我用的atom) 在Atom的Package中搜索stylus，选款安装即可...
less css
金溪的博客
12-13 676
Less是一个CSS的超集，Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：（1）Less的语法 （2）Less预处理器。浏览器终究只认识CSS，所以Less文件需要经过Less预处理器编译成为CSS。 在工具的支持下，一个Less文件首先会经过CSS modules的编译，把类名全局唯一化，然后才被Less 预处理器编译成为CSS文件，所以Less文件可以和CS...
CSS预处理器—less
weixin_52629158的博客
04-16 912
CSS预处理器的概念 首次成为前端web开发工作流程的主流 并改变了我们编写CSS的方式。CSS预处理器是一种工具，用于通过自己的脚本语言扩展默认普通CSS的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、混合、代码嵌套和继承等等，使普通的CSS更加强大。通过使用CSS预处理器，您可以无缝地自动化日常任务，构建可重用的代码段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。目前世界各地开发人员使用的3种最流行的CSS预处理器，即LESS、Stylus和Sass。
css Less基础
黄大仙
08-23 489
维护css的弊端less介绍Less使用less变量变量名语法规范less编译less嵌套less算数运算 维护css的弊端 CSS是一门非程序式语言,没有变量、函数、 SCOPE(作用域)等概念CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。不方便维护及扩展,不利于复用，没有很好的计算能力。非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CS代码项目。 less介绍 Less( Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预
css之less
qq_36939013的博客
05-05 271
文章目录css变量less变量&语法&就代表父选择器继承 extend基本语法选择器分组混合语法基本语法声明变量语法 css变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport"...
css less使用
honghuzhiyan的博客
01-09 949
less Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 自己的理解： Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给...
前端基础入门之css less
LoveSummer
06-20 7970
是一门的预处理语言在中搜索，点击html 代码使用快捷方式创建代码生成代码 less 代码创建文件，编写代码 插件会帮助我们在所在目录下面生成一个相同名称的文件查看生成的代码 我们直接在 HTML 中引入生成的 运行代码，查看效果中的单行注释，注释中的内容不会被解析到中中的注释，内容会被解析到文件中 父子关系嵌套 在中，父子关系可以直接嵌套 对应的 变量 变量，在变量中可以存储一个任意的值并且我们可以在需要时，任意的修改变量中的值变量的语法： 生成的代码 注意：在中使用语法需要用引号包裹 生成的代码 拼
css-preprocessors
weixin_30315723的博客
08-02 427
what ? 预处理器是css 能够使用 变量、操作符、函数、mixins、interpolations 等类似于js 功能的一种语言。 目前比较常用是三种：SASS、less 、stylus 。 Why ? css 是古老的、不完整的。(哪天要是CSS 自己支持这些，就不用这些啦！)创建函数、重复使用一个变量、继承，css 都是不支持的。对一些大型的、复杂的项目，维护是一个非常困难的事情。...
CSS框架——Less
sunshine_hl的博客
10-21 554
CSS框架——Less
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值