预处理器Less

最新推荐文章于 2024-04-14 09:34:20 发布
最新推荐文章于 2024-04-14 09:34:20 发布
阅读量867 收藏 1
点赞数
分类专栏： # Less 文章标签： less javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangqi20170515/article/details/126995214
版权

预处理器Less

1、Less简介

1.1、什么是less？

less是一种动态样式语言；为提高css应用的灵活性和效率，less将css赋予了动态语言的特性，如变量、继承、运算、函数。less既可以在客户端上运行，也可以借助Node.js在服务端运行。

1.2、css的短板

css作为一门标记性语言，初学者第一印象简单易懂，毫无逻辑。在新语法更新时，每当新属性提出，浏览器的兼容又会马上称为绊脚石

2、注释

  1. //这种注释，在编译后不会出现在css文件上
  2. /这种注释，编译后会出现在css文件上/

3、变量

以@开头定义变量，并且使用时知己诶键入@名称，在平时工作中，我们就可以把常用的变量，封装到一个文件中，这样利于代码组织维护。

less文件：

@color: white;
@bg: red;
@width: 200px;
@height: 200px;

#wrap {
  color: @color;
  background-color: @bg;
  width: @width;
  height: @height;
}

生成的css文件：

#wrap {
  color: white;
  background-color: red;
  width: 200px;
  height: 200px;
}

<link rel="stylesheet" href="./index1.css">

<div id="wrap">
    less的变量使用
</div>

在这里插入图片描述

3.1、选择器变量

让选择器变成动态的，变量名必须用{ }包裹起来

less文件：

//选择器变量
@mySelector:#wrap;
@wrap:wrap;

@border:1px solid black;

@{mySelector}{
  color: #ccc;
  width: 50%;
  border: @border;
}
.@{wrap}{
  color: red;
  width: 50%;
  border: @border;
}
#@{wrap}{
  color: blue;
}

生成的css文件：

#wrap {
  color: #ccc;
  width: 50%;
  border: 1px solid black;
}
.wrap {
  color: red;
  width: 50%;
  border: 1px solid black;
}
#wrap {
  color: blue;
}

<div id="wrap">
    less的变量使用
</div>
<div class="wrap">
    less的变量使用
</div>

在这里插入图片描述

3.2、属性变量

可以减少代码书写量，属性变量名必须使用{ }包起来

//属性变量
@boderStyle:border-style;
@Solid:solid;

@mySelector:#wrap;

@{mySelector}{
  color: #ccc;
  width: 50%;
  //属性变量名，必须使用{}包起来
  @{boderStyle}:@Solid;
}

生成的css文件：

#wrap {
  color: #ccc;
  width: 50%;
  border-style: solid;
}

<div id="wrap">
    less的变量使用
</div>

在这里插入图片描述

3.3、url变量

项目结构改变时，修改其变量即可。

@boderStyle: border-style;
@Solid: solid;
@mySelector: #wrap;
//url变量
@images: "../../img";

@{mySelector} {
  background-image: url("@{images}/1.jpg");
  //属性变量名，必须使用{}包起来
  @{boderStyle}: @Solid;
  height: 100px;
}

生成的css文件：

#wrap {
  background-image: url("../../img/1.jpg");
  border-style: solid;
  height: 100px;
}

在这里插入图片描述

3.4、声明变量

有点类似于下面的混合方法：

  • 结构：@name:{属性：值}；
  • 使用：@name()；
@boderStyle: border-style;
@Solid: solid;
@mySelector: #wrap;
//声明变量
@background: {
  background-color: red
}

@rules: {
  width: 200px;
  height: 200px;
}

@{mySelector} {
  @background();
  @rules();
  //属性变量名，必须使用{}包起来
    @{boderStyle}: @Solid;
}

生成的css文件：

#wrap {
  background-color: red;
  width: 200px;
  height: 200px;
  border-style: solid;
}

在这里插入图片描述

3.5、变量运算

  • 加减法时，以第一个数据的单位为基准；
  • 乘除法时，注意单位一定要统一；
  • 在连接运算的时候，注意添加空格避免变量产生找不到的报错
@mySelector: #wrap;
//变量运算
@width: 300px;
@color: #222;

