1.全局安装: npm install less -g
2.编写less文件(xx.less),定义变量
官网在介绍变量的时候会给出很多应用场景，总结一下就是使用 @ 符号定义变量，使用 @ 符号获取变量，仅仅将 @变量名 看成是一个字符串。
@classname: main;
@color: red;
.@classname{ background-color:@color;}
3.将 xx.less 转译为 xx.css
路径\lessc xx.less > 路径\xx.css,操作完该命令就会发现生成了一个 xx.css 文件
C:\Users\Desktop\less>lessc main.less > C:\Users\Desktop\less\main.css
如果使用HBuilder工具直接右键单击less文件--编译即可生成对应的css文件,
如果使用Webstorm工具,Webstorm 会在你的 .less 文件被修改后自动生成对应的 .css 文件
4.less混合写法: 在 Less 中通过将公共属性抽取出来作为一个公共类
.border(){
border-bottom: 2px solid red;
border-top: 5px solid blue;
}
.test1{
background-color: red;
.border;
}
.test2{
background-color: red;
.border();
}
总结:
混合可以减少代码书写量;
混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；
混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果 ,如.border 和 .border()一样
5.函数:根据不同的参数生成不同的样式,让类名动态化,Less 也为我们定义了很多好用的内置函数
// func.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {.border-radius(4px);}
.button { .border-radius(6px);}
关于 less 中函数的写法还有以下几种：
// 函数的参数设置默认值：
.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
// 函数有多个参数时用分号隔开
.mixin(@color;@padding: 2) { color-2: @color; padding-2: @padding;}
// 函数参数如果有默认，调用时就是通过变量名称，而不是位置
.mixin(@color: black;@margin: 10px;@padding: 20px) { color: @color; margin: @margin; padding: @padding;}
.class1 { .mixin(@margin: 20px; @color: #33acfe);}
// 函数参数有个内置变量 @arguments，相当于 js 中的 arguments
.box-shadow(@x: 0;@y: 0;@blur: 1px;@color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments;}
6.父子元素写法
.container {
padding: 0;
.article {
background-color: red;
}
}
父子元素还有一种是伪类的写法,在 less 中写法如下，可以看到引入了新的符号 &，以 & 来代替主类 #header
#header {
&:after{
content:" ";
display:block;
font-size:0;
height:0;
clear:both;
visibility:hidden;
}
}
7. @import:在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件,@import 的作用可以看成是将 one.less 的内容复制一份到当前 .less 文件中,如果两个less文件有相同class不会覆盖。
//one.less
//two.less文件
@import"one";
Less和Sass(Scss)的区别:
(1)Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。 Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。 (3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
nested：嵌套缩进的css代码; expanded：展开的多行css代码; compact：简洁格式的css代码; compressed：压缩后的css代码
(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
网友评论