Less 语法快速入门

Less 语法快速入门

Less 是一门 CSS 预处理语言其可以运行在 Node 或浏览器端。

它将传统的 css 样式结构单一的排版顺序进行了优化，让我们可以通过层级嵌套的方式将 css 类名与HTML结构一一对应起来。

这样的好处不仅仅使得 css 样式排版更清楚，也可以让我们在后期的修改中快速查询，同时减少了代码量，一定程度上降低了代码的重复性，最关键的是使得 css 样式相互不干扰

它的引入方式不作介绍在vue中使用的时候，需要在style中加入 less 如下

<style lang="less" scoped></style>

案例模板

大部分样式的编写如下案例

<div class="left-menu">
    <p class="second-menu">
      <span class="iconfont" ></span>
      <span class="name"></span>
    </p>
</div>
<div class="info-ctx"></div>

less部分

.left-menu{
    with:10px;
    .second-menu{
        .iconfont{
          line-height: 40px;
          padding: 10px;
        }
        .name{}
    }
}
.info-ctx{
     color: #1b75ed;
}

在基本用法上和css基本无差别，有了结构化编写更易维护修改

同样重复的样式在编写过后，可直接再次写入类名即可使用这一样式

它也支持算数运算等函数操作，但通常使用率较少，如可对px值等使用乘除加减等运算

在样式复用上，可参照下例

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}

其.p2样式等同如下

.p2{
  background : #64d9c0;
  color:red;
}

&符用法

.filter-item {
    &-tx{
	}
}

等同于

.filter-item {
	.filter-item-tx {
  	} 
}

本文一再快速上手less，针对新人，如想深入研究请查找官方文档