记一只小白的分享
欢迎访问'’me''的csdn博客园：https://blog.csdn.net/weixin_41871290
安装 less
$ npm install -g less //全局安装
我们现在要编译less文件夹下的tess.less文件，编译时需先定位到项目中的less文件目录，然后使用如下命令进行编译，这样就可以将test.less文件编译成test.css文件了。
$ lessc test.less test.css
$ lessc test.less test.css
还有一种情况就是需要将.less文件和.css文件存放不同目录，如刚演示的项目目录，.less 文件位于styles/less/目录下，我们需要将编译后得到的.css文件放在styles/css目录下时，可以这样处理，首先定位到项目的styles目录，然后执行如下指令即可：
$ lessc less/test.less css/test.css
$lessc less/test.less css/test.css
这和我们平时访问文件夹的相对路径是一样的。
编译压缩文件
首先你需要安装压缩插件
注意：安装路径需放置在less目录下（/usr/local/lib/node_modules/less）
$ npminstall-gless-plugin-clean-css
$ npm install -g less-plugin-clean-css
然后在编译的时候添加-clean-css即可，如下嗾使：
$ lessc test.less test.min.css -clean-css
$ lessc test.less test.min.css -clean-css
这样，你的less文件就被编译成压缩后的css文件了
/* 此注释方法会编译 */
// 此注释方法不会被编译
声明语法：@变量名:值;，如：@box_len:300px;
// 定义变量
@boxLen:160px;
@bgColor: #000;
// 使用变量
.box {
width:@boxLen;
height:@boxLen;
background:@bgColor;
}
编译后的样式为：
.box{
width:160px;
height:160px;
background:#000;
}
我们先来看一个示例，帮助理解混合。
// 定义变量
@boxLen:160px;
@bgColor: #000;
// 定义.box样式
.box {
// 使用变量
width:@boxLen;
height:@boxLen;
background:@bgColor;
// 混合使用
.bordered;
}
.bordered {
border:5px solid #808080;
}
运行程序，我们可以发现黑色视图多了一个边框，我们知道，以前要实现这个边框，我们需要为.box添加一个类.bordered，在 less 中，利用混合这一特性，我们可以直接在.box {}内使用.bordered，而无需再到html页面中为对应元素添加类名。
混合还可以带参数，假设我们定义了一个边框，在后面的盒子中我们都会采用这个边框，但是每个盒子的边框粗细不一样，这个时候我们可以使用混合参数来实现这一功能，具体参考下面的示例：
// 定义变量
@boxLen:160px;
@bgColor: #000;
// 定义.box样式
.box {
// 使用变量
width:@boxLen;
height:@boxLen;
background:@bgColor;
// 混合使用
// 传入参数
.bordered(10px);
}
.bordered(@borderW) {
border:@borderWsolid #808080;
}
我们也可以为混合指定一个默认值，这样在调用时就无需传入参数， 但是切记，括号不能省略。
.box {
.bordered();
}
.bordered(@borderW:10px) {
border:@borderWsolid pink;
}
提示：混合如果定义时，设置了参数，那么在调用时必须有圆括号，否则程序报错。
.border-radius(@radius:5px) {
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:
.box-shadow(@offsetX:0px,@offsetY:0px,@blur:1px,@color: purple) {
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
box-shadow:@arguments;
}
.box {
.box-shadow(6px,8px);
}
输出为：
.box{
-webkit-box-shadow:6px8px1pxpurple;
-moz-box-shadow:6px8px1pxpurple;
box-shadow:6px8px1pxpurple;
}
再来看一个示例：
.border(@width:5px; @style: solid; @color:#000) {
// border: @width @style @color;
border: @arguments;
}
相当于编程语言中的if语句，即如果满足条件，则执行。我们来看一个示例：
.triangle(top; @border_width:5px; @border_color:#000;) {
border: @border_width solid transparent;
border-bottom-color: @border_color;
}
.triangle(bottom; @border_width:5px; @border_color:#000;) {
border: @border_width solid transparent;
border-top-color: @border_color;
}
.triangle(left; @border_width:5px; @border_color:#000;) {
border: @border_width solid transparent;
border-right-color: @border_color;
}
.triangle(right; @border_width:5px; @border_color:#000;) {
border: @border_width solid transparent;
border-left-color: @border_color;
}
// 默认执行(无论是否匹配，都会执行)
.triangle(@_; @border_width:5px; @border_color:#000;) {
width: 0px;
height: 0px;
overflow: hidden;
}
.box {
.triangle(top);
}
上述示例中，调用 .triangle ，根据参数进行匹配，选择不同的样式。
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。
为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。
以此例做为开始：
.mixin(@a) when (lightness(@a) >=50%) {
background-color:black;
}
.mixin(@a) when (lightness(@a) <50%) {
background-color:white;
}
.mixin(@a) {
color: @a;
}
when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就会得到：
.class1{
background-color: black;
color:#ddd;
}
.class2{
background-color: white;
color:#555;
}
导引中可用的全部比较运算有：> >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：
.truth (@a)when(@a) { ... }
.truth (@a)when(@a=true) { ... }
除去关键字true以外的值都被视示布尔假：
.class{
.truth(40);// Will not match any of the above definitions.
}
导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。
.mixin (@a)when(@a >10), (@a < -10) { ... }
导引可以无参数，也可以对参数进行比较运算：
@media: mobile;
.mixin (@a)when(@media = mobile) { ... }
.mixin (@a)when(@media = desktop) { ... }
.max (@a, @b)when(@a > @b) { width: @a }
.max (@a, @b)when(@a < @b) { width: @b }
最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：
.mixin (@a, @b:0)when(isnumber(@b)) { ... }
.mixin (@a, @b: black)when(iscolor(@b)) { ... }
下面就是常见的检测函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：
ispixel
ispercentage
isem
最后再补充一点，在导引序列中可以使用and关键字实现与条件：
.mixin (@a)when(isnumber(@a))and(@a >0) { ... }
使用not关键字实现或条件
.mixin (@b)whennot(@b >0) { ... }
Less 支持加减乘除运算。
@width:100px;
.box {
width:@width-20;
}
Less允许嵌套，我们来看一个示例：
使用css设计标签样式时，我们经常会这样写：
.list{}
.listli{}
.lista{}
.listspan{}
Less引入嵌套之后，我们可以这样来设计样式：
.list{
li {}
a {}
span {}
}
当然Less也允许使用&符号添加伪类，比如，我们要给超链接添加一个hover效果，css会这样写：
lia{text-decoreation: none;color:#000; }
lia:hover{text-decoreation: underline;color: red;}
这种方法有些复杂，Less实现则更加简单一些：
li a {
text-decoreation:none; color: #000;
// & 代表它的上一层选择器
&:hover { text-decoreation: underline; color: red;}
}
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成HSL色彩空间, 然后在通道级别操作:
lighten(@color,10%);//returna color which is10% *lighter* than @color
darken(@color,10%);//returna color which is10% *darker* than @color
saturate(@color,10%);//returna color10% *more* saturated than @color
desaturate(@color,10%);//returna color10% *less* saturated than @color
fadein(@color,10%);//returna color10% *less* transparent than @color
fadeout(@color,10%);//returna color10% *more* transparent than @color
fade(@color,50%);//return@color with50% transparency
spin(@color,10);//returna color with a10degree largerinhue than @color
spin(@color, -10);//returna color with a10degree smaller hue than @color
mix(@color1, @color2);//returna mix of @color1and@color2
使用起来相当简单:
@base:#f04615;
.class{
color:saturate(@base,5%);
background-color:lighten(spin(@base,8),25%);
}
你还可以提取颜色信息:
hue(@color);//returns the`hue`channel of @color
saturation(@color);//returns the`saturation`channel of @color
lightness(@color);//returns the'lightness'channel of @color
如果你想在一种颜色的通道上创建另一种颜色，这些函数就显得那么的好用，例如:
@new: hsl(hue(@old),45%,90%);
@new将会保持@old的色调, 但是具有不同的饱和度和亮度.
LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:
round(1.67);//returns`2`
ceil(2.4);//returns`3`
floor(2.6);//returns`2`
如果你想将一个值转化为百分比，你可以使用percentage函数:
percentage(0.5);//returns`50%`
有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:
#bundle {
.button () {
display:block;
border:1px solid black;
background-color:grey;
&:hover{ background-color:white }
}
.tab { ... }
.citation { ... }
}
你只需要在#header a中像这样引入.button:
#header a {
color: orange;
#bundle > .button;
}
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.
@var: red;
#page {
@var: white;
#header {
color: @var;// white
}
}
#footer {
color: @var;// red
}
你可以在main文件中通过下面的形势引入.less文件,.less后缀可带可不带:
@import"lib.less";
@import"lib";
如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:
@import"lib.css";
这样LESS就会跳过它不去处理它.
变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:
@base-url:"http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法。要输出这样的值我们可以在字符串前面加上一个：~ 。比如:
width: ~'calc(100% - 35px)'
类似于css中的!important，提升样式优先级。
网友评论