- npm install -g less
lessc styles.less styles.css
2.变量
@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
//注释：css不支持,不会编译在css文件
/*变量*/
//必须@前缀，：是等于的以上，必须分号结束；
//不能以数组开头，不能包含特殊字符，区分大小写
@mainColor:#e92323;
@className:box;
div{
background: @mainColor;
}
a:hover{
color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
color: @mainColor;
}
3.Mixin
@charset "UTF-8";
.w50(){
width: 50%;
}
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.f(@direction:left){
float: @direction;
}
.borderRadius(@width:100px){
border-radius: @width;
-webkit-border-radius:@width;
-moz-border-radius:@width;
-o-border-radius:@width;
-ms-border-radius:@width;
}
.w50-f_left{
.w50();
.f(right);
.borderRadius(20px);
}
4.嵌套
@charset "UTF-8";
.wjs_app{
display: block;
img{
display: none;
}
/*空格直接嵌套*/
/*需要连接的情况：&*/
&:hover{
img{
display: block;
position: absolute;
left: 50%;
margin-left:-60px;
border: 1px solid #ccc;
border-top: none;
top:40px;
z-index: 100000;
}
}
> div{
display: block;
}
}
5.@import 模块化样式
@import "variables";
@import "mixins";
@import "topBar";
@import "banner";
6.运算&内置函数
/*运算*/
@num:5;
ul{
width: 100%*@num;
li{
width: 100%/@num;
color: red+yellow+blue;
background: gray*0.3;
/*内置函数*/
border-color: darken(red,20%);
}
}
7.less在浏览器中的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/less" href="../less/test.less">
<script src="../lib/less/less.min.js"></script>
<script>less.watch();</script>
</head>
<body>
<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 无刷新预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>
</html>
网友评论