Less学习后总结

已于 2022-02-07 00:16:33 修改
阅读量443 收藏 1
点赞数 1
文章标签： less css 前端
于 2022-02-05 23:55:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42690194/article/details/122794232
版权

less是一种动态样式语言，属于css预处理器的范畴，它拓展了css语言，增加了变量，Minxin，函数等特性，是css更易维护和拓展，它既可以在客户端上运行，也可以借助node.js在服务端运行。less的中文官网：http://lesscss.cn/ ,bootstrap中less教程:http://www.bootcss.com/p/lesscss/ 。less编译工具：koala官网:www.koala-app.com。

目录

1、less中的注释

 1）以//开头的注释，不会被编译到css文件中

 2）以/**/包裹的注释会被编译到css文件中

2、less中的变量

 1)作为普通属性值只来使用：直接使用@ping

 2)作为选择器和属性名：#@{selector的值}的形式

 3）变量的延迟加载

 3、less中的嵌套规则

1）基本嵌套规则

 2）&的使用

4、less中的混合：混合就是将一系列属性从一个规则集引入到另一个规则集中的方式

1）普通混合

2）不带输出的混合

3）带参数的混合

4）带参数并且有默认值的混合和带多个参数的混合

5）命名参数

6）匹配模式

7)arguments变量

5、less计算

1、less中的注释

    1）以//开头的注释，不会被编译到css文件中

    2）以/**/包裹的注释会被编译到css文件中

/*这是想暴露出去的注释*/
//这是见不得人的注释

2、less中的变量

使用@来声明一个变量：@ping:ping;

    1)作为普通属性值只来使用：直接使用@ping

    2)作为选择器和属性名：#@{selector的值}的形式

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/less.css"
    </head>
    <body>
        <div id="wrap">
            <div class="inner">
            
            </div>
        </div>
    </body>
    <script src="less/less.min.js"></script>
</html>

//less.css文件


@ping:pink;//作为普通属性值来使用，直接只用@ping
@m:margin;//作为属性名
@selector:#wrap;//作为选择器
*{
    @{m}:0; //作为属性名
    padding:0
}
@{selector}{  //作为选择器
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:@ping;//作为普通属性值来使用，直接只用@ping
        height:100px;
        width:100px;
    }
}

    3）变量的延迟加载

less中的变量延迟加载是：less花括号“{}”里面的是块级作用域，
而且使用的变量等这个块级最后一个代码执行完后，才会去读取变量，
变量存在覆盖。同一个块级同名的变量，最后一个总是覆盖前面一个的值

@var:0;

.class{
@var:1;
    .brass{
        @var:2;
        three:@var;//3  这就是变量的延迟加载效果，最后一个变量是@var：3；所以这里的值是3
        @var:3;
    }
    one:@var;
}

 3、less中的嵌套规则

    1）基本嵌套规则

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/less.css"
    </head>
    <body>
        <div id="wrap">
            <div class="inner">
            
            </div>
        </div>
    </body>
    <script src="less/less.min.js"></script>
</html>

//less.css文件


@ping:pink;

*{
    margin:0; 
    padding:0
}
#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:@ping;
        height:100px;
        width:100px;
    }
}

     2）&的使用

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/less.css"
    </head>
    <body>
        <div id="wrap">
            <div class="inner">
            
            </div>
        </div>
    </body>
    <script src="less/less.min.js"></script>
</html>

//less.css文件


@ping:pink;

*{
    margin:0; 
    padding:0
}
#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:@ping;
        height:100px;
        width:100px;
        &:hover{   //&的使用
            background:ping;
        }
    }
}


//使用&编译后的结果
#warp .inner:hover{
    barckground:pink;
}

4、less中的混合：混合就是将一系列属性从一个规则集引入到另一个规则集中的方式

     1）普通混合

//两个div水平居中，没用混合前，会发现，inner和inner2出现了大量的重复代码，臃肿，而且会编译到css中去

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/less.css"
    </head>
    <body>
        <div id="wrap">
            <div class="inner">
            
            </div>
            <div class="inner2">
            
            </div>
        </div>
    </body>
    <script src="less/less.min.js"></script>
