天天看點
傳回

Sass和Compass學習筆記（1）

    • 為什麼要學習Sass和Compass
      • 簡單來說主要目标
      • 那麼到底哪些人需要來學習sass和compass呢
    • Sass的工作流程
      • sass文法分類
        • Sass文法
        • Scss文法
    • Sass和compass安裝
      • Ruby的安裝
      • 安裝Sass和檔案建立
      • compass安裝和檔案建立
      • sass文法使用
        • 變量操作

為什麼要學習Sass和Compass

簡單來說，主要目标：

  • 使用Sass和compass可以寫出更加優秀的CSS
  • 可以解決CSS編寫過程中的一些痛點問題，如精靈圖合成sprite 等
  • 能夠有效的組織樣式，圖檔，字型等項目元素

當然前提是你要首先會寫CSS，要不然也不會寫出好的Sass和compass，不過也不排除意外。

那麼到底哪些人需要來學習sass和compass呢

  • 擔任重構工作的同學，寫很多CSS，不知如何自動化.
  • 前端JS工程師，希望在項目周期内更好組織項目内容。

Sass的工作流程

Sass和Compass學習筆記（1）
  • 首選第一步編寫字尾為.scss或者.sass的代碼檔案，這裡為什麼會有兩種不同的字尾命名方式呢，這要和sass的曆史和CSS3的發展有關.最早的sass檔案都是以.sass為字尾檔案，随着CSS3的發展Sass加入了.scss的類似CSS代碼編寫風格的檔案。
  • 通過Sass引擎compass編譯生成字尾為*.css檔案最後将樣式代碼Deploy到代碼倉庫（git或者github）上，生成靜态頁面網頁呈現。

sass文法分類

.Sass文法 

h1
    color: #000
    background: #fff;

.Scss文法 

h1{
    color: #000;
    background: #fff;
}

注意：一個項目中可混合使用兩種文法，但不能在一個檔案中使用兩種文法

Sass和compass安裝

由于Sass底層開發環境是由Ruby開發的，是以需要部署安裝Ruby進行Sass的安裝和編譯使用，下面介紹一下Ruby的安裝。

注意：這裡說明一點，由于中國網絡的限制，一般Ruby的安裝是需要翻牆的，具體怎麼翻，相信大家都有自己的方法，網上也可以搜到很對，這裡就不做介紹了

Ruby的安裝

登入Ruby的官方網站http://www.ruby-lang.orrg/en/進行下載下傳安裝，可以下載下傳Mac,Linux,Windows 版本，這裡講一下Windows版本的安裝，其他作業系統類似。

安裝Ruby,選擇檔案目錄，注意添加Ruby的執行程式到你安裝的路徑中。
Sass和Compass學習筆記（1）

檢視Ruby版本号

這裡同樣由于網絡原因，需要将Amazon上的Ruby資源路徑換成國内淘寶Ruby資源路徑

執行 
gem sources --remove https://rubygems.org/ //移除原來資源檔案
gem sources -a https://ruby.taobao.org/ //換成淘寶資源

安裝Sass和檔案建立 

gem install sass

同時可以指定sass安裝版本号3.3

解除安裝指定版本

建立一個名為learn-sass-cli的檔案

mkdir learn-sass-cli //建立檔案
cd learn-sass-cli/  //進入檔案目錄
echo off >main.scss //建立main.scss檔案
sass main.scss mian.css //将main.scss檔案編譯成main.css檔案

打開main.scss檔案，輸入簡單的全局設定樣式

*{
    margin: ;
    pading: ;
}

編譯生成的檔案目錄如下所示

Sass和Compass學習筆記（1）

其中.sass-cache是一個編譯緩存檔案，main.scss是一個sass檔案，main.css.map是一個映射檔案，main.css便是最終編譯生成的樣式檔案。

至此sass的安裝和檔案建立便完成了，下面介紹compass的安裝和建立

compass安裝和檔案建立

comapss安裝類似sass

gem install compass
compass -v //檢視版本号

建立workspace工作檔案

mkdir workspace
cd workspace/
compass create learn-compass-init //建立compass檔案

實時監聽檔案變化

cd learn-compass-init/
compass watch
Sass和Compass學習筆記（1）

workspace工程目錄如下所示

Sass和Compass學習筆記（1）

在sass目錄下建立一個存放變量的_variable.scss檔案

分别定義headline-ff和main-sec-ff兩個字型變量，輸入相應的字型内容：

$headline-ff: Braggadocio, Arial, Verdana, Helvetica, scans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, scans-serif;

之後在

screen.scss

檔案中導入該檔案和系統自定義的樣式重置檔案，

