快速入门less

最新推荐文章于 2023-11-24 14:17:38 发布
最新推荐文章于 2023-11-24 14:17:38 发布
阅读量382 收藏
点赞数
分类专栏： less 文章标签： css less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cake_eat/article/details/109287116
版权

一、什么是less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

Less官网地址：http://lesscss.cn/

二、less编译工具

作用：将less类型的文件转换为css类型的文件。

常见的Less编译工具有： winLess、simpLess、Koala

koala 官网：http://koala-app.com/

三、less中的注释

  • 以//开头的注释，不会被编译到css文件中
  • 以/**/包裹的注释会被编译到css文件中

四、less中的变量

使用@来申明一个变量：@pink:pink

  1. 作为普通属性值来使用：直接用@pink
  2. 作为选择器和属性名：#@{selector的值}
  3. 作为url：@{url}
  4. 变量的延迟加载

例如：

less：

@color:deeppink;
@m:margin;
@selector:#wrap;
*{
  padding: 0;
  @{m}: 0;
  @{selector}{
    background-color: blue;
    width: 200px;
    height: 200px;
    .inner{
      background-color: @color;
      height: 100px;
      width: 100px;
      left:50%;
      right:50%;
    }
  }

}

变量的延迟加载示例：
less:

//css是块级作用域
@var:0;
.class{
  @var:1;
  .brass{
    @var:2;
    three:@var;//3
    @var:3;
  }
  one:@var;
}

编译后的css文件:

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

less中的加载是有延迟的，它会在当前作用域样式未加载之前先加载变量，而且是由内而外，先寻找作用域内的变量，如果没有在寻找作用域外的变量。

五、less中的嵌套规则

  1. 基本嵌套规则
    • 嵌套规则允许在一个选择器中嵌套另一个选择器 ，这样可以使得代码看起来一目了然，后期维护也方便
    • 一般不会嵌套太多层，嵌套的层数越多，性能就越差，建议一般嵌套三层左右
  2. &的使用
    • & 符号可以表示对父选择器的引用
    • 在一个内层选择器的前面，如果没有 & 符号，则这个内层选择器会被解析为父选择器的后代
    • 如果内层选择器前面有一个 & 符号，则内层选择器会被解析为父选择器自身或父选择器的伪类

例如：

less:

*{
   #wrap{
     .inner{
      &:hover{
        background-color: yellow;
      }
    }
  }
}

编译后的css文件:

* #wrap .inner:hover {
  background-color: yellow;
}

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方法。

简单来说：我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。

有如下几种混合方式：

  1. 普通混合
  2. 不带输出的混合
  3. 带参数的混合
  4. 带参数且有默认值的混合
  5. 命名参数
  6. 匹配模式
  7. arguments

1. 普通混合

less转成css时公共部分还会保留。

less:

/*普通混合*/
/*.innerStyle是一个属性集*/
.innerStyle{
  background-color: pink;
  height: 100px;
  width: 100px;
  left:50%;
  right:50%;
}

#wrap{
    background-color: blue;
    width: 200px;
    height: 200px;
    .inner{
    /*调用.innerStyle中的属性*/
     .innerStyle;
    }
    .inner2{
     /*调用.innerStyle中的属性*/
     .innerStyle;
    }
}

编译后的css文件：

/* .innerStyle被保留了！ */
.innerStyle {
  background-color: pink;
  height: 100px;
  width: 100px;
  left: 50%;
  right: 50%;
}
#wrap {
  background-color: blue;
  width: 200px;
  height: 200px;
}
#wrap .inner {
  background-color: pink;
  height: 100px;
  width: 100px;
  left: 50%;
  right: 50%;
}
#wrap .inner2 {
  background-color: pink;
  height: 100px;
  width: 100px;
  left: 50%;
  right: 50%;
}

2. 不带输出的混合：加（）

less转成css时公共部分不保留

less:

.innerStyle(){
  background-color: pink;
  height: 100px;
  width: 100px;
  left:50%;
  right:50%;
}

