Less的使用方法

最新推荐文章于 2024-09-16 16:16:58 发布

清雨扰落瓣

最新推荐文章于 2024-09-16 16:16:58 发布

阅读量495

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/python2021_7/article/details/123785653

版权

本文介绍了前端预处理器Less的使用方法，包括安装步骤和主要特性：变量让样式更易于维护，混合（Mixin）实现代码复用，嵌套规则提升代码组织性，此外还涉及计算、转义和内置函数等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

一、安装

在Node.js环境中使用Less：

//安装：
npm install -g less
> lessc styles.less styles.css

在浏览器环境中使用 Less ：

//在浏览器环境中使用 Less ：
 
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

cmd中：

 
npm i less less-loader -D  //css预处理语言

二、功能

1、变量

<style lang="less">
// 01 定义变量 
@gray:#999;
@size:20px;
.plusAction a{
  color:@gray;
  font-size:-10px+@size;
 }
</style>

2、混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

// 02 混合，加（）自己本身不显示 
    .flex(){display:flex;flex-wrap:wrap;}
    .plusAction .el-form-item__content {
      .flex;
      justify-content:space-between;
      padding:0 20px 0 10px;
}

3、嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

// 03 嵌套
假设我们有以下 CSS 代码：
ul{list-style: none;}
ul li{line-height: 44px;}
ul a {text-decoration: none;}
可以写成：
ul a:hover{color:red;}
    ul{
        list-style: none;
            li{line-height: 44px;}
                   a{text-decoration: none;}
                   &:hover{color:red;}
    }
 
.loginBlock{
     h3{
          font-size: 28px;
          font-weight:500;
          span{
                color:dodgerblue;
                font-size: 36px;
                font-weight: 900;
               }
        }
    }

4、计算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

<style lang="less">
// 04计算 尺寸可以+ - * /
@w:20px;
@margin:10px;
.test{
   span{
     display: inline-block;
     height: 44px;
     background-color: bisque;
     margin: @margin;
   }
}
.s1{
  padding:0 @w;
}
.s2{
  padding:0 @w+10;
}
.s3{
  padding:0 @w+20;
}
 
<style>

5、转义转义后都是字符串

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

/05转义 转义后都是字符串
@str:~".loginBlock .test span";
@b:~"1px solid red";
//如果作为选择器或者数学 @{变量}
@{str}{
  color: red;
  border:@b;
}

6、内置函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

/06内置函数 颜色 字符串 数学
@bg:rgba(82, 23, 190, 0.479);
.test{
  .s1{background-color: @bg;};
  .s2{background-color: desaturate(@bg,80%);};
  .s3{background-color: lighten(@bg,30%);};
}

7、命名空间与映射

//07命名空间 映射
#bg(){
    background-color: purple;
    font-size: 24px;
  }
#colors() {
primary: blue;
secondary: green;
size: 24px;
}
.testp{
  //取选择器里面的所有的属性与属性值。
 font-size: #colors[size];
 //映射某一个值
 background-color:.test.s2[background-color];
}