阅读 297

less走你

// less,scss,sass,stylus此乃css辅助器,在项目中少不了,列如在构建工具webpack  gulp  gurt中必不可少,提高开发效率;

// less:
// 常用的语法:
//   这些你当然都得会,这都常用
//                         1.变量  2.混合  3.函数  4.嵌套  5.动态计算


// /////////////////////////////////////////////////////////////////////////////////////
// 1.变量用@表示;分为全局变量(不在任何一个元素中定义的@变量)和局部变量(在元素中定义的@变量);
// 变量作用域,变量具有将近原则(在元素中定义的变量,将覆盖与其同名的,在非元素中定义的变量;)

// 以下是全局变量:
@w:800px;
@h:80px;
@color:#eea37d;
@padding:20px;

//自定义变量
// 可以将css中相同的字符提取出来,写个公用的

//url变量
@img:".././img";//为图片设置公用路劲,项目结构改变时,修改其变量即可。

//属性变量
@s:solid;
@c-txt:center;

//选择器变量  动态设置选择器,你可以任意设置要使用的选择器;
@el:element;
@elChild:el > ul > li a;

//自定义变量
@elAttr:{
    width: 200px;
    height: 200px;
    border: solid 1px red;
};
/////////////////////////////////////////////////////////////////////////////////////////////////////
// 2.混合法Mixins
            // *无参数方法(类似自定义变量法)
            .flex {display:flex;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;}
            // *参数法
            #el (@a:10px,@b:50px,@c:30px,@color:#000) {
                border:solid 1px @color;
                box-shadow: @arguments;//指代的是 全部参数  @arguments此乃固定默认值;
                width:@c;height:@c;
            }

            //条件筛选
            // Less 没有 if else,可是它有and when
            // and 运算符 ,相当于 与运算 &&,必须条件全部符合才会执行
            .border(@width,@color,@style) when (@width>2px) and (@color=red){
                border:@style @color @width;//意思是当所调用的元素的边框线大于2且color是red的时候才能调用
            }

             // not 运算符,相当于 非运算 !,条件为 不符合才会执行
                .bg-color(@color) when not (@color>=#fd7722){
                        background:@color;
                    }

            // , 逗号分隔符:相当于 或运算 ||,只要有一个符合条件就会执行
                .fz(@size:20px) when (@size>50px) , (@size<90px){
                    font-size: @size;
                }

// 3.万能公式法:这个是非常有效的数值函数,此乃编写利器也。
.elPub(@name, @px){
    @{name}: @px * px
}
.pl(@pl) {.elPub(padding-left,@pl);}
.pr(@pr) {.elPub(padding-right,@pr);}

.padding(@top,@right,@bottom,@left) {
    .elPub(padding-top,@top);
    .elPub(padding-right,@right);
    .elPub(padding-bottom,@bottom);
    .elPub(padding-left,@left);}
.fz(@fz){.elPub(font-size,@fz)}
// 调用方法:
.rrr {
    .pl(20);
    .pr(20); 
 .padding(10,20,30,40);
 .fz(20);
}



// 下面都是调用上面设置的值*********************************************************


.header {
    width:@w;//在此元素的width属性上调用变量的数值800px;
    height:@h;
    line-height: @h;
    background: @color;
    @padding:40px; //@padding此乃局部变量
    padding:@padding;//这就体现了less变量的将近原则,覆盖全局的@padding为40px;
    color:#fff;
    text-align: @c-txt;border:1px #eea37d @s;//调用属性变量值
    font-size: 24px;
    margin: 20px auto;
    
}
.main {
    width:@w;
    height:@h + 200px - 10px * 1px; //此乃运算符法
    margin: 20px auto;
    background:url('@{img}/1.jpg');//变量名,记得使用大括号包裹
}



