less使用总结

原连接：https://www.cnblogs.com/xinjie-just/p/6715189.html

 

15年自学了 less ，但是一直没用，就忘记了。后来抱着提升 css 开发速度的目的，又去学习了 less ，学完立刻用，效果立竿见影，记得也牢了。刚开始学习前，咱们总会问本身一个问题，学习它有什么用。就拿这个 less 来讲，学习它有什么用，分明就有了 css 用来编写样式，我还要花时间来研究 less ，并且学完了还不必定能用上，忘得也快，这不是浪费我时间吗。其实，存在即有用，至于对你的用处有多大，须要本身使用事后方才知道。

好了，说说我本身在使用 less 过程当中的心得。

1、要使用 less 须要一个 less 编译的工具：

1. koala 的下载与安装:

下载建议到官网去下载 http://koala-app.com/index-zh.html ，下载后一个压缩包，解压后双击可执行文件便可使用了。不须要安装。

2. koala 的介绍：

打开 koala 软件，如上图，点击"+"能够选择文件夹，选择的文件夹里须要预先准备一个 less 文件，且仅仅只须要准备 less 文件，当添加了这个文件夹后，koala 会根据 less 文件的名称在同一目录下自动添加一个 css 文件。

能够选择语言：

点击工具图标，能够选择语言，这里以简体中文为例。

2、less 的使用准备

在 html 中引入的依然是 css 文件，只不过咱们一旦选用 less 编写样式了，之后维护就是维护 less 文件。

3、编写 less

1. 注释：

less 的注释有两种方法，"/**/" 和 "//"，前一种会在 css 文件中显示，后一种不会在 css 显示。

从两幅图的对比能够看出，less 中 "/**/" 方式添加的注释在 css 中也显示了，而 "//" 方式添加的注释在css 中没有显示

2. 变量

上图中定义了三个变量， text-color, main-color, fs

上图中使用了其中一个变量 text-color，

定义变量的方法："@"加上变量名。

定义变量的好处：当须要更改样式中多处的值时，只须要更改变量的值，提升效率。

3. 运算

如上图，有加法和除法运算，经过前面定义变量 fs ，这里使用它并在其基础上加上 4，因此它的 font-size 值就变成了 20px(16px + 4)。

使用运算的好处：避免人工重复计算！

好比：想要让单行文本竖直居中显示，须要设置高和行高相同。可是若是设置了 box-sizing: border-box; border-bottom-width: 1px; 的话，就须要让行高的值比高的值小 1px。这种状况下，就能够设置变量再结合运算让复杂的工做变得简单。

@height: 30px; height: @height; line-height: @height - 1;

若是想要更改高度的值，只须要更改变量 height 的值就好了。而不须要更改 height 和 line-height 两个属性的值，提升效率。

4. 继承

在上面的诸多例子中，都有"&"符号，这个符号起到继承的做用。这个符号就是它的父级标签(类，id等等)用几个例子说明：

.industry-section {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    & > div:not(.heading) {
        padding: 40px 150px;
        & h3 {
            font-size: @fs + 12;
            margin-bottom: .5rem;
        }
        & li {
            font-size: @fs + 2;
            line-height: 1.6;
        }
    }    
}

　　至关于：

.industry-section {
  width: 950px;
  margin-right: auto;
  margin-left: auto;
}
.industry-section > div:not(.heading) {
  padding: 40px 150px;
}
.industry-section > div:not(.heading) h3 {
  font-size: 28px;
  margin-bottom: .5rem;
}
.industry-section > div:not(.heading) li {
  font-size: 18px;
  line-height: 1.6;
}

　　再例如：

& > a {
    & > span {
        display: block;
        &:first-of-type {
            font-size: 18px;
        }
        &:last-of-type {
            font-size: 12px;
            text-transform: capitalize;
        }
    }
}

　　至关于：

a > span {
    display: block;
}
a > span:first-of-type {
    font-size: 18px;
}
a > span:last-of-type {
    font-size: 12px;
    text-transform: capitalize;
}

　　

5. 混合

混合能够将一个定义好的class A轻松的引入到另外一个class B中，从而简单实现class B继承class A中的全部属性。咱们还能够带参数地调用，就像使用函数同样。

例如：

class A

.page-width { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto;
}

class B

body {
    .page-width;
    font-size: @fs;
    color: @text-color;
    background-color: #fff;
    font-family: "Microsoft Yahei", Arial, sans-serif;
}

　　编译后的css:

body { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; font-size: 16px; color: #333; background-color: #fff; font-family: "Microsoft Yahei", Arial, sans-serif;
}

6.  在 less 中依然可使用媒体查询(工做中用到，更新于20170421)：

less 中使用媒体查询

.application-section {
    max-width: 100%;
    width: 1920px;
    height: 770px;
    margin: 30px auto;
    background: url(../images/app-scene.png) center top no-repeat;
    position: relative;
    & h2 {
        position: absolute;
        top: 70px;
        left: 50%;        
        font-size: 0;
        width: 1200px;
        transform: translateX(-50%);
        @media (max-width: 1600px) {
            width: 1000px;
            & span {
                font-size: @fs + 20;
            }
        }
    }
}

　　编译后 css

.application-section {
  max-width: 100%;
  width: 1920px;
  height: 770px;
  margin: 30px auto;
  background: url(../images/app-scene.png) center top no-repeat;
  position: relative;
}
.application-section h2 {
  position: absolute;
  top: 70px;
  left: 50%;
  font-size: 0;
  width: 1200px;
  transform: translateX(-50%);
}
@media (max-width: 1600px) {
  .application-section h2 {
    width: 1000px;
  }
  .application-section h2 span {
    font-size: 36px;
  }
}