亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Drummor / 583人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

    xiaolinbang 評(píng)論0 收藏0

  • 從零單排之CSS3

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

    劉福 評(píng)論0 收藏0

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

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

    Mertens 評(píng)論0 收藏0

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

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

    raise_yang 評(píng)論0 收藏0

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

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

    learn_shifeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<