一./*背景知識*/
1.Sass是什么？
Sass可以簡化你的Css工作流，並可以使你的Css的擴展和維護工作變的更加容易！例如，曾幾時何，因為客戶的需求的變更，你必須不斷的通過查找和替換來更改一個像素值，或者，為了能夠確定多欄布局中某一欄的寬度，你需要使用計算像素值軟件才能搞定。
Sass引入了一些新的概念如，變量，混合，嵌套和選擇器繼承.Sass 生成良好格式化的 CSS 代碼，易於組織和維護。
SASS是對CSS3（層疊樣式表）的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet。
Sass最后還是會編譯出合法的CSS讓瀏覽可以使用，也就是說它本身的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法非常的像，幾乎一樣），因為它不是標准的CSS格式，在它的語法內部可以使用動態變量等，所以它更像一種極簡單的動態語言。
2.Compass是什么?
Compass由SASS的核心團隊成員Chris Eppstein創建，是一個非常豐富的樣式框架，包括大量定義好的mixin，函數，以及對SASS的擴展。
二./*Sass和Compass安裝*/
// SASS是Ruby語言寫的，但是兩者的語法沒有關系。不懂Ruby，照樣使用。只是必須先安裝Ruby，然后再安裝SASS。
// 假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：
1 1.gem安裝Sass 2 C:\Users\DELL>gem install sass 3 4 2.查看Sass版本 5 C:\Users\DELL>sass -v 6 Sass 3.4.13 (Selective Steve) 7 8 3.編譯Sass文件 9 sass main.scss main css 10 // 一般很少使用sass命令,一般都是用Compass命令; 11 12 4.gem安裝Compass 13 C:\Users\DELL>gem install compass 14 15 5.查看Compass版本 16 C:\Users\DELL>compass -v 17 Compass 1.0.3 (Polaris)
1 6.Compass搭建項目 2 C:\Users\DELL\compass create sass 3 // 結果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/ 6 directory sass/sass/ // sass文件所在目錄; 7 directory sass/stylesheets/ // css文件所在目錄; 8 create sass/config.rb // 項目配置文件; 9 create sass/sass/screen.scss // 主要針對屏幕的sass文件; 10 create sass/sass/print.scss // 主要針對打印設備; 11 create sass/sass/ie.scss // 主要針對IE瀏覽器; 12 write sass/stylesheets/ie.css 13 write sass/stylesheets/print.css 14 write sass/stylesheets/screen.css // scss文件編譯后對應的css文件;最終將引入到HTML中的文件; 15 16 // You may now add and edit sass stylesheets in the sass subdirectory of your project. 17 // 你現在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和編輯項目的樣式表; 18 19 // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets. 20 // Sass文件以"_"開頭的叫做局部文件,不會被編譯成CSS;但它們可以被引入到其他Sass文件中; 21 22 // You can configure your project by editing the config.rb configuration file. 23 // 你可以通過編輯config.rb配置文件來配置項目信息; 24 25 // You must compile your sass stylesheets into CSS when they change. 26 // 當Sass文件被修改后,必須要編譯Sass文件到CSS; 27 28 // 1. To compile on demand: // 直接編譯; 29 // compass compile [path/to/project] 30 // 2. To monitor your project for changes and automatically recompile: 31 // compass watch [path/to/project] // 監聽項目變化並且自動編譯; 32 33 // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage: 34 // <head> 35 // <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 36 // <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> 37 // <!--[if IE]> 38 // <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> 39 // <![endif]--> 40 // </head> 41 // 將編譯后的文件引入到HTML頁面中;
三./*Sass語法基礎*/
1 1.scss和sass文件轉換 2 sass-convert main.scss main.sass 3 // 將scss文件轉換為sass文件; 4 5 2.開啟監聽編譯 6 C:\Users\DELL>cd sass 7 // 進入項目文件夾; 8 C:\Users\DELL\sass>compass watch 9 >>> Compass is watching for changes. Press Ctrl-C to Stop. 10 // 開啟監聽並自動編譯; 11 12 3.變量 13 // Sass通過"$"聲明變量; 14 >1.聲明變量 15 $headline-ff:"宋體",Arial,sans-serif; 16 $main-sec-ff:Arial,sans-serif; 17 >2.引用變量 18 .headline { 19 font-family: $headline-ff; 20 } 21 .main-sec { 22 font-family: $main-sec-ff; 23 } 24 25 4.@import引入文件 26 >1.新建局部文件 27 _variables.scss 28 // 以"_"開頭的局部文件,不會被編譯到css;作為引入文件使用; 29 >2.@import引入文件 30 @improt "variables"; 31 // 基於Sass的既定規則: 32 // 1.沒有文件后綴名的時候,sass會添加.scss或.sass的后綴; 33 // 2.用同一目錄下,局部文件和非局部文件不能重名; 34 >3.使用css原生@import的既定規則: 35 >>1.當@import后邊跟的文件名是以".css"結尾的時候; 36 >>2.當@import后邊跟的是"http://"開頭的字符串的時候; 37 >>3.當@import后邊跟的是一個url()函數的時候 38 >>4.當@import后邊帶有media queries的時候; 39 40 5.注釋 41 >1.以"/**/"注釋的內容最后被輸出到了對應的css文件中; 42 >2.以"//"注釋的內容則沒有輸出到對應的css文件; 43 44 6.類嵌套語法 45 .main-sec{ 46 font-family: $main-sec-ff; 47 .headline { 48 font-family: $main-sec-ff; 49 } 50 } 51 52 7.屬性嵌套語法 53 .headline { 54 font:{ 55 family:$main-sec-ff; 56 size:16px; 57 } 58 } 59 60 8.父類選擇器(自身調用) 61 a { 62 &:hover { 63 color:red; 64 } 65 }
四./*Sass語法進階*/
1 1.變量操作 2 >1.直接操作變量,即變量表達式; 3 >2.通過函數; 4 >>1.跟代碼塊無關的函數,多是自己內置函數,稱為functions; 5 >>2.可重用的代碼塊:稱為mixin; 6 >>>1.@include; // 以復制/拷貝的方式存在; 7 >>>2.@extend; // 以組合聲明的方式存在; 8 9 2.顏色值轉換; 10 Sass: 11 color:hsl(270,100%,50%); 12 Css: 13 color:#7f00ff; 14 15 3.@mixin引用 16 Sass: 17 @mixin col-6 { // 聲明col-6()函數; 18 width:50%; 19 float:left; 20 } 21 .webdemo-sec { 22 @include col-6 // 通過@include引入@col-6()函數;並且可以引入多個; 23 &:hover { // &:表示父類選擇器; 24 background-color:#f5f5f5; 25 } 26 } 27 Css: 28 .webdemo-sec { // 繼承了col-6()函數的屬性值; 29 width:50%; 30 float:left; 31 } 32 .webdemo-sec:hover { // 通過"&"調用到本身; 33 background-color:#f5f5f5; 34 } 35 36 4.@mixin包含參數引用; 37 Sass: 38 @mixin col($width:50%){ // 設置默認參數值;不傳參數時,屬性值為默認; 39 width:$width; 40 float:right; 41 } 42 .webdemo-abc { 43 @include col(60%); // 設置傳參數; 44 } 45 Css: 46 .webdemo-abc { 47 width:60%; // 編譯后的屬性值; 48 float:right; 49 } 50 51 5.@extend繼承 52 >1.extend不可以繼承選擇器序列; 53 >2.使用%,用來構建只用來繼承的選擇器; 54 Sass: 55 .error { 56 color:#f00; 57 } 58 %error { // 構建只用來要繼承的選擇器; 59 background:#0f0; 60 } 61 .serious-error { 62 @extend .error; 63 @extend %error; 64 border:1px solid #f00; 65 } 66 Css: 67 .error, .serious-error { // 繼承自.error; 68 color:#f00; 69 } 70 .serious-error { // 繼承自%serious-error; 71 background:#0f0; 72 } 73 .serious-error { // 自己的屬性; 74 border:1px solid #f00; 75 }
五./*Sass高級語法*/
1 2 1.@media用法 3 // Sass中的@media與Css中的@media區別: 4 // 1.Sass中的media query可以內嵌在css規則中; 5 // 2.在生成css的時候,media query才會被提到樣式的最高級; 6 // 3.好處:避免了重復書寫選擇器或者打亂樣式表的流程; 7 Sass: 8 @mixin col-sm ($width:50%){ 9 @media (min-width:768px){ 10 width:$width; 11 float:left; 12 } 13 } 14 .webdemo-sec { 15 @include col-sm(); 16 } 17 Css: 18 @media (min-width:768px){ 19 .webdemo-sec { 20 width:50%; 21 float:left; 22 } 23 } 24 25 2.@at-root指令 26 // 嵌套副作用:增加了樣式修飾的權重;制造了樣式位置的依賴; 27 Sass: 28 .main-sec { 29 font-size:12px; 30 @at-root { // 在嵌套的時候使用@at-root指令; 31 .main-sec-headline { // 指定被嵌套的內容輸出到樣式表的頂層; 32 font-size:16px; 33 } 34 .main-sec-detail { 35 font-size:14px; 36 } 37 } 38 } 39 Css: 40 .main-sec { 41 font-size:12px; 42 } 43 .main-sec-headline { // 編譯后成功輸出到樣式表的頂層; 44 font-size:16px; 45 } 46 .main-sec-detail { 47 font-size:14px; 48 } 49 50 3.if操作符 51 @mixin col-sa ($width:50%){ 52 // 使用type-of()方法:檢測$width是否是數值類型; 53 @if type-of($width) != number { 54 // #{}:可以引用Sass的變量;--Ruby語法; 55 // @error:表示錯誤信息; 56 @error "$width必須是一個數值類型,你輸入的width是:#{$width}."; 57 } 58 59 // 使用unitless()方法:判斷當前的數值是否跟有單位; 60 // 前置not表示否定,雙重否定表示肯定; 61 @if not unitless($width){ // 判斷數值有單位; 62 @if unit($width) != "%" { // 如果單位不是%; 63 @error "$width必須是一個數值類型,你輸入的width是:#{$width}."; 64 } 65 } @else { // 判斷數值沒有單位; 66 @warn "$width必須是一個數值類型,你輸入的width是:#{$width}."; 67 $width:(percentage($width)/100); // 換算成帶%單位的數值; 68 } 69 @media (min-width:768px){ 70 width:$width; 71 float:left; 72 } 73 } 74 75 4.Sass的輸出格式 76 // 在config.rb配置文件里; 77 >1.output_style = :expanded or :nested or :compact or :compressed 78 >>0.:expanded => 編譯后的文件是展開的; 79 >>1.:nested => 根據嵌套,在輸出的時候代碼縮進; 80 >>2.:compact => 將所有的屬性匯總到一行;選擇器之間的關系更清晰; 81 >>3.:compressed => 將所有的代碼壓縮以占用最小的空間;