参考链接
less客户端安装:
<link rel="stylesheet/less" tyle="text/css" href="style.less"><!-- less样式文件一定要在引入less.js前先引入 -->
<script src="less.min.js"></script>
<script>less.watch()</script><!-- 开启监视模式 -->
npm编译:
1.安装nodejs;
2.全局安装less npm install less -g
;
3.进入要编译的less所在目录,(shit+鼠标右键)打开命令窗口;
4.编译 lessc style.less > style.css
;
5.压缩参数 lessc style.less > style.css -x
;
less使用:
1.变量:
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。
//申明
@c-orange:#ff6600;
@f18:font-size:18px;
//调用
.class{
background-color: @c-orange;
border:1px solid @c-orange;
font-size:@font-size;
}
2.嵌套
LESS 可以让我们以嵌套的方式编写层叠样式。
.class{
font-family:"microsoft yahei";
.btn{
display:inline-block;
text-align: center;
padding:@p15;
border-bottom:@border+2 solid @c-white;
background-color:@c-orange+#111;
color:@c-white;
//如果你想写串联选择器,而不是写后代选择器,就可以用到"&"了
&.confirm{
color:red;
background:#ddd;
}
&:hover{
color:#fff;
background:#666;
}
}
3.混合:
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
3.1 单参数混合
//申明
.classA(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
//调用
.classB{
font-size:18px;
//默认5px
.classA;
}
.classC{
//传参数 10px
.classA(10px);
}
3.1 多参数混合(@arguments变量)
//申明
.box-shadow(@x:0,@y:0,@z:6px,@color:rgba(0,0,0,.6)){
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
//调用
.class{
.box-shadow(0,1px,8px);
}
4.命名空间:
简而言之,将参考容器内元素的样式属性进行封装,并灵活调用。
<div class="div1">
<a class="btn1">btn1</a>
</div>
<div class="div2">
<a class="btn2">btn2</a>
</div>
.div1{
.btn1{
display:inline-block;
text-align:center;
padding:2px 10px;
background-color:#ff6600;
color:#fff;
font-size:15px;
margin-top:10px;
&:hover{
background-color:#999;
color:#666;
}
}
}
.div2{
.btn2{
//调用(copy)div1内的btn1的样式
.div1 > .btn1;
}
}
5.运算:
<div class="containner">
containner
<p class="content">content</p>
</div>
@c-orange:#ff6600;
@c-white:#fff;
@width:300px;
.containner{
background-color:@c-orange;
color:@c-white;
width:@width;
padding:20px;
text-align: left;
.content{
//颜色运算
background-color:lighten(@c-orange,30%);
border:4px solid @c-orange + #333;
//尺寸运算
width:@width/2;
height:@width/4;
line-height:@width/4;
margin:0 auto;
}
}
6.作用域:
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
7.javascript表达式:
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号(英文键盘状态下tab上面的那个按键)的方式使用。
@str:`"china".toUpperCase() + '!'`;
.msg:before{
content:@str; //CHINA!
height:35px;
width:100px;
}
8.字符串插值:
变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构。
@base-url: "https://ss0.bdstatic";
.msg{
width:271px;
height:130px;
//注意别漏加‘{}’号
background:#fff url("@{base-url}/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png") center no-repeat;
background-size: 100% 100%;
}
更多推荐
less入门教程
发布评论