Less效用

高效编辑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);

}

}

}

}