本人作为一名今年刚毕业的应届生，目前的工作方向是前端开发，学习前端到现在差不多14个月，有9个月的工作经验。
从几个月前就有在计划学习css预处理相关的内容，结果被各种耽误，最近终于可以开始学习less。
在学习使用之前我们需要先安装less
可以通过npm进行安装，下载并安装node就可以使用npm，具体的安装过程很简单就不详细说了
笔记参考自less官网，进行个人理解的翻译，方便自身理解，作为自身学习总结所用，之后会慢慢的加上自身练习的代码。
变量
变量名称定义需要@前缀
@blue: #5b83ad
@light-blue: @blue + #111;
.test{
color: @light-blue;
}
变量实际上是“常量”，因为它们只被定义声明一次
mixin(混合/混入):
mixin是将一个定义的样式规则包含进另外一个规则中
.background{
background-image: url('test.png');
background-repeat: no-repeat;
background-size: 80% 80%;
}
如果我们需要在其他的样式规则中使用到上述的样式的话，可以直接在规则中引入。
#banner .img{
width: 50px;
height: 50px;
.background;
}
嵌套规则:
#header{
color: red;
.nav{
display: inline-block;
}
.logo{
width: 30px;
height: 30px;
}
}
编译为：
#header{
color: red;
}
#header .nav{
display: inline-block;
}
#header .logo{
width: 30px;
height: 30px;
}
在嵌套规则中可以使用伪选择器(&代表当前选择器的父选择器)
.list{
color: blue;
&:after{
content: " ";
display: block;
height: 10px;
width: 10px;
background-color: #000;
}
}
嵌套准则和冒泡
像media和keyframe的指令可以嵌套在和选择器一样的地方。冒泡就是将指令放置在顶部，并且保持同一个规则集中的其他元素的相对顺序不变。
条件指令，像@media,@supports,@document可以将选择器复制进它们的规则里面
.screen-color{
@meida screen{
color: green;
@media (min-width: 768px){
color: red;
}
}
@media tv{
color: black;
}
}
编译为：
@media screen{
color: green;
}
@media screen and (min-width: 768px){
color: red;
}
@media tv{
color: black;
}
其余的非条件指令，如font-face或者keyframes 也会冒泡，它们的身体不变
#a{
color: blue;
@font-face{
src: some-url;
}
padding: 2px;
}
编译为：
#a{
color: blue;
}
@font-face{
src: some-url;
}
#a{
padding: 2px;
}
运算:
算术运算操作符 +,-,,/ 可以对任意数字，颜色或者变量进行运算。
如果可能，运算操作符会在加，减或者比较之前代入单位并且进行转换，结果的单位会等同于运算式中最左边的第一个显式单位。
如果不能进行转换或者无意义时，会忽略单位。可能的转换： px->cm,rad->%
@cvs: 5cm+10mm;//6cm
@cvs: 2-3cm-5mm;//1.5cm 待定
@cvs: 2+5px-3cm;//4px
@base: 5%;
@filler: @base 2;//10%
@other: @base + @filler;//15%
@base-color: #000;
.test{
color: #fff / 4;
background-color: @base-color + #654;
width: 50% / 2 +@filler
}
乘法和除法不会对数字进行转换，在大部分的情况下都是无意义的，比如一个长度乘上另外一个长度得到面积，而css并不支持面积。less会计算数字本身，然后分配一个显式的单位给计算结果。
@base: 2cm 3mm;// 6cm
色值会分割成red,green,blue和α维度，计算会分别作用在rgb三个量纲上。如果用户让两个色值相加，green量纲的计算结果会等于两个色值的green量纲的值的相加结果，red量纲和blue量纲也是同样计算方式。如果用户将一个色值和一个数字进行相乘，每个量纲都会乘上该数字。
注：算术运算在α上是没有定义的，因为色值的数学计算上是没有约定的标准含义的，不要依赖于当前方式，因为有可能在下一个版本就发生改变了。
色值上的计算总是得到有效的色值，如果某一个颜色量纲的计算结果超出了FF或者小于00，最后得到的结果会等于FF或者00，如果α的计算结果大于1.0或者小于0.0，最后结果会等于1.0或者0.0。
@color: #224488 / 2； //#112244
@background-color: #112244 + #111; //#223355
less可以理解色值和单位的之间区别：
@var: 1px + 5;
这个变量的最终输出为6px
转义（escaping）
escaping允许使用任意字符串来作为属性或者变量的值，任何在~'anything' 或者 ~"anything" 将会被直接使用除了插值（interpolation）。
.test{
color: ~"green";
}
编译为：
.test{
color: green;
}
函数
less内置了多种函数用于转换颜色，处理字符串，算术运算等。函数在函数手册中有详细介绍。用法如下：
@base: #f500f5;
@width: 0.5;
.test{
width: percentage(@width);//50%
color: saturate(@base, 5%);
}
命名空间和访问器(namespaces&accessors)
有些时候，你想要组合你的变量或者mixin，无论是出于组织目的还是只是想实现一些封装，你可以很直观的在less中实现。
@color: #ff4e56
#bundle{
.button{
display: block;
background-color: @color;
width: 100px;
height: 30px;
border-radius: 5px;
&:hover{
background-color: @color - #222;
}
}
.tab{ ... }
.input{ ... }
}
如果你将.button这个类加入 #header button中，可以这样做：
#header{
color: green;
#bundle > .button
}
注：变量在某命名空间内定义声明，该变量的作用范围仅限于该空间中，外部的空间中该变量将无法不可用。因此无法像上面的语法(#namespace > .mixin-name)那样进行,(#namespace > @var)是不行的
作用范围(scope)
scope在less中与编程语言中的非常相似，变量和mixin会先在当前规则中寻找，如果无发现，编译器会当前规则的上一级寻找，以此类推。
@var: red;
#page{
@var: blue;
#nav{
color: @var;//blue
}
}
变量和mixin不一定要在其使用之前定义声明，下面例子同上面例子：
@var: red;
#page{
#nav{
color: @var;//blue
}
@var: blue;
}
注释
可以使用行注释或者块注释
/
这里是注释
/
@var: red;
//这里是注释
@var: blue;
导入(importing)
可以导入.less的文件，所有在该.less的文件中的变量都是可用的。
@import "test.less";
@import "main.css";
网友评论