FE: Sass and Bootstrap 3 with Sass

Sass簡介

Sass是CSS的預處理語言；提供了變量定義、函數定義、函數調用、類繼承、嵌套（CSS層級關係）及代碼引入功能。

 

Sass安裝指南

MAC

OS X 10.10.3

 

終端

1 -> gem -v
2    2.0.14
3 
4 -> sudo gem install sass
5  
6 -> sass -v
7    Sass 3.4.13 (Selective Steve)

 

WIN

Windows 7 x64

 

須要安裝ruby，而後就能夠使用gem了。ruby傳送門：http://rubyinstaller.org/

 

命令行

1 -> gem -v
2    2.4.5
3    
4 -> gem sources -l
5    *** CURRENT SOURCES ***
6    https://ruby.taobao.org/ 
7    
8 -> gem install sass

PS：

1. 強烈建議將gem sources改成https://ruby.taobao.org/；改的方法參考後文「MAC可能遇到的錯誤」中的命令

2. 若添加https://ruby.taobao.org/後，仍然出錯，使用gem sources -l命令查看當前全部源，使用gem sources --remove將默認源刪除

 

MAC可能遇到的錯誤

sudo gem install sass時出現錯誤

1. ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:

          Unable to download data from https://rubygems.org/ - Errno::ETIMEDOUT: Operation timed out - connect(2) (https://rubygems.org/latest_specs.4.8.gz)

 

緣由：被和諧了

解決：更改ruby源

 

1 -> gem sources
2    https://rubygems.org/
3 -> gem sources --remove https://rubygems.org/
4 -> gem sources --a https://ruby.taobao.org/

 

2. ERROR:  While executing gem ... (NoMethodError) undefined method `size' for nil:NilClass

 

緣由：緩存問題

解決：clear gem cache

 

1 -> cd /Library/Ruby/Gems/2.0.0/cache
2 -> sudo rm sass-3.4.13.gem

 

Bootstrap with Sass安裝指南

MAC

1 -> gem install bootstrap-sass -v 3.3.2.0
2 -> cd /Library/Ruby/Gems/2.0.0/gems/bootstrap-sass-3.3.2.0/assets/stylesheets

 

WIN

1 gem install bootstrap-sass -v 3.3.2.0
2 cd C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\bootstrap-sass-3.3.2.0\assets\stylesheets

PS：Ruby22-x64是Ruby安裝文件夾

 

bootstrap with sass相關文件在stylesheets文件夾下，拷貝到本身項目下使用便可；以下圖所示。PS：我把stylesheets更名成了bootstrapSass ：）

 

Sass使用指南

<最重要的事項開頭說>Sass編譯輸出css

1 -> sass sample.scss output.css

如開篇所說Sass是CSS的擴展語言，其提供了變量定義、函數定義、函數調用、類繼承、嵌套（CSS層級關係）及代碼引入功能，下面逐一介紹其功能用法。

變量定義：$

sample.scss

1 $border-radius-base: 4px !default；

函數定義：@mixin

sample.scss

1 @mixin border-left-radius($radius) {
2   border-bottom-left-radius: $radius;
3      border-top-left-radius: $radius;
4 }

函數調用：@include

sample.scss

1 .front-btn-group {
2   @include border-left-radius(0);
3 }

output.css

1 .front-btn-group {
2   border-bottom-left-radius: 0;
3   border-top-left-radius: 0;
4 }

類繼承：@extend

sample.scss

1 .message {
2   border: 1px solid #ccc;
3   padding: 10px;
4   color: #333;
5 }
6 .success {
7   @extend .message;
8   border-color: green;
9 }

output.css

1 .message, .success {
2   border: 1px solid #ccc;
3   padding: 10px;
4   color: #333; }
5 
6 .success {
7   border-color: green;
8 }

PS：Sass3.4.13（截止目前最新版）在media query中不能使用@extend

嵌套

sample.scss

1 .front-btn-group {
2   .btn {
3       border: 1px solid #ccc;
4   }
5 }

output.css

1 .front-btn-group .btn {
2   border: 1px solid #ccc;
3 }

&引用父類

sample.scss

1 .front-btn-group .btn:first-child {
2     margin-left: 0;
3     &:not(:last-child) {
4         @include border-right-radius(0);
5     }
6 }

output.css

1 .front-btn-group .btn:first-child {
2   margin-left: 0;
3 }
4 .front-btn-group .btn:first-child:not(:last-child) {
5     border-bottom-right-radius: 0;
6     border-top-right-radius: 0;
7 }

代碼引入：@import

sample.scss

1 @import "bootstrapSass/bootstrap/mixins/border-radius";
2 .front-btn-group {
3   @include border-left-radius(0);
4 }

output.css

1 .front-btn-group {
2   border-bottom-left-radius: 0;
3   border-top-left-radius: 0;
4 }

PS：

1. border-left-radius定義在_border-radius.scss文件中

2. @import引入能產生css代碼的scss文件，則被引入scss文件所產生的css也會被引入到當前scss生成的css文件中

3. 至於不能產生css代碼的scss文件，參考bootstrap，如純$變量定義文件：_variables.scss，如純mixins定義文件：_border-radius.scss

 

結語

Sass入門相對簡單，官方短短几屏介紹，已將Sass的功能全數道來，多是由於CSS語言自己簡單吧

 

資料

http://sass-lang.com/：Sass main page

http://sass-lang.com/guide：Sass official guide

http://www.ruanyifeng.com/blog/2012/06/sass.html : 阮一峯 SASS用法指南

http://www.hongkiat.com/blog/bootstrap-and-sass/ : Bootstrap 3 With Sass