@{mySelector} {
  width: @width - 20;
  height: @width - 200;
  background-color: @color + #333;
  //属性变量名，必须使用{}包起来
  border: 1px solid red;
}

#wrap {
  width: 280px;
  height: 100px;
  background-color: #555555;
  border: 1px solid red;
}

在这里插入图片描述

3.6、变量作用域

一句话理解：就近原则。

@mySelector: #wrap;
//变量作用域

@var: @a;
@a: 100%;
@{mySelector} {
  width: @var;
  @a: 20%;
  border: 1px solid blue;
}

生成的css文件：

#wrap {
  width: 20%;
  border: 1px solid blue;
}

在这里插入图片描述

3.7、用变量去定义变量

@mySelector: #wrap;
//用变量去定义变量
@fond: @var;
@var: "fond";
@{mySelector}::after{
  content: @fond;
  border: 1px solid blue;
}

生成的css文件：

#wrap::after {
  content: "fond";
  border: 1px solid blue;
}

在这里插入图片描述

4、less嵌套

4.1、&

& ：代表的是上一次选择器的名字

.center {
  width: 200px;
  height: 200px;
  background-color: red;

  & #list {
    width: 50px;
    height: 50px;
    background-color: green;

    li {
      width: 20px;
      height: 20px;
      background-color: blue;
    }
  }

  & a {
    color: black;
  }
}

生成的css文件：

.center {
  width: 200px;
  height: 200px;
  background-color: red;
}
.center #list {
  width: 50px;
  height: 50px;
  background-color: green;
}
.center #list li {
  width: 20px;
  height: 20px;
  background-color: blue;
}
.center a {
  color: black;
}

<div class="center">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <a href="https://www.baidu.com">点击跳转百度</a>
</div>

在这里插入图片描述

4.2、媒体查询

唯一的缺点就是每个元素都会编译出自己的@media声明，并不会合并；

//媒体查询
#main {
  @media screen {
    @media (max-width: 768px) {
      width: 100px;
    }
  }
  @media tv {
    width: 2000px;
  }
}

@media screen and (max-width: 768px) {
  #main {
    width: 100px;
  }
}
@media tv {
  #main {
    width: 2000px;
  }
}

5、混合方法

5.1、无参数方法

方法犹如声明的集合，使用时直接键入名称即可。

  • . 与 # 皆可作为方法前缀；
  • 方法后写不写（）看个人习惯；
//.card与.card()是等效的，为了避免代码混淆，可以写成.card()
.card(){
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px;
  box-shadow: 0 1px 2px rgba(150,150,150,58);
  -webkit-box-shadow:0 1px 2px rgba(150,150,150,58);
}
#wrap{
  .card();
}

#wrap {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px;
  box-shadow: 0 1px 2px #969696;
  -webkit-box-shadow: 0 1px 2px #969696;
}

在这里插入图片描述

5.2、有参数方法

  • less可以使用默认参数，如果没有传参数，那么将使用默认参数。
  • @argument犹如JS中的argument指代的是全部参数；
  • 传的参数中必须带单位
.border(@a:1px,@b:50px,@c:30px,@color:red) {
  border: solid 1px @color;
  //@argument指代传进来的全部参数
  box-shadow: @arguments;
}

#wrap {
  .border();
}

css：

#wrap {
  border: solid 1px red;
  box-shadow: 1px 50px 30px red;
}

在这里插入图片描述

5.3、方法的匹配模式

//方法匹配模式
.triangle(top,@width:20px,@color:red) {
  border-color: @color transparent transparent transparent;
}

.triangle(right,@width:20px,@color:green) {
  border-color: transparent @color transparent transparent;
}

.triangle(bottom,@width:20px,@color:orange) {
  border-color: transparent transparent @color transparent;
}

.triangle(left,@width:20px,@color:blue) {
  border-color: transparent transparent transparent @color;
}

.triangle(@_,@width:20px,@color:#fff) {
  border-style: solid;
}

#wrap {
  width: 100px;
  height: 100px;
  .triangle(right, 50px, #222222)
}

css：

#wrap {
  width: 100px;
  height: 100px;
  border-color: transparent #222222 transparent transparent;
  border-style: solid;
}

在这里插入图片描述

