Less

Posted 2020-12-20 yinrz

Less

为什么需要Less？CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码，造成这些困难的很大原因源于CSS是一门非程序语言，没有变量、函数、scope（作用域）等概念。Less为Web开发者带来了福音，它在CSS的基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

安装Less

在 Node.js 环境中使用 Less ：

npm install -g less

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ></script>

变量

• 创建 style.less文件，编辑：

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

• 命令行输入命令 lessc style.less style.css，将less文件编译成浏览器支持的css文件。渲染结果如下：

#header {
  width: 10px;
  height: 20px;
}

混合

/* 封装样式 */
.border{
  border: 1px solid #ccc;
}

.box{
  .border;  /* 调用样式 */
  width: 100px;
  height: 100px;
}

渲染结果如下：

.border {
  border: 1px solid #ccc;
}


.box {
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
}

混合传参

/* 函数，样式不会被渲染 */
.bgcolor(@bgcolor){
    background-color: @bgcolor
}

.box2{
    .bgcolor(pink);
      width: 200px;
      height: 200px;
}

渲染结果如下：

.box2 {
  background-color: pink;
  width: 200px;
  height: 200px;
}

混合默认传参

.bgcolor2(@bgcolor:#eee){
    background-color: @bgcolor
}

.box3{
    .bgcolor2();
     width: 300px;
     height: 300px;
}

渲染结果如下：

.box3 {
  background-color: #eee;
  width: 300px;
  height: 300px;
}

@_ 匹配模式

配置基础样式，封装样式：

.triangle(top, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

.triangle(right, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}

.triangle(bottom, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
}

.triangle(left, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid;
}

.triangle(@_, @width: 5px, @color: #ccc) {
    // @_ 是固定格式，表示不管你匹配到谁，都会带上这些内容
    width: 0;
    height: 0;
    overflow: hidden;
}

调用集成样式，如制作顶部倒三角

.triangle-top {
    .triangle(top, 30px);
}

渲染效果如下：

.triangle-top {
  border-width: 30px;
  border-color: #ccc transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}

运算

包含加减乘的运算，需要用括号拼接，操作的对象主要是数字、颜色、变量等。(颜色一般情况下很少用运算)

@width：3px;

.wrapper{
    width：(@width-0.5)*2; //单位只要有一个带即可
}

@arguments

@arguments可以帮我们自动填充所有变量。

.border_arg(@width: 1.75rem, @color: #e6e6e6, @style: solid) {
    border: @arguments
}

渲染效果如下：

.border_arguments {
  border: 1.75rem #e6e6e6 solid;
}