#wrap{
    background-color: blue;
    width: 200px;
    height: 200px;
    .inner{
     .innerStyle;
    }
    .inner2{
     .innerStyle;
    }
}

编译后的css文件：

/* 注意：此时的css文件中没有 .innerStyle */
#wrap {
  background-color: blue;
  width: 200px;
  height: 200px;
}
#wrap .inner {
  background-color: pink;
  height: 100px;
  width: 100px;
  left: 50%;
  right: 50%;
}
#wrap .inner2 {
  background-color: pink;
  height: 100px;
  width: 100px;
  left: 50%;
  right: 50%;
}
/*# sourceMappingURL=01.css.map */

3. 带参数的混合

less:

.innerStyle(@w,@h,@c){
  background-color: @c;
  height: @h;
  width: @w;
  left:50%;
  right:50%;
}

#wrap{
    background-color: blue;
    width: 200px;
    height: 200px;
    .inner{
     .innerStyle(pink,100px,100px);
    }
    .inner2{
     .innerStyle(deeppink,50px,50px);
    }
}

编译成css文件后：

#wrap {
  background-color: blue;
  width: 200px;
  height: 200px;
}
#wrap .inner {
  background-color: 100px;
  height: 100px;
  width: pink;
  left: 50%;
  right: 50%;
}
#wrap .inner2 {
  background-color: 50px;
  height: 50px;
  width: deeppink;
  left: 50%;
  right: 50%;
}
/*# sourceMappingURL=01.css.map */

4. 带参数且有默认值的混合

.innerStyle(@w:10px,@h:10px,@c:pink){
  background-color: @c;
  height: @h;
  width: @w;
  left:50%;
  right:50%;
}

#wrap{
    background-color: blue;
    width: 200px;
    height: 200px;
    .inner{
     .innerStyle(pink,100px,100px);
    }
    .inner2{
     .innerStyle();
    }
}

编译成css文件后：

#wrap {
  background-color: blue;
  width: 200px;
  height: 200px;
}
#wrap .inner {
  background-color: 100px;
  height: 100px;
  width: pink;
  left: 50%;
  right: 50%;
}
#wrap .inner2 {
  background-color: pink;
  height: 10px;
  width: 10px;
  left: 50%;
  right: 50%;
}
/*# sourceMappingURL=01.css.map */

5. 命名参数
给实参指定对应形参名，在参数有缺省的时候以便匹配到对应的形参。

less:

.innerStyle(@w:10px,@h:10px,@c:pink){
  background-color: @c;
  height: @h;
  width: @w;
  left:50%;
  right:50%;
}

#wrap{
  background-color: blue;
  width: 200px;
  height: 200px;
  .inner{
    .innerStyle(pink,100px,100px);
  }
  .inner2{
  /* 指定实参给传给谁 */
    .innerStyle(@c:yellow);
  }
}

编译后的css文件：

.innerStyle(@w:10px,@h:10px,@c:pink){
  background-color: @c;
  height: @h;
  width: @w;
  left:50%;
  right:50%;
}

#wrap{
  background-color: blue;
  width: 200px;
  height: 200px;
  .inner{
    .innerStyle(pink,100px,100px);
  }
  .inner2{
    .innerStyle(@c:yellow);
  }
}

6. 匹配模式
triangle.less:

/*第一个参数是_@,不管下面哪个样式被执行都会自动调用这个样式*/
.triangle(@_,@w,@c){
  width: 0;
  height: 0;
  border-width: @w;
  border-style:solid;
}

/*三角形朝左*/
.triangle(L,@w,@c){
  border-color:transparent @c transparent  transparent;
}

/*三角形朝右*/
.triangle(R,@w,@c){
  border-color:transparent transparent  transparent @c;
}

/*三角形朝上*/
.triangle(T,@w,@c){
  border-color: transparent transparent @c transparent;
}

/*三角形朝下*/
.triangle(B,@w,@c){
  border-color:@c transparent transparent transparent;
}

03.less