5.4、方法的命名空间

  • 在css中>选择器，选中的是儿子元素，就是必须与父元素有直接血缘的元素。
  • 在引入命名空间时，如果使用>选择器，父元素不能加括号。
  • 不得单独使用命名空间的方法，必须先引入命名空间，才能使用其中方法。
  • 子方法可以使用上一层传进来的方法。
//方法的命名空间
#card() {
  background: red;
  .d(@w:300px) {
    width: @w;
    #a(@h:300px) {
      height: @h;
    }
  }
}

#wrap {
  //父级方法就不需要加（）了
  #card > .d > #a(100px);
  border: 1px solid green;
}

#main {
  #card .d();
  border: 1px solid red;
}

#con {
  //不得单独使用命名空间的方法
  #card();
  //.d()如果前面没有引入命名空间#card，就会报错
  .d(200px);
}

css：

#wrap {
  height: 100px;
  border: 1px solid green;
}
#main {
  width: 300px;
  border: 1px solid red;
}
#con {
  background: red;
  width: 200px;
}

在这里插入图片描述

5.5、方法的条件筛选

less没有if else，可是它有when；

  • 比较运算符有： > >= = =< <
  • =代表的是等于
  • 除去关键字true以外的值都被视为false；
//方法的条件筛选
#card {
  //when  &&
  .border(@width,@color,@style) when(@width>100px) and (@color=#999){
    border: @style @color @width;
  }
  //when not  !
  .background(@color) when not (@color>=#222) {
    background: @color;
  }
  //  ， 逗号分隔符方法 ||
  .font(@size:20px) when (@size<50px), (@size>100px) {
    font-size: @size;
  }
}

#wrap {
  #card>.border(10px, #999, solid);
  #card>.background(#444);
  #card>.font(40px);
}

css：

#wrap {
  background: #444;
  font-size: 40px;
}

在这里插入图片描述

5.6、数量不定的参数

如果你希望你的方法接收数量不定的参数，可以使用…，犹如ES6的扩展运算符。

//数量不定的参数
.boxShadow(...) {
  box-shadow: @arguments;
}

.textShadow(@a,...) {
  text-shadow: @arguments;
}

#wrap {
  box-shadow: 1px 4px 10px red;
  text-shadow: 1px 4px 20px #0400ff;
}

css：

#wrap {
  box-shadow: 1px 4px 10px red;
  text-shadow: 1px 4px 20px #0400ff;
}

在这里插入图片描述

5.7、方法使用important!

使用方法：在方法名后加上关键字即可

.border(){
  border: 1px solid red;
}
#wrap{
  .border() !important;
}

css：

#wrap {
  border: 1px solid red !important;
}

5.8、循环方法

less并没有提供for循环的功能，但是可以使用递归实现。

//循环方法 递归的循环方法
.generate-colums(4);
.generate-colums(@n,@i:1) when (@i<=@n) {
  .column-@{i} {
    width: (@i*100%/@n);
  }
  .generate-colums(@n, (@i+1))
}


.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

5.9、属性拼接方法

//属性拼接方法
.boxShadow() {
  box-shadow+: inset 0 0 10px #555;
}

#wrap {
  .boxShadow();
  box-shadow+: 0 0 20px black;
}

.animation() {
  transform+: scale(2);
}

#wrap {
  .animation();
  transform+_: rotate(15deg);
}

css

#wrap {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
#wrap {
  transform: scale(2) rotate(15deg);
}

在这里插入图片描述

6、继承

6.1、extend

extend是less的一个伪类，它可继承所有匹配声明中的全部样式。

  1. 选择器和扩展器之间 是允许有空格的 pre:hover:extend(div pre);
  2. 可以有多个扩展 pre:hover:extend(div pre):extend(.bucket tr) 注意这与pre:hover:extend(div pre, .bucket tr)不一样
  3. 这是不可以的，扩展必须在最后 :pre:hover:extend(div pre).nth-child(odd)
  4. 如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字
.animation {
  transition: all .3s ease-out;

  .hide {
    transform: scale(0);
  }
}

#wrap {
  &:extend(.animation);
}

#con {
  &:extend(.animation .hide);
}

.animation,
#wrap {
  transition: all 0.3s ease-out;
}
.animation .hide,
#con {
  transform: scale(0);
}

6.2、all全局搜索替换

