成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端從零單排之LESS（第四期)

Drummor / 532人閱讀

摘要：函數(shù)更多的用處在于封裝一些需要加前綴的屬性，或是多個參數(shù)的屬性，同時命名一定要足夠的語義化。適當(dāng)嵌套，以保持的優(yōu)雅。有時要考慮兼容性，需要避免編譯某條屬性，方法即在值的前面加一個符號具體如下安裝同時推薦在線編譯網(wǎng)站，能夠?qū)崟r看到效果。

LESS 是一門CSS預(yù)編譯語言，猶記得當(dāng)初打算使用CSS預(yù)編譯語言的時候，可選的有SASS、LESS、Stylus三門，剛好那個時候在學(xué)習(xí)bootstrap，bootstrap項目中樣式就是less寫的，從此就結(jié)下了于LESS的緣分。LESS使用的快一年的時間了。
下面簡單的列舉一下我最愛的三個LESS的特性：

變量
編譯前: 

@color: #ccc;
#header {
  color: @color;
}
h2 {
  color: @color;
}

編譯后

#header {
  color: #ccc;
}
h2 {
  color: #ccc;
}

混合(Mixins)
編譯前 

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

編譯后

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

嵌套
編譯前 

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px
      }
    }
  }
}

編譯后

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

這三個原因我想足以讓人愛上LESS了。但是這里需要注意的仍然是有些點：

變量命名是好事，尤其是對顏色、字體、柵格系統(tǒng)有非常大的幫助，但是使用過程還是需要謹(jǐn)慎，最好是有張網(wǎng)站用色的色表圖片，展列整個網(wǎng)站所用顏色或者是直接做成網(wǎng)頁顯示。這樣方便多人合作。

函數(shù)更多的用處在于封裝一些需要加前綴的屬性，或是多個參數(shù)的屬性，同時命名一定要足夠的語義化。

嵌套對程序員更友好， 也更好管理， 但是嵌套過深的話這點就成了災(zāi)難，會讓人看的整個人都斯巴達(dá)掉。 適當(dāng)嵌套，以保持CSS的優(yōu)雅。

有時要考慮兼容性，需要避免編譯某條屬性，方法即在值的前面加一個~符號,具體如下:

.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"
}

LESS 安裝, 同時推薦less在線編譯 網(wǎng)站，能夠?qū)崟r看到效果。

LESS 能夠做數(shù)值運算，提供一些函數(shù)， 但是我怎么都感覺那是對設(shè)計師友好呢， 是我打開方式錯了么？

參考文章：
LESS 中文官網(wǎng)
LESS Getting started

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110894.html

相關(guān)文章

  • 前端從零單排之Gulp(第二期)

    摘要：是個類似于的前端工作流工具，今天就簡單的介紹一下和一些我的使用感受在中安裝全局切換到你的前端工作目錄下確保你的前端工作目錄下有這個文件然后就已經(jīng)安裝好了，馬上就可以進(jìn)入簡單的配置了。但是在使用的工作之中會遇到一些問題。 gulp 是個類似于grunt的前端工作流工具，今天就簡單的介紹一下gulp和一些我的使用感受 Installing gulp 在Terminal中安裝全局gulp...

    xiaolinbang 評論0 收藏0

  • 從零單排之CSS3

    摘要：概覽大法好今夜秋風(fēng)陣陣，霧霾層層。布局選擇多媒體，字體響應(yīng)就是屌。說起來條目繁多，乍看之下與之前比起來復(fù)雜了好多。圓角指的即使一般正式的寫法為效果請看任意一個按鈕即可寫到此處不禁跟大家說，最好還是配合預(yù)編譯來寫。 CSS3 概覽 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋風(fēng)陣陣，霧霾層層。不禁讓人想作詩，不過...

    劉福 評論0 收藏0

  • 前端從零單排之AJAX(第一期)

    摘要：作為一個有追求的前端，這是不可以接受的。兩大特性在不刷新頁面的情況下向服務(wù)器端發(fā)送請求從服務(wù)器端接收數(shù)據(jù)，并進(jìn)行對應(yīng)的邏輯處理請求流程首先先建立一個異步請求對象第一步的對象設(shè)置已經(jīng)好了。在閉包中進(jìn)行相關(guān)的操作。 ajax的使用一直是以jQuery為主，對于底層的實現(xiàn)有點不明覺厲。作為一個有追求的前端，這是不可以接受的。便讓我們今晚好好走進(jìn)ajax的內(nèi)心世界。 ajax 兩大特性： ...

    Mertens 評論0 收藏0

  • 從零單排系列之寫一個類vue框架(一)

    摘要：因為我希望這是一個系列的文章，所以開始之前先簡單說一下，我?guī)缀鯖]用過這個框架寫過項目，所以文章中難免會有一些比較外行的說法。先整理用法，然后再整理自己的框架。 因為我希望這是一個系列的文章，所以開始之前先簡單說一下，我?guī)缀鯖]用過vue這個框架寫過項目，所以文章中難免會有一些比較外行的說法。當(dāng)然，我用過一些時間的angular，也曾經(jīng)解決過一些同行們vue方面的問題。所以如果有人原因看的...

    raise_yang 評論0 收藏0

  • 從零單排系列之寫一個類vue框架(二)

    摘要：昨天寫了一下節(jié)點綁定的替換，已經(jīng)如何檢測的方法今天優(yōu)化一下，勉強實現(xiàn)一個雙向綁定看下昨天的代碼這里是在實現(xiàn)雙向綁定之前，先普及一個和的知識。如果強行給之前的賦值，就會發(fā)生無限的情況。畢竟還在正式學(xué)習(xí)期。 昨天寫了一下節(jié)點綁定model的替換，已經(jīng)如何檢測model 的方法今天優(yōu)化一下，勉強實現(xiàn)一個雙向綁定看下昨天的代碼 function Vue(obj) { ...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<