less

缺乏、安全感 2023-01-07 01:23 142阅读 0赞

## less ##

> less可以说是动态化的css语言，主要是因为他的代码可以复用

**less的使用:**

1.  在全局npm 安装less ，并执行`lessc less文件路径 编译完成后的css路径`，然后把编译后的css文件引入到html就可以了
2.  bootCDN搜索less，然后在html引入

**less的功能：**

一、 生成变量（并且变量是可以运算的）

*  `@变量名:变量值;`
 *  `@color:#fff+#111`
 *  变量选择器
    
     *      @remind:.alert;
            @{remind}{
                height:50px
            }
 *  变量拼接
    
     *      @v1:lunbotu;
            @v2:container;
            //变量拼接(.lunbotu-container)
            @swiper-container:~'.@{v1}-@{v2}'

二、媒体查询

header{
        height:100px;
        background:red;
        @media(max-width:1200px)and (min-width:992px){
             background:yellow;
        }
            
    }

三、混入

*  就是把一个类的样式，混入到另一个类中
 *  并且在此过程中还可以传递参数
 *      .test{
            font-size:10px
        }
        .abc(@color){
            color:@color
        }
        .base{
            .test()
            .abc(red)
        }

四、循环

循环一个\*\*.col-md-1**到**.col-md-12\*\*的类并且每个类的宽度都是不同值。

`.loop(@n,@i:1) when (@i<=@n){}`就相等于写了一个if判断

`.loop(@n,(@i+1))`就相当于写了一个for循环

**总结：这个函数整体就是一个带if判断的for循环**

![636d6a4707af87211b5d1846ff437868.png][]

五、注意:

> 在写hover，after等时要加&

![dac10aca6475a9e8691cbf9e4a3f0fe4.png][]

[636d6a4707af87211b5d1846ff437868.png]: /images/20221119/8e4c43476c6f4536ab6a6362d994c1a0.png
[dac10aca6475a9e8691cbf9e4a3f0fe4.png]: /images/20221119/33158aa81aec4553b70e38bee3bfc552.png

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 Less预处理——初识Less

系列文章目录 -------------------- 文章目录系列文章目录一、Less 简介二、安装 Easy LESS

男娘i/ 2023年09月27日 11:44/ 0 赞/ 76 阅读

相关 less

less > less可以说是动态化的css语言，主要是因为他的代码可以复用 less的使用: 1. 在全局npm 安装less ，并执行`lessc less文件

缺乏、安全感/ 2023年01月07日 01:23/ 0 赞/ 143 阅读

相关 vue lang=“less“ less

文章目录 vue引入lang=“less“的方法以及报错的解决方案第一步：安装 less 和less-loader

客官°小女子只卖身不卖艺/ 2023年01月03日 14:17/ 0 赞/ 217 阅读

相关 less笔记-less概要

一、概要 As an extension to CSS, Less is not only backwards compatible with CSS, but the ex

刺骨的言语ヽ痛彻心扉/ 2022年09月25日 13:22/ 0 赞/ 236 阅读

相关 LESS详解之编译LESS

　　掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CS

╰+攻爆jí腚メ/ 2022年09月17日 13:11/ 0 赞/ 429 阅读

相关 less （三）一个less 文件引用另一个less文件

现在假设我们写了两个less文件，一个文件是a.less 另一个文件是 b.less; 那么a.less文件中如何引用b.less中的文件呢？例子：先新建如

た入场券/ 2022年05月25日 23:36/ 0 赞/ 1235 阅读

相关 less （一） less 的环境

less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；下面看看如何配置 less 的使用环境；前提：安装node

川长思鸟来/ 2022年05月25日 22:59/ 0 赞/ 243 阅读

相关如何编译.less文件（less.js）

有多少种方式可以将.less文件转换为.css文件 > > Less给 CSS 加点料!Less （Leaner Style Sheets 的缩写）是一门向后兼容的 C

向右看齐/ 2022年04月12日 12:48/ 0 赞/ 257 阅读

相关 idea 配置less编译包括less函数（less-plugin-functions）

首先需要安装 Node.js 依次安装使用 \`yarn\` 或者 \`npm\`均可 yarn global add less@2.7.2

谁借莪１个温暖的怀抱￠/ 2021年09月16日 15:08/ 0 赞/ 501 阅读

相关 less

[预处理器][Link 1]就是在代码交给编译器处理前，预先进行一些处理 less要点：变量，混合，嵌套，函数&运算，扩展 1.链接 <link re

ゞ浴缸里的玫瑰/ 2021年09月16日 04:42/ 0 赞/ 432 阅读