LESS語法

教程根據慕課網Leo老師less即學即用教程而來

LESS語法

//變量前面要加@
@redColor: red;
@boxlength: 400px;

//混合
.border {
    border:5px solid blue;
}

//混合帶參數
.border-radius(@radius: 20px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.box {
    width: @boxlength+100;// 變量可支持運算
    height: ~'calc(300px-100px)'; //加'~'可避免編譯
    background: @redColor;
    .border(); //混合
    .border-radius(30px) !important; 
    //1.混合帶參數,參數可修改,默認不寫則為初始數值
    //2.加入!important 樣式里面的都會加上

}

//匹配,相當于if
.triangle(top,@size:100px) {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent blue transparent;
    border-width: @size;
}
.triangle(right,@size:100px) {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent blue;
    border-width: @size;
}
.triangle(bottom,@size:100px) {
    border-style: solid dashed dashed dashed;
    border-color: blue transparent transparent transparent;
    border-width: @size;
}
.triangle(left,@size:100px) {
    border-style: dashed solid dashed dashed;
    border-color: transparent blue transparent transparent;
    border-width: @size;
}
.triangle(@_,@size:100px) {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.triangle {
    .triangle(left,200px); //if == left
}

//@arguments參數用法
.border_arg(@width: 1px, @color: red, @style: solid) {
    border: @arguments;
}

//嵌套用法
ul {
    .border_arg(); ////@arguments參數用法
    width: 400px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background-color: pink;
    li {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #000;
    }
    a {
        float: left;
        text-decoration: none;
        position: relative;
        &:hover {
            color: red;
        }
        .triangle {
            .triangle(bottom,5px);
            top: 15px;
            left: 180px;
        }
    }
    span {
        float: right;
    }
}

CSS語法轉換

.border {
  border: 5px solid blue;
}
.box {
  width: 500px;
  height: calc(300px-100px);
  background: #ff0000;
  border: 5px solid blue;
  -webkit-border-radius: 30px !important;
  -moz-border-radius: 30px !important;
  border-radius: 30px !important;
}
.triangle {
  border-style: dashed solid dashed dashed;
  border-color: transparent blue transparent transparent;
  border-width: 200px;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
}
ul {
  border: 1px #ff0000 solid;
  width: 400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: pink;
}
ul li {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #000;
}
ul a {
  float: left;
  text-decoration: none;
  position: relative;
}
ul a:hover {
  color: red;
}
ul a .triangle {
  border-style: solid dashed dashed dashed;
  border-color: blue transparent transparent transparent;
  border-width: 5px;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 15px;
  left: 180px;
}
ul span {
  float: right;
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.less簡介及less環境搭建,首先寫less語法前不得不提下sass,之前不了解less和sass之前,這兩...
    倘浩洋閱讀 6,185評論 0 19
  • 之前學習過less,sass語法,現在記得不太清楚了,在項目中寫純css,又有點脫節,那就總結一下,完善一下我對l...
    _信仰zmh閱讀 604評論 0 0
  • less是一種動態樣式語言。作為CSS的一種擴展,Less不僅完全兼容CSS語法,而且less將CSS賦予了動態語...
    穆瑟muse閱讀 1,732評論 0 2
  • 我擦,好安靜,公司現在只剩下我一個人了,哈哈,可以盡情的敲擊鍵盤了。 下面是關于less語法之混合,文章中有的變量...
    _信仰zmh閱讀 4,591評論 0 5
  • 有一個做公益推廣漢服的朋友當年選擇這件事情,一下堅持了10多年。可能一開始是出于愛好出于喜歡,但是相信到后面更多的...
    goddessna閱讀 237評論 0 0