Less的概念和用法

原创于 2023-07-31 16:15:59 发布 · 771 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#less #前端 #css

CSS 专栏收录该内容

4 篇文章

订阅专栏

Less是一个CSS预处理器，扩展了CSS的功能，包括变量、嵌套规则、混入、运算等。通过安装和使用Less，可以提升CSS的可维护性和复用性，简化样式表的编写。

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

9.（命名空间）将一些变量或者混合模块打包起来

1.Less是什么

less是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。

2.Less的特点

less是基于JavaScript的，是超集的CSS。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。我们可以定义样式，它可以在整个代码中重复使用。

3.Less的安装

$ npm install -g less

4.Less的使用

less文件编译

lessc style.less style.css

可以在控制台看到文件编译成功

less语法

1.嵌套

语法：父级{ 子级{ } }

.nav{
    width:100%;
    height:50px;
    border-bottom:1px solid #ccc;
    ul{
        text-align: center;
        list-style:none;
        font-size:17px;
        li{
            float: left;
            width:22%;
            line-height:36px;
                a{
                    text-decoration: none;
                    color:#000;
                    &:hover{ color:#FBA800; }
                }
        }
    }
}

其中&用于写串联选择器，而不是写后代选择器，对伪类比较有用，如:hover和:focus等。

#navclass {
  &.nav {
    background:#fff; 
  }
  .logoclass{
    color:#ccc; 
  }
}
/**相当于**/
#navclass.nav{  /**此处没有空格**/
    background:#fff;
} 
#navclass .logoclass{  /**此处有空格**/
    color:#ccc; 
}

2.变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
li{
    float: left;
    width:22%;
    line-height:36px;
        a{
            text-decoration: none;
            color:@nice-blue;
            &:hover{ color:@light-blue; }
        }
}

当然，这里还可以定义别的变量，如果样式表中有大量相同的样式，都能将其定义为一个变量，这样将来对该样式更改时，只需更改变量的值即可。

3.混入

混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。在less中，可以使用class或id选择器以与CSS样式相同的方式声明mixin。（定义方法和sass大致相同，只是使用方法不同）

定义混合器：

@mixin 混合器名称{ }

@mixin 混合器名称(形参){ }

@mixin 混合器名称(形参默认值){ }

还可以定义属性集合

不带参数

.xiangtong {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.menu a {
  color: #111;
  .xiangtong;
}
.post a {
  color: red;
  .xiangtong;
}
/**相当于**/
.menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

带参数混入

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
img {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

给参数设置默认值

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
img {
  .border-radius;  
}

定义不带参数属性集合

用于隐藏这个属性集合，不让它暴露到CSS中去

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

使用@arguments

其包含了所有传递进来的参数，不必单独处理每一个参数

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

4.模式匹配

/* 让.mixin根据不同的@switch值而表现各异 */ 
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}
/* 匹配单个参数 */ 
@switch: light;
.class {
  .mixin(@switch, #888);
}
/* 匹配多个参数 */ 
.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

5.表达式

可用的全部比较运算有： > >= === =< <

此外，关键字true只表示布尔真值，除去关键字true以外的值都被视示布尔假。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
/* 相当于 */
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

序列使用逗号分割，当所有条件都符合时，才会被视为匹配成功，可以无参数，也可以对参数进行比较运算

.mixin (@a) when (@a > 10), (@a < -10) { ... } 

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

6.运算

任何数字、颜色或者变量都可以参与运算，less运算能够分辨出颜色和单位。

@b: 5%;
@f: @b * 2;
@o: @b + @f;
@var: 1px + 5;  /* less会输出6px */

color:{ #888 / 4};
background-color:{ @b-color + #111};
height: {100% / 2 + @f};
width: (@var + 5) * 2;
border: (@width * 2) solid black;

7.Color函数

less提供了一系列的颜色运算函数. 颜色会先被转化成 HSL色彩空间, 然后在通道级别操作。

lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色
darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色
saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色
fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色
fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色
spin(@color, 10);         // 返回色调比@color大10度的颜色
spin(@color, -10);        // 返回一个比@color小10度色调的颜色
mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色

8.Math函数

round(1.67); //  返回`2`
ceil(2.4);   //  返回`3`
floor(2.6);  //  返回`2`
percentage(0.5); //  返回`50%`

9.（命名空间）将一些变量或者混合模块打包起来

.menu {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

.header a {
  color: orange;
  .menu > .button;
}