// 调用选择器变量
.@{el} {padding:@h;}
#@{el} {padding:@h;}
.@{elChild} {padding:@h;}
#@{elChild} {
    padding:@h;
     @elAttr();//调用自定义变量
     .flex;//调用混合法的无参方法   或者.flex();
     #el;//调用混合法的有参方法
    
}
.www {
    #el(0px);//调用混合法的有参方法,并传参,设置第一个参数为0px;
    width:90px;
   
}
.eee {
    .border(3px,red,solid);//调用条件筛选法
    .bg-color(#333);//调用条件筛选法
    .fz(60px);//调用或条件法
}



// 嵌套法:

body {
    .gg {
        &:hover{//&代表父元素gg;
            color:red;
        }
    }
}


<!--less移动端妙用-->
* {
 box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
body,html{
  position: relative;
  -webkit-overflow-scrolling: touch;
  color: #333;
}
a:active,
a:hover {
  outline: 0;
}
img {
  border: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
 box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
}


// 通用公式
.px2rem(@name, @px){
  @{name}: @px / 75 * 1rem;
}
// 元素外围
.w(@width){.px2rem(width,@width);}
.h(@height){.px2rem(height,@height);}
.w-h(@width,@height) {
  .px2rem(width,@width);
  .px2rem(height,@height);
}

.w100 {width:100%;}
.b-radius(@b-radius){
.px2rem(border-radius,@b-radius);
.px2rem(-webkit-border-radius,@b-radius);
}
// 边框线
.border-t-width(@border-t-width){.px2rem(border-top-width,@border-t-width);}
.border-r-width(@border-r-width){.px2rem(border-right-width,@border-r-width);}
.border-b-width(@border-b-width){.px2rem(border-bottom-width,@border-b-width);}
.border-l-width(@border-l-width){.px2rem(border-left-width,@border-l-width);}
.border-w(@width) {.px2rem(border-width,@width);}
.line-solid {border-style: solid;}
.line-dashed {border-style: dashed;}
.border-colr (@color) {border-color:@color;}




// 补白
.padding(@top,@right,@bottom,@left){
  .px2rem(padding-top,@top);
  .px2rem(padding-right,@right);
  .px2rem(padding-bottom,@bottom);
  .px2rem(padding-left,@left);
}
.pl(@pl){.px2rem(padding-left,@pl);}
.pr(@pr){.px2rem(padding-right,@pr);}
.pt(@pt){.px2rem(padding-top,@pt); }
.pb(@pb){.px2rem(padding-bottom,@pb);}

// 定位位移
.relative {position:relative;}
.fixed {position:fixed;}
.absolute {position:absolute;}
.top(@top){.px2rem(top,@top);}
.right(@right){.px2rem(right,@right);}
.bottom(@bottom){.px2rem(bottom,@bottom);}
.left(@left){.px2rem(left,@left);}

// 外边距
.margin(@top,@right,@bottom,@left){
  .px2rem(margin-top,@top);
  .px2rem(margin-right,@right);
  .px2rem(margin-bottom,@bottom);
  .px2rem(margin-left,@left);
}
.ml(@ml){.px2rem(margin-left,@ml);}
.mr(@mr){.px2rem(margin-right,@mr);}
.mt(@mt){.px2rem(margin-top,@mt); }
.mb(@mb){.px2rem(margin-bottom,@mb);}

/*文本*/
.fz(@fz){.px2rem(font-size,@fz);}
.text(@fz,@color){.px2rem(font-size,@fz); color: @color;}


.t-left{text-align:left;}.t-center{text-align:center;}.t-right{text-align:right;}
.d-block{display:block;}
.d-none{display:none;}
.d-inline{display:inline;}
.d-in-block {display:inline-block;}
.f-weight{ font-weight:bold;}
.v-middle{vertical-align: middle;}
.v-top{vertical-align: top;}
.l-height(@l-height){.px2rem(line-height,@l-height)}
/*弹性盒*/
.flex{display:flex; display:-webkit-flex;display:-moz-flex;}
.flex-inline{display: inline-flex; display:-webkit-inline-flex;display:-moz-inline-flex;}
.flex-between {justify-content:space-between;-webkit-justify-content:space-between;-moz-justify-content:space-between }
.felx-around {justify-content:space-around;-webkit-justify-content:space-around;-moz-justify-content:space-around;}
.flex-start{justify-content:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;}
.flex-end{justify-content:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;}
.item-center{align-items:center;-webkit-align-items:center;-moz-align-items:center;}
.flex-center {justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;}
.flex-wrap{flex-wrap: wrap;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;}
.flex1 {flex:1;-webkit-flex: 1;-moz-flex:1;}
.flexbetween { .flex; .flex-between;}
.w100{width:100%;}
.ellipsis1 {overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
.trans4 { transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s; }
.scale05{transform:scale(1.05,1.05);}
// 通用变量
@solid:solid; @dashed:dashed;@imgUrl:'./img';
复制代码
文章分类
前端
文章标签