</html>

//less.css文件


@ping:pink;

*{
    margin:0; 
    padding:0
}
#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:@ping;
        height:100px;
        width:100px;
      }
    .inner2{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:@ping;
        height:100px;
        width:100px;
       }
}

//改善后的方式，普通混合，混合是以“.”开头的
.juzhong{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:@ping;
    height:100px;
    width:100px;
}

#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        .juzhong
      }

    .inner2{
        .juzhong
       }
}

    2）不带输出的混合

不带输出混合，在原来的基础之上，在混合名后面加个括号，.juzhong(),这样在编译的时候，混合只出现在less文件中，而不会出现在编译后的css文件中来
.juzhong(){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:@ping;
    height:100px;
    width:100px;
}

     3）带参数的混合

.juzhong（@w,@h,@c）{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:@c;
    height:@h;
    width:@w;
}

#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        .juzhong(100px,100px,ping);
      }

    .inner2{
        .juzhong(200px,200px,deeppink);
       }
}

    4）带参数并且有默认值的混合和带多个参数的混合

.juzhong（@w:10px,@h:10px,@c:ping）{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:@c;
    height:@h;
    width:@w;
}

#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        .juzhong(100px,100px,ping);
      }

    .inner2{
        .juzhong();
       }
}

     5）命名参数

.juzhong（@w:10px,@h:10px,@c:ping）{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:@c;
    height:@h;
    width:@w;
}

#wrap{  
    position:relative;
    width:300px;
    height:400px;
    border:1px solid;
    margin:0 auto;
    .inner{
        .juzhong(100px,100px,ping);
      }

    .inner2{
        .juzhong(@c:black);//再给混合名参数传入实参时，指定参数和值。要是没有指定名参数的话，会根据形参的位置顺序进行对应入号
       }
}

    6）匹配模式

//以三角形为例来说明

<html>
    <body>
        <div id="wrap">
            <div class="sjx"></div>
        </div>
    </body>
</html>


.triangle(L,@w,@c){
    width:0px;
    height:0px;
    border-winth:@w;
    boder-style:dashed solid dashed dashed;
    border-color:transparent @c transparent  transparent;
    overflow:hidden;
}

.triangle(R,@w,@c){
    width:0px;
    height:0px;
    border-winth:@w;
    boder-style:dashed solid dashed dashed;
    border-color:transparent transparent  transparent  @c;
    overflow:hidden;
}

.triangle(T,@w,@c){
    width:0px;
    height:0px;
    border-winth:@w;
    boder-style:dashed solid dashed dashed;
    border-color: @c transparent transparent  transparent;
    overflow:hidden;
}

.triangle(B,@w,@c){
    width:0px;
    height:0px;
    border-winth:@w;
    boder-style:dashed solid dashed dashed;
    border-color:transparent transparent @c  transparent;
    overflow:hidden;
}

在使用时这样使用，.triangle(R,40px,ping)里面的第一个参数是匹配模式，相当于命名，指定那个混合名字，匹配的对应的混合，第一个参数叫做匹配符
#wrap .sjx{
    .triangle(R,40px,ping)
}

     7)arguments变量

.border(@1,@2,@3){
    border:@arguments;
}

#wrap .sjx{
    .border(1px,solid,black)
}

5、less计算

