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';
複製程式碼