Less学习后总结

已于 2022-02-07 00:16:33 修改
阅读量452 收藏 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
    评论
两周Linux学习总结
03-09
* 命令 more 和 less：用于查看文件内容，more 和 less 命令可以显示文件的内容，但more 命令只能向下滚动，less 命令可以向上或向下滚动。 * 命令 head 和 tail：用于查看文件头或尾部，head 命令可以显示文件的...
less计算宽高正确写法
weixin_41848005的博客
08-11 3688
在less中正确使用calc
less 运算、函数
webxiaoma
05-26 7652
**今天来说一下less的运算和函数。less 运算还是比较简单的， 其函数主要是less为css添加了一些函数功能，也不是很难，记住它就行。如果实在记不住，知道有这个函数就行。**一、less 的运算less的运算很简单我直接上代码，大家应该就可以看懂。
less学习心得
qq814374557的博客
07-12 474
下面是我学习less的一些心得，大多数都是直接粘贴官网的，不过也加上了自己的一些理解，晚些时候再一个个做demo出来。
Less 的使用心得
lhb_11的博客
08-16 319
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 369
Less最近学习less，在安装less.js-windows-master时就遇到坑，按着网上教程安装配置环境后，在dos里面输入指令也是报错，百度结果各种前篇一律的博客，根本解决不了问题，后来发现，在解压目录下面的bin目录添加node.exe才解决。基础语法定义变量@color: red; .div{ width: 200px; height: 200px; border: 1px solid
Linux学习笔记总结
01-05
"Linux学习笔记总结" Linux学习笔记总结是Linux学习的详细笔记，涵盖了Linux文件系统、文件操作、目录操作、文件内容显示命令、目录内容显示命令等多方面的知识点。 一、Linux文件系统 Linux文件系统中有两种路径...
linux基础命令学习总结.zip
最新发布
01-09
这份"Linux基础命令学习总结"压缩包文件包含了一系列与Linux基础知识相关的文档，旨在帮助初学者掌握Linux操作系统的常用命令和概念。 首先，"01-Linux基础命令.md"可能会涵盖如`ls`, `cd`, `pwd`, `touch`, `mkdir...
详解在React项目中安装并使用Less（用法总结）
10-17
主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript学习总结
11-05
本文将围绕“JavaScript学习总结”这一主题，深入探讨其基本概念、语法特性、DOM操作以及与CSS的协同使用。 一、JavaScript基础 JavaScript由Brendan Eich在1995年发明，最初是为了网页交互而设计，现在已经成为...
今天的less学习心得
weixin_34024034的博客
04-21 112
2019独角兽企业重金招聘Python工程师标准>>> ...
less语法详解
涛痕
06-11 1万+
心得在没接触less之前，CSS可能是我最头疼的部分了，因为它往往需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于重用。而且我还要思考怎样写出组织良好且易于维护的CSS代码。与JavaScript，java等语言不同的是，CSS是一门非程序设计语言，没有变量、函数、作用域等概念。所以这对习惯了OOP思想的我来说，看似没有逻辑的代码意味着繁重的体力劳动。 直到我遇到了less，它在CSS的语法
对LESS的自我理解 和一些简单的LESS封装
上海刚子的专栏
06-03 7281
LESS的基本使用 1.首先我们要把LESS环境搭建好。 2.然后创建LESS文件 3.现在我们可以开始写LESS文件了    例如：    我们一般写HTML文件的时候格式都是这样的                               这样形成一个包含的关系，易于查找和区别。   那CSS文件是怎么写的呢   #wrap{}   #wrap
Less学习感悟
qq_63339311的博客
02-13 476
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 2404
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_45662523的博客
06-20 460
less简单使用
less 的一些基础知识（简单易学）
webxiaoma
05-26 2774
今天我来总结一下less的一些基础知识。非常简单，一般看半天基本就可以上手。一、less 定义常量、混合、带参数的混合、@arguments。
LESS的基本语法和使用
heartOfblack 离开了电脑，我不希望我还有病
07-26 9286
（该内容大部分为BOOTSTRAP官网例子，需要看原文请进入点击进入BOOTSTRAP学习LESS） LESS  和 SASS LESS是更倾向于给设计师用的，编程人员更适合用SASS，但是目前为止先不学这个，因为时间不够。 LESS是CSS的一种预处理语言，其中添加了一些，变量，语法，方法，运算，类等概念 用法是下载一个BOOTSTRAP中的官方LESS文件，
sass less的关系
09-11
总结来说，Sass和Less都是流行的CSS预处理器，它们都提供了一种更便捷和可维护的方式来编写CSS。它们之间的主要区别在于语法和特性上的差异，以及在一些复杂项目中的选择和适用性。 ### 回答3： Sass与Less是两种...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

草样的年华

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

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

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

打赏作者

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

抵扣说明：

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

余额充值