#wrap .sjx{
    width:(100 + 100px)  //less中，两个数字运算，只需要一个数字带单位即可
}
草样的年华
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
详解在React项目中安装并使用Less（用法总结）
10-17
主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
less 运算、函数
webxiaoma
05-26 7578
**今天来说一下less的运算和函数。less 运算还是比较简单的， 其函数主要是less为css添加了一些函数功能，也不是很难，记住它就行。如果实在记不住，知道有这个函数就行。**一、less 的运算less的运算很简单我直接上代码，大家应该就可以看懂。
less计算宽高正确写法
weixin_41848005的博客
08-11 3617
在less中正确使用calc
less学习心得
qq814374557的博客
07-12 441
下面是我学习less的一些心得，大多数都是直接粘贴官网的，不过也加上了自己的一些理解，晚些时候再一个个做demo出来。
Less 的使用心得
lhb_11的博客
08-16 314
1、html代码如下<div class="order2"> 我是订单页面 <ul class="list"> <li><a href="#">测试的嵌套<span> 2017-08-16</span></a></li> <li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>
Less学习心得
为了N
03-12 364
Less最近学习less，在安装less.js-windows-master时就遇到坑，按着网上教程安装配置环境后，在dos里面输入指令也是报错，百度结果各种前篇一律的博客，根本解决不了问题，后来发现，在解压目录下面的bin目录添加node.exe才解决。基础语法定义变量@color: red; .div{ width: 200px; height: 200px; border: 1px solid
vue+iview+less+echarts实战项目总结
08-28
本篇文章是作者通过学习vue+iview+less+echarts制作一个小系统后，做的心得以及遇到的坑的总结，值得大家学习参考。
Linux基础命令学习——文本文件编辑命令（三）
01-09
今天来写一篇关于学习Linux基础命令——工作目录切换命令的博文，也实践了很多，总结给大家一起学习！ 在使用以下命令时，可以先使用alias命令查看你需要使用的命令的属性。 cat命令 用于查看纯文本文件（内容较少的...
webpack学习教程之前端性能优化总结
10-18
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）...这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料，需要的朋友可以参考下。
网络研究：本仓库是自己的总结的前端开发一些基础知识，包括html5，css3，canvas，jQuery，less，ES6，webpack，Vue等，同时也是自己工作中的踩坑总结，适合想要学习前端开发的伙伴，你可以克隆项目到本地，然后一步一步跟着我的demo敲，希望大家都能全栈
02-03
写在前面 本仓库是本人自己总结的web前端开发...本人偶尔也会写博客，如果有喜欢玩博客的朋友也可以一起分享交流，分享也是一种学习！ 踩坑总结 知识导航 您可以根据下面的链接快速定位到对应的知识点解析。依次进行
今天的less学习心得
weixin_34024034的博客
04-21 105
2019独角兽企业重金招聘Python工程师标准>>> ...
对LESS的自我理解 和一些简单的LESS封装
上海刚子的专栏
06-03 7250
LESS的基本使用 1.首先我们要把LESS环境搭建好。 2.然后创建LESS文件 3.现在我们可以开始写LESS文件了    例如：    我们一般写HTML文件的时候格式都是这样的                               这样形成一个包含的关系，易于查找和区别。   那CSS文件是怎么写的呢   #wrap{}   #wrap
less语法详解
涛痕
06-11 1万+
心得在没接触less之前，CSS可能是我最头疼的部分了，因为它往往需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于重用。而且我还要思考怎样写出组织良好且易于维护的CSS代码。与JavaScript，java等语言不同的是，CSS是一门非程序设计语言，没有变量、函数、作用域等概念。所以这对习惯了OOP思想的我来说，看似没有逻辑的代码意味着繁重的体力劳动。 直到我遇到了less，它在CSS的语法
Less学习感悟
qq_63339311的博客
02-13 451
Less学习感悟Less概览：Less使用：Less学习感悟： Less概览： Less是一门CSS扩展语言，也称为CSS预处理器。 Less作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入了程序式语言的特性，包括：引入了变量、Mixin（混入）、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。 常见的CSS预处理器有：Sass、Less、Stylus。 使用Less之前需要先安装Less，Less的安装步骤如下：（1）先安装node.js；
less：长度计算
mocoe的专栏
02-17 2356
CSS中可通过函数 calc() 动态计算长度，如： // 设置宽度为：父元素宽度 - 10px width: calc(100% - 10px); 但是在less中这样写有问题，会自动处理成： width: calc(90%); 因为less中本身支持 “-” 操作，会自动推断并转换数值单位=。=，可用如下写法： width: calc(~"100% - 10px"); Tip...
less对高宽的计算
热门推荐
peaceoncemore的专栏
03-21 1万+
  学习心得：    在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如    height: calc(100% - 30px);在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成：    height: ~"calc(100% - 30px)";若要需要按照某个比例固定高度可以用    min-he...
Less学习总结
qq_25178609的博客
11-23 792
一、less简介 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法
Less 总结
ladream的博客
03-17 912
文章目录什么是Less注释变量嵌套@arguments获取参数转义(避免编译)运算Mixins混合继承 什么是Less Less是一门向后兼容的 CSS 扩展语言。它为css新增许多能，如：变量、函数、作用域、混合、嵌套等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，less可以让我们写更少的代码做更多的事情。 它需要编译为css再被引入：lessc xxx.less yyy.css 注释 在less中，有两种注释 /*这是会暴露出去的注释 */ // 这是不会暴露出去的注释 变量
less学习总结（一）
北京欢迎您
12-25 111
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。 Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。 使用 1.使用koala软件，实时将.less文件转换为.css文件...
sass less的关系
最新发布
09-11
### 回答1： Sass 和 Less 是两种 CSS 预处理器。 Sass 是一种功能强大的 CSS 预处理器，它为 CSS 增加了变量、嵌套、混合等功能，使得 CSS 的编写更加方便和灵活。 Less 是一种轻量级的 CSS 预处理器，它为 CSS 增加了变量、嵌套、混合、函数等功能，使得 CSS 的编写更加方便和灵活。 Sass 和 Less 都是为了提高 CSS 的编写效率而设计的，但是 Sass 比 Less 功能更为强大，并且 Sass 的语法也更加丰富。 ### 回答2： Sass和Less是两种流行的CSS预处理器，它们的关系可以从以下几个方面来描述。 首先，它们的共同点在于都是为了解决CSS编写过程中的一些不便之处而产生的，例如，样式复用、变量和函数的使用以及嵌套等。它们都提供了一种更具可维护性和可扩展性的方式来编写CSS。 其次，它们的语法有所不同。Sass使用类似于Ruby的语法，使用缩进和冒号来表示层级嵌套和属性赋值。而Less则更接近于常规的CSS写法，使用大括号来表示层级嵌套和属性赋值。因此，对于熟悉CSS语法的开发者来说，可能更容易上手Less。 此外，在功能和特性上，Sass和Less也存在一些差异。Sass提供了更丰富的功能，例如，混合（Mixins）、继承（Inheritance）、扩展（Extension）等，使得样式的重用和扩展更加方便。而Less的功能相对较少，但其学习曲线较平缓，对于一些简单的项目可能会更适合。 最后，在使用上，Sass和Less都需要通过编译器将其转换为常规的CSS文件才能被浏览器所解析和渲染。这意味着，在项目中使用它们时需要安装相应的编译工具，并通过命令行或构建工具来进行编译。 总结来说，Sass和Less都是流行的CSS预处理器，它们都提供了一种更便捷和可维护的方式来编写CSS。它们之间的主要区别在于语法和特性上的差异，以及在一些复杂项目中的选择和适用性。 ### 回答3： Sass与Less是两种流行的CSS预处理器，它们都提供了许多便捷的方式来编写和组织CSS代码。 首先，Sass和Less都允许使用变量、嵌套规则、混合、继承等高级功能，这些特性可以大大简化CSS代码的编写，并提高代码的可维护性。 Sass与Less的主要区别在于它们的语法不同。Sass使用的是缩排式语法，即通过缩进来表示层级关系，而Less则使用的是类似于CSS的语法。对于熟悉CSS的开发者来说，学习和使用Less可能更容易上手，而对于通过其他编程语言学习的开发者来说，Sass的缩排式语法可能更容易理解和使用。 另一个不同点是编译器的选择。Sass有Sass和SCSS两种语法，而Less只有一种语法。在选择编译器方面，Sass可以使用Dart Sass和Node Sass两个主要的编译器，而Less则使用Less.js作为其主要的编译器。 值得注意的是，Sass和Less之间存在相互转换的工具，可以将Sass语法转换为Less语法，或将Less语法转换为Sass语法。这进一步增加了它们的相互关系。 总的来说，Sass和Less都是强大的CSS预处理器，它们在功能和特性上有所不同，但都可以极大地提高CSS代码的开发效率和可维护性。根据个人的喜好和项目需求，选择使用其中之一或两者结合，都可以帮助开发者更好地管理和组织CSS代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草样的年华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值