less学习笔记

一、什么是less

less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。

less可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

本文记录了开发中最常用的几种less语法。

二、编译工具

浏览器并不认识less格式文件，我们需要使用编译工具将less文件编译成css文件，可以选择kaola这个工具编译。这个工具使用也十分简单，将less文件的目录拖入，然后设置输出路径。然后每次只要保存less文件就可实现编译。

如果使用其他开发工具也可以，比如使用VSCode的话就可以安装less插件easy less实现保存自动编译。因为我使用的就是VSCode编辑器，所以我使用了这个插件做编译处理。

基本使用
首先新建目录

 --images
--style
  -- main.less
index.html

编写index.html文件

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>less编译工具使用</title>
  <link rel="stylesheet" href="./style/main.css"> //在这里引入的是编译后的css文件
 </head>
 <body>
    <div id="main"></div>
 </body>
</html>

编写mian.less文件:

@charset "utf-8";

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}

保存编译后，在style目录下就会出现main.css文件，这是编译后的文件，我们可以直接使用。

三、less语法

1、注释

less中有两种注释：/**/和//。

使用/**/的注释是会被编译进css文件的，而使用//的注释不会被编译进css文件。

//main.less
@charset "utf-8";

/*我会被编译进css文件*/

//我不会被编译进css文件

//执行编译后的main.css
@charset "utf-8";

/*我会被编译进css文件*/

由于我们应该一般编写和维护less文件，所以我们一般采用第二种注释，无需将注释编译进css文件。

2、变量

less中使用@声明一个变量，和一般程序语言不同的是，@符号与变量之间不能有空格，比如我们要声明一个myWidth这个变量：@myWidth。变量的赋值类似键值对：@myWidth : 200px;

变量的使用：

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 500px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
}

3、混合

混合的意思是说可以将less写法与常规的css写法进行混合书写。

css中为某个元素添加样式，首先需要为其添加类名，使用混合则很方便

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 200px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
    .border
}

.border {  
    border:3px solid pink
}

在css中我们需要将.border这个类添加到元素的class属性中才能生效。但是在less中，只要将.border加入#main中就可以实现效果。

//编译后的css
@charset "utf-8";
#main {
  width: 200px;
  height: 500px;
  background-color: yellowgreen;
  border: 3px solid green;
}
.border {
  border: 3px solid green;
}

混合也可以带参数

//less
.border(@mywidth){
    border: @mywidth solid green;
}

.mybox {
    .border(5px);
}

//css
.mybox {
  border: 5px solid green;
}

参数也可以设置一个默认值：

//less
.border(@mywidth:4px){
    border: @mywidth solid green;
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

4、匹配模式

根据不同的参数可以匹配不同的样式：

.pos(r) {
    position:relative;
}

.pos(a) {
    position:absolute;
}

.pos(f) {
    position:fixed;
}

.pipei {
    width:200px;
    height:200px;
    background-color:green;
    .pos(f);     //.pos(r)   .pos(a) 传入不同的参数，实现不同的定位方式
}

5、运算

less中可以实现运算，任何数字、颜色或者变量都可以参与运算（+ - * /），运算应该被包裹在括号中。

//less
.border(@mywidth:4px){
    border: @mywidth + 5px solid green;    //这里的单位可以省略，但是两者必须有一个带单位
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

6、嵌套

嵌套是less中非常有用、高效的语法。

//html
<div id="list">
    <li><a href="#">less学习</a><span>2017-11-26</span></li>
    <li><a href="#">less学习</a><span>2017-11-26</span></li>
    <li><a href="#">less学习</a><span>2017-11-26</span></li>
</div>

在css中如果我们需要对这一html结构的样式进行渲染，就会使用#list、#list li、#list li a、#list li span等选择器。在less中我们有了更简洁的写法：

//less
#list {
    width: 600px;
    margin: 30px auto;
    list-style: none;
    padding: 0;

    li {
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;

        a {
            float: left;
        }

        span {
            float: right;
        }
    }
}

//css
#list {
  width: 600px;
  margin: 30px auto;
  list-style: none;
  padding: 0;
}
#list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
#list li a {
  float: left;
}
#list li span {
  float: right;
}

在less中使用伪类选择器也十分方便：

//less
#list li a {
  float: left;
  &:hover {
    font-size:20px;
  }
}

//css
#list li a:hover {
  font-size: 18px;
}

7、arguments参数

有时候我们不想单个操作参数，可以使用@argemunts操作参数。

//less
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}

.test_arguments{
    .border_arg();
}

//css
.test_arguments {
  border: 30px red solid;
}

8、避免编译

有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，要输出这样的值我们需要使用~""将语法包裹起来，语法放在双引号或者单引号中间。从而实现不让less编译该段代码：

//less
width:~'calc(100%-35)'

//css
width: calc(100%-35);

less学习笔记

一、什么是less

二、编译工具

三、less语法

1、注释

2、变量

3、混合

4、匹配模式

5、运算

6、嵌套

7、arguments参数

8、避免编译

间阳幕宾

引用和评论

案例学习总结：原生JS实现表格排序

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具