Original link: https://www.cnblogs.com/xinjie-just/p/6715189.html
15 years taught himself less, but has been useless, forgotten. Later, the purpose of holding css increase the speed of development, went to learn less, with completion immediately, the effect is immediate, but also remember the prison. Before the beginning of the study, we always ask yourself the question, what use is it to learn. Take the less, learning what use is it, clearly there is a css style used to write, I would like to take the time to study less, but not necessarily be used on finished school, forget something else, this is not a waste I do time. In fact, there is that is useful as for use to you how much, after just need to know their own use.
Well, talk about my own experience in using less process.
First, the need to use a less tool less compiled:
1. koala download and installation:
Download recommendations to the official website to download http://koala-app.com/index-zh.html , a compressed package after the download, unzip double-click the executable file to use. It does not require installation.
2. koala description:
Open koala software, as shown above, click on the "+" to choose a folder, select the folder requires the preparation of a less file, and only need to prepare less file, when added to this folder, koala will be based on less file automatically add the name of a css file in the same directory.
You can select the language:
Click the Tools icon, you can select the language, here in Simplified Chinese for example.
Second, use less preparation
Introduced in html css file remains, but once we choose less writing style, and to safeguard the future is to maintain less file.
Third, write less
1. Notes:
less notes there are two ways, "/ ** /" and "//", the former will be displayed in the css file, the latter do not appear in 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;
}
}