screen.scss

稱為“宿主檔案”：

@import "variable", "compass/reset";

注意：這裡的@import不同于CSS原生的@import,CSS中原生的@import指令有兩大弊端，1，@import始終要放在代碼的最前面2，對性能不利

編寫主題樣式和頁面主題樣式

//主标題樣式
.headline{
    font-family: $headline-ff;
}

/* 頁面主題内容樣式 */
.main-sec{
    font-family: $main-sec-ff;

    .headline{
        font:{
            family: $main-sec-ff;
            size: px;
        }
    }

    .detail {
        font-size: px;
    }
}

在screen.css檔案中編譯生成的代碼如下：

/* line 25, ../sass/screen.scss */
.headline {
  font-family: Braggadocio, Arial, Verdana, Helvetica, scans-serif;
}

/* 頁面主題内容樣式 */
/* line 30, ../sass/screen.scss */
.main-sec {
  font-family: Arial, Verdana, Helvetica, scans-serif;
}
/* line 33, ../sass/screen.scss */
.main-sec .headline {
  font-family: Arial, Verdana, Helvetica, scans-serif;
  font-size: px;
}
/* line 40, ../sass/screen.scss */
.main-sec .detail {
  font-size: px;
}

上面代碼中使用了類似CSS編寫過程中的中文注釋，這裡有些中文注釋會在終端compss監聽中報錯，主要是ruby引擎的問題，解決方法是：找到rubyd 的安裝目錄裡面的sass子產品，路徑如下：C：\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass，檔案裡面有個engine.rb,打開之後在所有的require XXXX後面添加代碼

Encoding.default_external = Encoding.find('utf-8)

。現在一般浏覽器都是用的utf-8字元。

sass文法使用

1. 變量操作

①直接操作變量，即變量表達式。

在_variable.scss檔案中統一定義變量，變量定義用$開頭

調用變量

div{
    color: $color;
}

編譯生成的css檔案

div{
    color: #fff;
}

②通過函數

  • 跟代碼無關的函數，多是自己内置函數，稱為functions

    自定義函數

@function trible($i){
    @return $i * ;
}
//trible函數傳回三倍資料

調用

div{
    width: trible(px);
}

編譯實作效果

div{
    widt: px;
}

  • 可重用的代碼塊，稱為mixin

    mixinl類似于C中的宏定義，可以多次調用代碼塊，有

    @include

     和

    @extend

     兩種不同方式，同樣首先建立外部_mixin.scss外部代碼檔案
    Sass和Compass學習筆記（1）

1.使用

@include

方法

定義響應式代碼塊col-6子產品，

@mixin col-6{
    width: %;
    float: left;
}

使用

@include

指令調用，首先同樣需要将mixin塊import進來

@import "mixin";

.demo{
    @include col-6();
    &:hover{
        background-color: #fff;
    }
}

編譯轉換效果

.demo{
    width: %;
    float: left;
}
.demo:hover{background: #fff;}

2.使用mixin還能指定參數和預設值

@mixin col($width){
    width: $width;
    float: left;
}

調用

.demo{
    @include col(50%);
}

編譯生成效果

.demo{
    width: %;
    float: left;
}

3.使用

@extend

方法

現有兩個錯誤級别，error和serious-error,

①第一張方案，serious-error中複用error中的color屬性設定，造成了代碼的備援

.error{
    color: red;
}
.serious-error{
    color: red;
    font-size: px;
}

html檔案

<div class="error">基本錯誤</div>
<div class="serious-error">嚴重錯誤</div>

②第二種方案，在html中同時引入error類，不有利于語義化

.error{
    color: red;
}
.serious-error{
    font-size: px;
}

html檔案

<div class="error">基本錯誤</div>
<div class="error serious-error">嚴重錯誤</div>

③使用

@extend

方案

.error{
    color: red;
}
.serious-error{
    @extend: .error;
    font-size: px;
}

編譯生成css代碼效果

.error, .serious-error{
    color: red;
}
.serious-error{
    font-size: px;
}
  • 使用&符号，生成a标簽的hover僞類 
a{
    &:hover {color: #f0f0f0;}
}

生成css檔案

a:hover{
    color: #f0f0f0;
}

内部屬性嵌套，在頭檔案中字型font定義：

.headline{
    font:{
        size: px;
        family: "微軟雅黑";
    }
}

編譯生成css代碼：

.headline{
    font-size: px;
    font-family: "微軟雅黑";
}

(end)

sass Compass
上一篇: Lucene6.1學習案例背景：
下一篇: 本地安裝 ruby sass compass

繼續閱讀