使用选中器匹配到的全部声明

#main {
  width: 200px;
}

#main {
  &:after {
    content: "less is good";
  }
}

#wrap:extend(#main all) {
  border: 1px solid red;
}


#main,
#wrap {
  width: 200px;
}
#main:after,
#wrap:after {
  content: "less is good";
}
#wrap {
  border: 1px solid red;
}

在这里插入图片描述

6.3、减少代码的重复性

extend与方法最大的差别，就是extend是同一个选择器共用同一个声明，而方法是使用自己的声明，这增加了代码的重复性；
与上面的代码进行比对：

#Method() {
  width: 200px;
  &:after {
    content: "less is good";
  }
}

#wrap {
  #Method();
  border: 1px solid red;
}


#wrap {
  width: 200px;
  border: 1px solid red;
}
#wrap:after {
  content: "less is good";
}

7、导入

7.1、import

@import “less文件名”;

7.2、reference

使用引入的less文件，但是不会编译；

@import (reference) “less文件名”;

7.3、once

@import语句的默认行为，这表明相同的文件之后被导入一次，而随后导入的文件的重复代码都不会被解析
@import (once) “less文件名”;

7.4、multiple

使用 @import (multiple)允许导入多个同名文件；
@import (multiple) “less文件名”;

8、条件表达式

8.2、带条件的混合

  • 比较运算符：> , >= ,= ,=< ,<
  • 格式：when(){ }
.mixin(@a) when (lightness(@a)>=50%) {
  background: black;
}

.mixin(@a) when (lightness(@a)<50) {
  background: orange;
}

.mixin(@a) {
  color: @a;
}

#wrap {
  background: orange;
  color: #555;
}

在这里插入图片描述

8.2、类型检测函数

检测值的类型

  • isColor
  • isNumber
  • isString
  • isKeyword
  • isUrl

.mixin(@a:#fff;@b:16px) when (isNumber(@b)) {
  color: @a;
  font-size: @b;
}

.mixin(@a,@b:balck) when (isColor(@b)) {
  font-size: @a;
  color: @b;
}
#wrap{
  .mixin(#666,30px)
}


#wrap {
  color: #666;
  font-size: 30px;
}

在这里插入图片描述

8.3、单位检测函数

检测一个值除了数字是否是一个特定的单位

  • isPixel
  • isPercentage
  • isEm
  • isUnit

9、函数

9.1、函数库

  • less中封装了很多函数库，例如颜色定义、颜色操作、颜色混合、字符串处理等等。
  • 例如color()：用于解析颜色，将代表颜色的字符串转换为颜色值。
body{
  color: color("#f60");
  background-color: color("red");
}


body {
  color: #f60;
  background-color: #ff0000;
}
  • 例如convert()：将数字从一种类型（单位）转换为另一种类型
  • 长度单位：m , cm , mm , in , pt , px , pc
  • 时间单位：s , ms
  • 角度单位：rad(弧度) ,deg（度），grad（梯度），tum（圆）
