SASS之精華-@mixin、@extend和PlaceholderSelectors_html/css

# 掌握 SASS 之精華—— @mixin、 @extend 和 Placeholder Selectors最近使用 Rails 折騰小項目，CSS 框架選用了 [Bourbon](https://github.com/thoughtbot/bourbon) 并結(jié)合了 [bitters](https://github.com/thoughtbot/bitters) 發(fā)現(xiàn)其能很好地利用了 SASS 特性。輕量級且定制性強(qiáng)，相比 bootstrap,Semantic-ui 這類啥都封裝好的框架，輕量級多得多。在使用的過程中感嘆在 Web 項目一開始的時候就得良好地組織好前端代碼，不然地話，在模板文件中到處都是一堆 CSS ，后來者無力去改變也只能是繼續(xù)堆砌 CSS，毫無閱讀性以及組織結(jié)構(gòu)規(guī)范，導(dǎo)致了大量的重復(fù)樣式代碼，CSS 復(fù)用性不高，作為一名代碼癖的程序員，你還能忍受嗎？還有一點就是開發(fā)者隨便改動一個元素的class 或者 id 的樣式，在沒有良好組織樣式代碼的前提下很容易導(dǎo)致不可控的樣式改變，等到線上更新了才他媽意識到這個class對另外一個元素的樣式也改了。接下來看看一個使用了 bitters 組織的 Rails 項目樣式代碼的組織。- stylesheets - base - extends - _button.scss - _clearfix.scss - mixins - _flash.scss - _bases.scss - _buttons.scss - _forms - _lists.scss - ... - _variables.scss - _account.scss - _users.scss - ... - application.css.scss看到這樣的目錄結(jié)構(gòu)，有沒有很 SASS 味？ _bases.scss 文件中 **@import** 了 base 目錄下包含了整個樣式公共的一些文件，也許你也看到了 **extends** 和 **mixins** 子目錄，別著急先上飯前菜，這篇文章重要就是要說明它們。_variables.scss 內(nèi)容只要是顏色值、鏈接樣式、字體樣式等一些變量，例如```$black: #000000;```極其方便地被引用和復(fù)用。base 文件夾下的其他文件都是各種 HTML 元素的樣式，有人說，你用 Semantic-ui 多方便啊，為啥這么折騰，哈，這不是我們今天討論的內(nèi)容；然后就是base 文件夾以外的一些樣式文件都是按照其業(yè)務(wù)邏輯來組織，各個樣式文件各司其職多好！ ##### ~~
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com