less學習

desdik 發布于2019-08-30 15:53 / 2570人閱讀

摘要：是什么里邊的可以使用多種編譯環境將轉換為我是用的是安裝文件依程序員的角度去編寫的出現兼容性寫法使用更容易等使用的混合寫法更加方便中的變量在使用的時候中的類混合在沒有之前想讓一個有兩個類得到效果只能是給這個加兩個類從而達到兩個類的

less是什么

css里邊的jquery 可以使用多種編譯環境將less轉換為css 我是用的是node安裝less 文件.less
write less do more
依程序員的角度去編寫css
css3的出現 css 兼容性寫法使用less更容易 -webkit- -moz- -o-等使用less的混合寫法更加方便

less中的變量

@name:value
在使用的時候 height:@name

less中的類混合

在沒有less之前想讓一個div有兩個類得到效果只能是給這個div加兩個類從而達到兩個類的效果混合
但是有了less之后不再需要兩個類只需要在less中將需要混合的類放在一起
less

.bg{
    height: @test_width;background: red;.border;
}
.border{
    border: 10px solid #0D3349;
}

生成的css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

有了這個功能就能實現就能夠實現將許多類的公共代碼抽取出來再使用混合為每一個類加入這部分公共的代碼

less中可帶參數的混合

為待混合的部分增加參數這樣在其他類調用的時候更加靈活
less

.bg{
    height: @test_width;background: red;.border(11px);
}
.border(@border_width){
    border: @border_width solid #0D3349;
}

生成的css代碼

.bg {
  height: 300px;
  background: red;
  border: 11px solid #0D3349;
}

為這個參數指定默認值
less 為@border_width指定默認值10px

.bg{
    height: @test_width;background: red;.border();
}
.border(@border_width:10px){
    border: @border_width solid #0D3349;
}

值得注意的是.bg只是一個定義的過程在.border里邊調用才可以生成css
這樣在調用這個混合的時候即使沒有參數的時候也不會報錯生成的css如下
css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

less中的匹配模式

相當于js中的if 但不完全是
less沒有出現之前在頁面上寫一個三角形的方法

.sanjiao{
  width: 0;height: 0;overflow: hidden;
  border-width:10px ;
  border-color: transparent transparent red transparent;
   border-style: dashed dashed solid dashed;
  //dashed  是為了兼容ie6
}

使用了less的匹配模式來實現

.tringle(top,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:dashed dashed solid dashed ;
}
.tringle(bottom,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:solid dashed dashed  dashed ;
}
.tringle(@_,@w:10px,@c:red){   //不管會執行那個tringle都會執行這一個  而且后邊的這兩個參數必須攜帶
    width: 0;height: 0;overflow: hidden;
}
.sanjiao_shang{
   .tringle(top)
}
.sanjiao_xia{
  .tringle(bottom)
}

生成的css

.sanjiao_shang {
  border-width: 10px;
  border-color: red;
  border-style: dashed dashed solid dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_xia {
  border-width: 10px;
  border-color: red;
  border-style: solid dashed dashed  dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}

less中可以對變量進行預算只要這個變量帶著單位運算的時候是需要運算整數不需要管單位同時顏色也可以進行運算

less中的嵌套規則

但是在css中盡量的少去嵌套增加web性能
less

.list{
  width: 600px;margin: 30px auto;
  padding:0;
  li{
    height: 30px;
  }
  a{
    &:hover{           //&代表的就是上一層選擇器
      color: #6ba82f;
    }
  }
}

生成的css

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
}
.list li {
  height: 30px;
}
.list a:hover {
  color: #6ba82f;
}

less中的@arguments

less代碼

.test(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.tt1{
  .test()
}

將會生成的css代碼

.tt1 {
  border: 30px red solid;
}

云服務器 GPU云服務器 less less2 html使用less linux密令less

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116660.html

less學習筆記

摘要：方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。一、什么是less less是一種動態樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變量、運算、函數等。方便了css的編寫和維護。 le...

MkkHou 2019-08-02 15:58 評論0 收藏0
less學習筆記

摘要：方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。一、什么是less less是一種動態樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變量、運算、函數等。方便了css的編寫和維護。 le...

codercao 2019-08-29 13:53 評論0 收藏0
前端構建工具grunt學習筆記

使用grunt實時編譯less文件下圖是項目的文件組織 showImg(https://segmentfault.com/img/bVqbtg); 生成package.json文件，通過npm init命令。安裝你需要的Devdependencies/denpendencies。 npm install grunt --save-dev npm install load-grunt-ta...

zone 2019-08-21 10:42 評論0 收藏0
less學習一

摘要：是一門預處理語言，它擴展了語言，增加了變量函數等特性，使更易維護和擴展。可以運行在或瀏覽器端。 Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。 Less 可以運行在 Node 或瀏覽器端。 less文件只有被編譯后才能被瀏覽器識別和使用 less編譯工具：1. Koala ：國人開發的less全平臺編譯工具? ...

helloworldcoding 2019-04-23 13:27 評論0 收藏0
學習Less-看這篇就夠了

摘要：在網上討論看來，與相比于功能更為豐富，但對于學習成本以及適應時間，稍勝一籌，這也是我選擇的原因。如果你也是的使用者，還需要配合進行處理，具體可見我的這篇文章飛行手冊，里面詳細說明了的處理方式。原文鏈接前言 CSS的短板 ????作為前端學習者的我們或多或少都要學些 CSS ，它作為前端開發的三大基石之一，時刻引領著 Web 的發展潮向。而 CSS 作為一門標記性語言，可能給初...

hiyayiji 2019-08-29 13:59 評論0 收藏0