入门

如何使用Less

Less常用语法和技巧讲解,快速入门掌握Less的使用

2018-04-30侠课岛    基础入门       

前端/前端必修/使用Less改善CSS的开发 24     0     2613

本次教程主要给大家讲解Less的一些基本常用语法,教大家如何快速入门Less:

文本内容要点

  1. Less简介

  2. 为什么要使用Less

  3. 变量

  4. 嵌套规则

  5. 混合(mixin)

  6. 函数&运算

  7. 其他基本语法

  8. 总结

Less简介


Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。


为什么要使用Less


在不了解Less前,可能有人会疑问既然已经有CSS了为什么还要学习Less呢?的确,如果当样式很少的时候用原始CSS是比较方便的,但样式一多大家就会发现CSS的重复冗余非常多,编辑和维护起来很吃力,而Less的语法就是让样式维护更方便,可以把代码分离为多个文件管理,可以有更多方便的语法特性让我们书写代码的时候更加轻松

变量


变量是Less里面很常用到的,变量的定义方式:@变量名:值

下面我们一起了解一下变量的语法:

@red:#F00;
.top{  color:@red;  }

CSS输出:
.top{  color:#F00;  }

我们可以看到上面的代码中定义了一个变量名为red,值为红色的变量,然后在一个名为top的类选择器里调用了这个变量。和颜色一样,其他字体大小,边框大小等都可以先定义为变量再使用(注意:Less中的变量为完全的常量,所以只能定义一次)


嵌套规则


在使用标准CSS时,要为多层嵌套的元素定义样式,要么使用后代选择器从外到内的嵌套定义,要么给这个元素加上类名或 id 来定义。这样的写法虽然很好理解,但维护起来很不方便,因为无法清晰了解到样式之间的关系。


而在Less中,嵌套规则使这个问题迎刃而解。嵌套规则允许在一个选择器中嵌套另一个选择器,这更容易设计出精简的代码,并且样式之间的关系一目了然。

下面我们一起了解一下嵌套的语法:

.top{
    width:100px;
    height:100px;
    a{
        text-decoration:none;
        color:#000;
        &:hover{
            color:#CCC;
               }
       }
}

Css输出:
.top{
    width:100px;
    height:100px;
}
.top a{
    text-decoration:none;
    color:#black;
}
.top a:hover{
    color:#CCC;
}

我们比较一下这两段代码,明显的用Less写的代码更简洁直观。使用嵌套时请注意&符的使用,内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面,如果没有 & 符号,则它被解析为父选择器的后代选择器如果有 & 符号,它就被解析为父元素自身的选择器或伪类选择器(如:hover和:focus)


混合(mixin)

混合的含义是将定义好的classA轻松引入到另一个classB中,从而简单的实现classB继承classA中所有属性。

不带参混合

.margin-style{
    margin-top:10px;
    margin-left:20px;
}
.top{
    width:100px;
    height:100px;
    .margin-style;
    a{
      .margin-style;
    }
}

Css输出:
.top{
    width:100px;
    height:100px;
    margin-top:10px;
    margin-left:20px;
}
.top a{
    margin-top:10px;
    margin-left:20px;
}

如上代码所示,margin-style为一个通用的属性集,可以在任意需要用到该属性集的选择器(如top,a)中调用它。且它的属性样式会在调用它的选择器(如top,a)中体现出来

带参混合

Less中,你还可以定义一个类似函数一样带参数的属性集合:

.margin-style(@size:10px){
    margin-top:@size;
    margin-left:@size;
}
.top{
    width:100px;
    height:100px;
    .margin-style;
    a{
        .margin-style(5px);
    }
}

Css输出
.top{
    width:100px;
    height:100px;
    margin-top:10px;
    margin-left:10px;
}
.top a{
    margin-top:5px;
    margin-left:5px;
}

如上代码,定义了一个默认值为10px的带参属性集合,在top中调用时用的是它的默认参数10px,而在a中调用时,我们赋给了它一个5px的参数值,所以输出时是5px。


@arguments变量

@arguments变量包括所有传递进来的参数,当函数带多个参数时我们就不需要单个处理了

.border-style(@size:1px, @color:#F00, @w:solid){
    border:@arguments;
}

.top{
    .border-style();
    a{
        .border-style(2px);
    }
}

Css输出:
.top{
    border:1px #F00 solid;
}
.top a{
    border:2px #F00 solid;
}

如上代码,@arguments替代了.border-style里面的三个参数,我传入了2px,其他的参数使用了默认参数值


函数&运算


本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

24

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?