【前端笔记】less简单语法

补充-CSS函数-var

• css中可以自定义属性

  1. 属性名需要以两个减号开始（- -）
  2. 属性值可以是任何有效的CSS值
  3. 定义的属性值只有后代元素可以使用

  div{
  	--why-color:RGB(255,104,255)
  }
  

• 我们可以通过var函数来使用

  span {
      color:var(--why-color)
  }
  

• 规则集定义的选择器，是自定义属性的可见作用域（只在选择器内部有效）

  推荐将自定义属性定义在html中，也可以使用:root选择器

  /*使用html*/
  html{
      ...
      --main-color:black;
      ...
  }
  /*使用:root*/
  :root{
      ...
      --main-color:black;
      ...
  }
  

Less语法一：Less引用及兼容

• 引用1：直接下载lessc.js文件引用

<link rel="stylesheet/less" herf="./less/02_less用法.less"
<script src="./js/lessc.js"></script>

• 引用2：用node运行Less

1. 安装 node.js，可选择版本（8.0），网址：http://nodejs.cn/download/
2. 检查是否安装成功，使用 cmd 命令输入 node -v 查看版本即可
3. 基于 node.js 在线安装 Less，使用 cmd 命令输入 npm install -g less 即可
4. 检查是否安装成功，使用 cmd 命令 lessc -v 查看版本即可

• 引用3：vscode使用Less

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。所以，我们需要把我们的 Less 文件，编译生成为 CSS 文件，这样我们的 HTML 页面才能使用。

vscode Less 插件：vscode 的 Easy LESS 插件——这个插件可以自动将less文件转义成css文件

settings.json配置：

"less.compile": {
       "compress": true, // true => remove surplus whitespace
      "sourceMap": true, // true => generate source maps (.css.map files)将浏览器审查元素中css代码在css文件中的位置改成对应的less文件中的位置
       "out": true // false => DON'T output .css files (overridable per-file, see below)生成对应的css文件
   }

• less是兼容css的

1. 可以在less文件中编写所有的css代码。
2. 仅是将css扩展名改成了.less结尾。

Less语法二：变量（variables)

• 常见的颜色或者字体等定义为变量，修改时候减少代码量

• 变量格式：

  @变量名:变量值
      
      @themeColor:white
      @mainFontSize:12px
      
  .box p .link{
      color:@themeColor
      font-size:@mainFontSize
  }
  

Less语法三：嵌套

• 选择器的嵌套：

<!--原html数据-->
<div class="box">
    <p class="pel">我是p元素</p>
    <h1>
        我是h1元素<span class="keyword">关键字</span>
    </h1>
    <a class="link" href="#">百度一下</a>
</div>

/*选择器嵌套*/
.box{
    .pel{
        color:@mainColor;
        font-size:@normalFontSize;
    }
    h1{
        .keyword{
            color:@mainColor;
            font-size:@bigFontSize;
        }  
    }
    p{
        .link{
            color:@mainColor;
            font-size:@smallFontSize;
        }
    }
}

• 特殊符号: &（表示当前选择器的分级）

p{
    .link{
            color:@mainColor;
            font-size:@smallFontSize;
        /*伪类一般单独写，但是通过&符号可以整合在一起*/
        &:hover{
            color:blue;
        }
    }
}

Less语法四：运算

• 算术运算符+、-、*、/、可以对任何数字、颜色或变量进行运算

  1. 算数运算符在加、减或者比较之前会进行单位换算，计算结果以最左侧操作数的单位类型为准。

  2. 如果单位换算无效或者失去意义，则忽略单位。

Less语法五：混合/混入(mixins)

• 在css编写中，多个选择器可能存在大量重复代码，less中混入将代码抽取到一个独立的地方，任何选择器都可以进行复用

• 混入：是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

• 注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用。

/*1.混入的基本使用*/
.norwap_ellipsis{
    white-space:norwap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.box1{
    width:150px;
    background-color:green;
    .norwap_ellipsis();
}

.box2{
    width:150px;
    background-color:green;
    .norwap_ellipsis();
}

/*2.混入传递参数*/
.box_border(@borderWidth:5px,@borderColor:purple){
    border:@borderWidth solid @borderColor;
}

.box2{
    width:150px;
    background-color:green;
    .box_border(10px,orange)
}

• 混入和映射结合使用：弥补less中不能自定义函数的缺陷

/*3.混入和映射的结合使用*/
.box_size{
    width:100px;
    height:100px;
}

.box1{
    width: .box_size()[width]/**映射，有点类似于js里面的解构赋值**/
    background-color:green;
    .norwap_ellipsis();
}

Less语法六：继承extend

• 和mixins作用类似，用于复用代码

• 和mixins对比，继承代码最终会转化成并集选择器；

.box_border{
    border:5px soild red;
}

.box{
    width:100px;
    background-color:orange;
    /*将box_border的所有属性继承下来*/
    &:extend(.box_border);
}

Less语法七：less内置函数

• less内置了多种函数用于转换颜色，处理字符串，算术运算符等

• 内置函数手册：http://less.bootcss.com/functions/

.box{
    color:color(red);//将red转换为rgb的值
    width；convert(100px,"in");//单位的转换，in为英寸
    font-size:ceil(18.5px)//数字函数四舍五入，还有floor(18.5px)
}

Less语法八：作用域scope

• 在查找一个变量的时候，首先在本地查找变量和混合；如果找不到，则从“父”级作用域继承。

@mainColor:red;
    
.box{
    @mainColor:green;
    .item{
        color:@mainColor;
        @mainColor:blue
    }
}

//最终color呈现为：blue(就近原则)

Less语法九：注释

• 在less中，块注释和行注释都可以使用。

//单行注释
/*多行注释*/

Less语法十：导入

• 导入的方式和css的用法是一致的

• 导入一个.less文件，此文件中的所有变量就可以全部使用了

• 如果导入的文件是.less扩展名，则可以将扩展名省略掉