学习前端的渣渣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
预处理器less
li520_fei的博客
02-01 2252
预处理器less less官方网站 bootstrap中less教程 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言， 增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。 less能干啥 举个例子 这是css写法，如果写的太多搞不清楚嵌套层级 * { margin: 0; padding: 0; } #wrap { position: relative; width: 30
前端构建 Less入门(CSS预处理器)
10-20
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
css预处理器：sass和less
Westrate_WT的博客
01-17 1574
对css预处理器中的sass和less的理解
探索Less：一款强大的CSS预处理器
最新发布
gitblog_00077的博客
04-14 242
探索Less：一款强大的CSS预处理器 项目地址:https://gitcode.com/less/less-docs Less 是一个开源的CSS预处理器，它为CSS添加了变量、嵌套规则、运算符等功能，极大地提升了样式表的可维护性和复用性。这个项目包含了详细的文档，帮助开发者更好地理解和使用Less。 项目简介 Less是一个JavaScript编写的库，它允许你在CSS中使用变量、混合（mix...
探索LESS：与CSS预处理器的比较及实践指南
知行合一
03-03 564
less 文件是一种层叠样式表（CSS）预处理器语言的文件格式，简称 LESS（Leaner Style Sheets）。它扩展了 CSS 语言，增加了变量、混合、函数和许多其他技术，使得 CSS 更加易于维护和扩展。
推荐：Less - 简洁而强大的CSS预处理器
gitblog_00094的博客
03-18 665
推荐：Less - 简洁而强大的CSS预处理器 Less是一个简洁而强大的CSS预处理器，它扩展了CSS的功能，并提供了许多实用的特性，使开发者能够更高效地编写样式表。本文将为您介绍Less的基本概念、功能及优势，帮助您更好地了解并使用此项目。 Less 是什么？ Less是一种CSS预处理器，它允许您在CSS中使用变量、嵌套规则、运算符等功能，从而提高代码的可读性和可维护性。Less编译后生成标...
五分钟 了解 Less 及使用
记录编程学习笔记
08-11 593
less 的路径及使用
LESS 预处理器
weixin_34138255的博客
06-01 311
维护 CSS 的弊端 css本质上不是一门语言,是一个简单的样式表,代码维护相对老套,不够灵活. Less介绍 less预处理器 : 依然使用css语法, 引入了变量, 混合, 运算, 嵌套等功能, 大大简化了css 的编写,并且 降低了 css 的维护成本 常见的css预处理器 : Less | SASS | stylus 等 复制代码变量 ☞@自定义变量名: 值; 例如: ...
LESS预处理器
luffot的博客
10-29 506
变量： LESS样式中唯一的区别就是变量名之前使用的是@字符 作用域： LESS中的作用域和其它程序语言的中的作用域非常的相同，它首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级的往下查找，直到根为止 3.混合（JS函数的封装） Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作
Sass 和 Less CSS预处理器1
08-08
4.解析问题1.编译环境不一样Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可 以
学习CSS预处理器:Sass和less进行对比
09-25
Css可以让你做很多事情，但它毕竟是给浏览器认的东西，对开发者来说，Css缺乏很多特性
css预处理Less
菜鸟搬砖记
06-04 442
什么是Less？ Less其实就是css预处理器，简单的说，就是动态编写css。 Less用法 首先以vue中开发为例，先安装less和less-loader npm install less less-loader 1.变量 1.变量值定义 格式： @变量名 @width:100px; .hello{ width: @width; } 最...
预处理 less
hhh_7789的博客
04-15 492
目录 一、less概述 二、less编译工具 三、less中的变量 1. 使用@来声明一个变量 2. 变量的延迟加载 四、less的嵌套规则 1. 基本嵌套规则：父级、祖先等 2. &的使用： &代表的是平级 ​​ 五、less中的混合 1. less的混合概述 2. less的混合方式 3. 命名参数 6. 匹配模式 六、less运算 七、继承 八、避免编译 一、less概述 less是一种动态样式语言，属于css预处理器的范畴，它扩展了cs.
less预处理器
al654123的博客
03-08 583
一、less预处理器 Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。 1.插件安装 安装Easy LESS插件就能使写入的.less文件保存时自动生成.css文件 2.用法 1.less中的语法完全兼容css语法。 2.HTML引入时，需要引入的是CSS文件。 3.less自动生成为css文件后，不能直接修改生成的css文件，因为less文...
less预处理
HMing的博客
10-24 298
Less官方中文网站 Less介绍： Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 作为一个后端开发人员，在项目开发中，被调到前端开发，遇到了从来没有用的Less编写前端样式，接下来学习一下他的语法，写一些小列子来玩玩。 ...
CSS预处理器—Less
爱前端的程序媛的博客
02-05 268
CSS中常用预处理器有两种：Less和Sass。 今天接触的是Less预处理器，简单的了解了一下。 emmmmm，其实吧，今天主要是看了看Less的语法什么的，Less的语法跟CSS语法很像，及其的相似。Less是预处理，就是在浏览器解析代码之前，Less先执行，CSS是浏览器解析的。Less通过解析，生成CSS文件，应用在页面中。Less比CSS强大，有很多CSS没有的东西，比较灵活一点。 ...
css预处理器的比较less sass
04-28
目前比较流行的CSS预处理器有Less和Sass两种。它们都提供了类似的功能，但之间还是有一些差别的。 首先，语法不同。LESS的语法比较类似CSS，采用大括号和分号作为语句结尾。而Sass则更加简洁，采用缩进来标记代码块...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值