@import "./triangle.less";
#wrap > .sjx{
.triangle(B,20px,yellow);
}

03.css

/*第一个参数是_@,不管下面哪个样式被执行都会自动调用这个样式*/
/*三角形朝左*/
/*三角形朝右*/
/*三角形朝上*/
/*三角形朝下*/
#wrap > .sjx {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: yellow transparent transparent transparent;
}
/*# sourceMappingURL=03.css.map */

7. arguments变量
less:

.border(@1,@2,@3){
  border:@arguments;
}
#wrap > .sjx{
  width: 200px;
  height: 200px;
.border(1px,solid,red);
}

六、less运算

在less中可以进行加减乘除的运算。
less:

#wrap .inner{
  width:(100+100px);
  height: (100+200px);
  border: 1px solid #000;
}

编译成css文件:

#wrap .inner {
  width: 200px;
  height: 300px;
  border: 1px solid #000;
}
/*# sourceMappingURL=index.css.map */

七、less继承

混合与继承的区别：

  • 混合情况下，编译后的css文件中还是会有大量重复的代码。
    例如：

juzhong.less

.juzhong(@w,@h,@c){
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top:0;
  margin: auto;
  width: @w;
  height: @h;
  background-color: @c;
}

mixin.less

@import "mixin/juzhong.less";
*{
  margin: 0;
  padding: 0;
  #wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    .inner{
      &:nth-child(1){
        .juzhong(200px,200px,pink);
      }
      &:nth-child(2){
        .juzhong(100px,100px,yellow);
      }
    }
  }
}

编译后的css文件：

* {
  margin: 0;
  padding: 0;
}
* #wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
}
* #wrap .inner:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: pink;
}
* #wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*# sourceMappingURL=mixin.css.map */

  • 继承不支持带参数，灵活性较低。但是通过继承被编译的css文件无重复代码。

    juzhong-extend.less:

.juzhong{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top:0;
  margin: auto;
}
.juzhong:hover{
  background-color: red;
}

extend.less

@import "mixin/juzhong-extend.less";
*{
  margin: 0;
  padding: 0;
  #wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    .inner{
      /*  all表示与juzhong相关的所有样式都被继承，如果不加all，.juzhong:hover不会被继承*/
      &:nth-child(1):extend(.juzhong all){
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      &:nth-child(2):extend(.juzhong){
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    }
  }
}

编译后的css文件

/*这里是继承部分*/
.juzhong,
* #wrap .inner:nth-child(1),
* #wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover,
* #wrap .inner:nth-child(1):hover {
  background-color: red;
}
* {
  margin: 0;
  padding: 0;
}
* #wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
}
* #wrap .inner {
  /*  all表示与juzhong相关的所有样式都被继承，如果不加all，.juzhong:hover不会被继承*/
}
* #wrap .inner:nth-child(1) {
  width: 200px;
  height: 200px;
  background-color: pink;
}
* #wrap .inner:nth-child(2) {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*# sourceMappingURL=extend.css.map */

八、避免编译

用~“”把避免编译的内容包含起来。
less:

*{
  margin: 100/20px;
  //原生css 用cac进行计算
  padding: ~"cacl(200)";
}

编译后的css文件:

* {
  margin: 5px;
  padding: cacl(200);
}
/*# sourceMappingURL=test.css.map */
cake_eat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Less实战（一）：快速入门
数据库爆破专家的博客
05-05 1477
文章目录安装 less命令行用法方法一： 直接进行编译，显示结果方法二： 编译输出为指定的文件方法一 实操演示方法二 实操演示 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方...
less简单入门(CSS 预处理语言)
08-31
【Less 简单入门：理解CSS预处理语言的核心特性】 Less是一门强大的CSS预处理语言，它的出现极大地扩展了CSS的功能，使CSS代码变得更加简洁、可维护，并且支持主题的快速开发。通过引入变量、混合（mixin）、函数等...
Less 快速入门（一）
分享我的点点滴滴，在成长路上与你同行！
04-23 281
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node.JS或浏览器端。 https://less.bootcss.com/ 快速入门 https://www.bootcdn.cn/less.js/ less加速器 一、变量（Variables） <link rel=...
Less 快速入门
imByte的博客
12-08 737
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 Less 作为 CSS 的一种形式扩展，并没有减少 CSS 的功能，而是在现有的 CSS 语法上，添加了程序式语言的特性。
Less快速入门
weixin_45451197的博客
03-08 87
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了方便的扩展，这就是 Less 如此易学的原因之一。 变量（Variables） @width: 10px; @...
快速入门-样板
02-11
【标题】快速入门-样板 在IT行业中，"快速入门-样板"通常指的是为了帮助开发者迅速上手某个技术或框架而准备的基础项目模板。在这个案例中，我们关注的是与JavaScript相关的快速入门样板，可能是一个包含了基本配置...
CSS快速入门
07-27
本教程将作为你的“CSS快速入门”指南，帮助你迅速掌握这一强大的样式语言。 ### 一、CSS基本结构 CSS由选择器和声明组成。**选择器**用于指定要应用样式的元素，如`p`代表所有段落，`#id`代表具有特定ID的元素，`...
Lniux快速入门
08-13
这篇“Linux快速入门”教程旨在为初学者提供一个简洁而全面的指引，帮助他们迅速熟悉这个强大的开源操作系统。我们将围绕标题和描述中提到的关键词“源码”和“工具”，探讨Linux的核心概念、常用命令行工具以及如何...
less快速入门
Colbru的博客
04-27 227
Less CSS 是一个使用广泛的 CSS 预处理器，对 CSS 进行扩展，减少很多 CSS 的代码量。 less运用起来非常的简单方便，相信没学过的人阅读完后就懂了，主要是以下几点： 变量 style.less写法： //定义变量：@ @nice-blue: #5B83AD; #header { color: @nice-blue;//使用变量 } 编译后style.css： #header { color: #5B83AD; } 计算 style.less写法： #jisua
Less快速入门，看这篇就够啦！
最新发布
qq_51365459的博客
11-24 234
Less（Leaner Style Sheets）是CSS预处理器，是一种动态的样式表语言。Less 可以运行在 Node.js 和浏览器端，它扩展了 CSS，增加了变量、mixin、函数、嵌套等特性，使 CSS 更易于维护和扩展。比如，在开发过程中最能直观地感受到的一个便利的地方就是嵌套。原生的CSS语法并不支持嵌套，这会导致出现一个常见的情景：当我们想要为一个有多层上层元素的子元素增加样式时，我们需要一层一层向上找到它所有的上层元素，然后写一个有一长串类名的后代选择器。
Less10分钟入门
花神的博客
04-30 2148
在学习less时发现网上虽然关于less的教程非常多，但是质量参差不齐看的人眼花缭乱，半天也不知所云，搞得整个人都不好，浪费时间不说，还打击了我们探索新知识的信心，对于这种不负责任乱写教程误人子弟的人，本人表示深深的鄙视，现在我就介绍一种最简单高效学习less的方法，10分钟即可掌握less核心用法，妈妈再也不用担心我学不会less啦。1、下载安装koala。 此神器可以自动将less文件编译的cs
less快速入门简单语法详细讲
yezi__6的博客
10-26 467
一种 动态 样式 语言 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 客户端运行less:...
Less的安装、检测、使用、学习
cmy741741的博客
08-31 1044
less中文官网 https://less.bootcss.com/ Less的安装 cnpm install less -g Less的安装检测 lessc -v 注意：要有“c” lessc --version Less的使用 1.转化成css文件 在集成终端中打开目标文件输入命令 ...
boostrap快速入门
09-10
关于Bootstrap快速入门，我可以为您提供一些基本信息。 Bootstrap是一个流行的前端开发框架，它使用HTML、CSS和JavaScript来构建响应式和移动设备优先的网站和应用程序。以下是一些快速入门步骤： 1. 下载...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值