波旁威士忌整潔 語義，非調理，響應式網格

如果您使用sass，喜歡使用bourbon，並且希望將智慧型網格框架用於輕型布局，那麼neat很有可能在可預見的將來成為您值得信賴的伴侶。 在這個簡短的介紹文章中，我將為您提供一些明智的理由，讓您輕鬆了解這個沒有主觀的網格框架。

bourbon neat由reda lemeden構思，是夢幻般的bourbon套房的一部分。 這是乙個輕量級的響應式網格框架，建立在sass和bourbon之上。 該專案本身得到了thoughtbot的支援，他們的設計師對此進行了照顧。

在安裝任何東西之前，讓我給您幾個很好的理由來研究它。 有無數的框架有望為開發設計提供穩定的框架。 當然，其中大多數肯定以一種或另一種方式成功。 但是到什麼程度呢？ 問你自己：

如果上述任何問題的答案都在敲響警鐘，我只想向您保證，這些頭痛現在很容易避免。 碰到乙個平衡收益和波旁威士忌整潔（或者簡稱為「整潔」）的專案的情況很少。 為什麼這樣？ 這裡有兩個很好的理由：

這是乙個重要的問題，但我將簡短地說：在前端庫中經常發現的難看的表示類和其他空包裝div是過去的鬼魂（至少它們應該是鬼魂）。 整潔在擺脫這些陳舊的語義習慣方面起著重要作用。 它可以幫助您編寫簡潔，醒目的標記，並通過mixin在樣式表中清晰地分隔所有網格樣式。

為什麼要處理網格框架呢？ 好吧，設計是關於關係的，關係可能很難。 網格通過幫助您以更有意義和更有條理的方式將結構繫結在一起，使網格變得更容易。 它們簡化，減少和穩定化-本質上，它們有助於減少設計中的脂肪。 neat僅用14個mixin即可實現這一目標。

..用於設定斷點的單個功能。

…以及十二個用於設定的變數：

oom，就是這樣！ 相當低調，但它為您提供了強大的功能！

變化和對靈活性的需求是持續面向未來的必需品。 合併**查詢應該是平穩且易於管理的，但是如果不謹慎處理，它們很快就會變成一團糟。

bourbon neat鼓勵通過dry

方法的「新斷點」功能來處理斷點。 將斷點儲存在變數中，然後在需要時重新使用它們。 在乙個地方更改一堆**查詢很難被克服。

更具體地說，讓我給你乙個例子。 這是乙個使用「 new-breakpoint」功能進行**查詢的隨機sass**段：

$mobile: new-breakpoint(max-width 500px 4)

.sidebar
+span-columns(3)
+media($mobile)
+span-columns(1)
.content
+span-columns(9)
+media($mobile)
+span-columns(3)

現在，您知道自己正在進入什麼領域，讓我們安裝這個美麗的東西：

注意：開始之前，您需要安裝sass 。）

如果您需要執行此步驟，請看一下有關波旁威士忌的教程 。

這是通過rubygems完成的，就像這樣：

gem install neat

neat install

@import 'bourbon/bourbon'

@import 'grid-settings'
@import 'neat/neat'

如果要將neat與rails結合使用，則需要新增：

gem neat

然後執行：

bundle install

@import 'bourbon'

@import 'grid-settings'
@import 'neat'

neat install

neat update
neat remove

在下乙個教程中，我們將對如何使用neat進行更深入，更技術性的研究。

翻譯自: