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

Drummor 發布于2019-08-28 17:55 / 519人閱讀

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

LESS 是一門CSS預編譯語言，猶記得當初打算使用CSS預編譯語言的時候，可選的有SASS、LESS、Stylus三門，剛好那個時候在學習bootstrap，bootstrap項目中樣式就是less寫的，從此就結下了于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了。但是這里需要注意的仍然是有些點：

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

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

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

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

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

LESS 安裝, 同時推薦less在線編譯網站，能夠實時看到效果。

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

參考文章：
LESS 中文官網
LESS Getting started

GPU云服務器云服務器第四期從零開始搭建前端數據監控系統單排 less

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

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

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

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

xiaolinbang 2019-08-21 12:17 評論0 收藏0
從零單排之CSS3

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

劉福 2019-08-28 17:59 評論0 收藏0
前端從零單排之AJAX(第一期)

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

Mertens 2019-08-21 12:17 評論0 收藏0
從零單排系列之寫一個類vue框架(一)

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

raise_yang 2019-08-23 18:26 評論0 收藏0
從零單排系列之寫一個類vue框架(二)

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

learn_shifeng 2019-08-23 18:27 評論0 收藏0