高效编辑css,相信很多小伙伴都使用过Less，Less的使用相对比较简单；它能在开发css的组件话起到非凡的作用。
Css预编译处理：Less
1.定义变量，使用的的是@作用前缀
@w:200px;//定义一个宽度为200px
@bgColr:red;//定义个背景颜色
在一个div元素中使用定义过的变量
div{
backgound-color:@bgColor;
}
2.后代选择器,伪类使用符号&
div{
background-color:@bgColor;
.select{
width:100;
}
&:after{
content:'';
}
}
3.文件引用
@import:'less文件';
4.Less函数
.fun(@px){
height:@px;
}
这是Less的基本定义，下面是使用Demo展示Less的使用
index.less
@import 'me.less';
.fs(@px) {
font-size: unit(@px , rem);
}
.w(@px) {
width: unit(@px , rem);
}
.h(@px) {
height: unit(@px , rem);
}
.lh(@px) {
line-height: unit(@px, rem);
}
.mt(@px) {
margin-top: unit(@px, rem);
}
.ml(@px) {
margin-top: unit(@px, rem);
}
.mr(@px) {
margin-top: unit(@px, rem);
}
.mb(@px) {
margin-top: unit(@px, rem);
}
.pt(@px) {
padding-top: unit(@px, rem);
}
.pl(@px) {
padding-left: unit(@px, rem);
}
.pr(@px) {
padding-right: unit(@px, rem);
}
.pb(@px) {
padding-bottom: unit(@px, rem);
}
html,body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background-color: @bodyBgColor;
.fs(16);
}
button {
border-width: 0;
outline-width: 0;
}
@defaultColor: #fff;
@headBgColor: #12d5b5;
@dangerColor: red;
@bodyBgColor: #eee;
me.less
.me {
img {
.mt(60);
margin-left: auto;
margin-right: auto;
}
.name {
.mt(25);
}
.login-btn {
background-color: @headBgColor;
color: @defaultColor;
.fs(16);
.w(340);
.h(40);
.mt(300);
}
.btns {
.mt(40);
button {
background-color: @headBgColor;
color: @defaultColor;
.fs(16);
.w(150);
.h(95);
margin-left: 12px;
margin-right: 12px;
&.logout {
background-color: @dangerColor;
.w(340);
.h(40);
.mt(20);
}
}
}
}
