- 首先進(jìn)入<code>bootstrap</code>官網(wǎng)
如圖:
下載好以后解壓完目錄:
我們只需要吧 <code>assets</code> 這個目錄放到項目public下面,文件目錄結(jié)構(gòu)圖:
然后點(diǎn)開 <code>stylesheets</code> 文件夾,我們會看到文件夾名字前面都有 **_ **下劃線
這么一個梗, <code>代表文件不能被編譯</code>,好我們繼續(xù)往下看,bootstrap sass 結(jié)構(gòu)
在 /assets/stylesheet/中瓣窄，bootstrap文件夾和bootstrap.scss,bootstrap-compass都是我們核心文件捷兰。
點(diǎn)開_bootstrap.scss文件 我們會看到以下目錄
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
注! 不要再bootstrap 文件下寫自己的scss文件,可以再同級下創(chuàng)建一個文件夾如:myselfBooStrap，從而編寫自己的scss文件
編寫自己的scss 文件前綴要和bootstrap一樣,統(tǒng)一加上下劃線如 _demo.scss.
我們編寫完sass代碼，如何引入呢? 如下:加入一條關(guān)鍵性代碼.
<pre>@import "myselfBooStrap/demo";</pre>然而還沒完,仔細(xì)看 stylesheets 下的scss文件前面也有下劃線,ok.把項目文件名前的去掉
Sass 編譯命令 : sass 編譯的文件名 (編譯路徑)編譯的文件名 (命令如下)
<pre> sass bootstrap.min.scss ../css/bootstrap.min.css </pre>
5.現(xiàn)在就有個疑問了,我每次編寫代碼,每次都得輸一次命令嗎? No 不需要, 文件自動監(jiān)聽,上代碼:
<pre>sass --watch bootstrap.min.ss:../css/bootstrap.min.css</pre>
ok 澎粟！ 盡情的享受sass 帶來的。介返。星压。。
有不足之處,還望各位老鐵提出寶貴的意見! 抱拳了!!認(rèn)真臉
