Sass: Sass Basics. Before you can use Sass, you need to set it up on your project.
If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Compass Documentation. Bourbon - A Sass Mixin Library. Sass教學手冊. Sass開發流程設計 - (14)Susy RWD Grid排版流程(下) 再一次瀏覽我們要建的layout： 複習我們的初始變數設定： $base-font-size: 16px $base-line-height: 24px @include establish-baseline() $total-columns: 5 $column-width: 4em $gutter-width: 1em $grid-padding: 1em $pad : 768px 12 $pc : 960px 15 $view : 2 $side : $total-columns - $view $base-font-size: 16px $base-line-height: 24px @include establish-baseline() $total-columns: 5 $column-width: 4em $gutter-width: 1em $grid-padding: 1em $pad : 768px 12 $pc : 960px 15 $view : 2 //右方主內容可瀏覽的範圍 $side : $total-columns - $view //左側選單所佔範圍 首先以手機版來開始講起： 左側那塊是nav.menu，右側為.main區塊， 預設是左側選單隱藏起來,右側.main則是滿版呈現。
.menu +span-columns($side) +padding-leader(0.5) +padding-trailer(3) +pad(0.2,0.2) +box-sizing(border-box) margin-left: -100% +opacity(0.9) background: #207ABC color: #fff +transition(margin 1s) @extend %clearfix .main @include span-columns($total-columns omega) +transition(margin 1s) .open & margin-right: - space($side) jquery就跟著寫 menu 手機版的選單如上圖， 平板則是一行式呈現： 實踐的手法為： banner product Blog 這四種也提供影片流程提供大家參考學習： KingKong Bruce記事: SCSS 語法學習心得筆記. SCSS 語法:Nesting Rules, 巢狀規則 就那麼簡單: {} 一層，{{}} 兩層，以此類推。
在 SCSS 語法裡巢狀規則也很簡單，你就看包幾層的 {} 符號，那就是幾層。 巢狀規則 SCSS 範例 巢狀規則 SCSS 轉成 CSS 父選擇器碰到子選擇器，就形成一條規則。 產生的 CSS， a、ab、abc 一共三條，這樣清楚了嗎。 SCSS 語法: Media Bubbling, 媒體查詢 @media 是 CSS3 的功能，SCSS 語法裡媒體查詢語法會自動包含父選擇器，有點像泡泡會上升去包著一樣。 媒體查詢 SCSS 範例 以上有巢狀關係，會產生二條規則，第二條規則使用媒體查詢語法，會自動包含父選擇器。 媒體查詢 SCSS 轉成 CSS. SASS基本使用教學：變數、函式、繼承、巢狀撰寫. 在前一篇文章《當CSS遇上變數、函式，就變成SASS啦～ SASS安裝教學》有教到要如何安裝SASS，而在這篇文章中，則是要教大家如何使用SASS ，這篇文章會提到SASS裡面的四個特色：變數（Variables）、函式（Mixin）、繼承（extend）、巢狀撰寫（Nesting） 不過在介紹四大特色之前，要先教大家如何編譯SASS，SASS提供兩種編譯方式，一種是手動編譯，一種是監視編譯(–watch)，手動編譯就是當你撰寫好CSS時下指令去做編譯，監視編譯則是你指令一個目錄，當此目錄裡面的*.scss檔案有改變時（新增、覆寫等等），就會自動去做編譯的動作，我個人推薦用監視的方式做編譯，這樣子做事情比較方便XD，所以這邊就只講監視編譯的方式…ㄎ SASS編譯 建立一個scss資料夾還有一個css資料夾 mkdir scss css 然後在scss資料夾裡面建立一個檔案：「style.scss」，注意雖然這程式叫做SASS，但是他的附檔名是scss cd scsstouch style.scss style.scss的內容，請輸入下面的範例程式碼： 然後回到上一層資料夾，就可以開始做編譯囉～ cd ..sass –watch scss:css sass –watch scss:css這句語法的意思就是監視scss這個資料夾，然後編譯的結果存到css這個資料夾的意思～ 他會一直監視scss這個資料夾，直到你把程式終止掉 變數Variables 變數要使用前，要先宣告這個變數的存在，並且指定他的值，之後就可以在CSS裡面直接使用變數.
