css預處理器sass使用教程(多圖預警)

本文轉載自查看原文 2016-09-27 11:20 2959

css預處理器賦予了css動態語言的特性，如變量、函數、運算、繼承、嵌套等，有助於更好地組織管理樣式文件，以及更高效地開發項目。css預處理器可以更方便的維護和管理css代碼，讓整個網頁變得更加靈活可變。對於預處理器，廣泛使用的有less和sass。在這不做對比，2者大同小異，sass基於Ruby語言編寫，所以編譯sass文件需要Ruby環境。我們使用sass並不需要過多了解Ruby語言，只需要安裝Ruby環境即可，而less則主要是運行在node環境下，功能語法有類似之處。本文主要介紹Ruby下sass的使用。

Ruby下載與安裝：

1、登錄http://rubyinstaller.org/

2、點擊download后到這個頁面，64位windows電腦下載箭頭所指的版本即可

3、完了直接安裝

點擊finish后，就算安裝完了，我們還需要去命令行下檢測是否安裝成功，注意的是ruby的命令行而不是cmd下的命令行。

打開后進入命令行：

緊接着在ruby下安裝sass：輸入指令gem install sass

輸入sass -v，后出現版本號，就算安裝成功了。

好了，下載安裝完成，環境算是搭建好了，關於語法跟相關指令下面介紹。

sass的使用。

為了讓更多人能夠真正學會使用sass，我從新建文件開始，一步一步演示。

1、我在桌面建了一個名叫sasstest的文件夾，里面新建了一個sass.scss后綴的文件。（新建文本文檔后，把名字后綴改成sass.scss）

這里說明一下，為什么sass的后綴是scss？其實，sass有兩種語法形式。

首先是scss，也就是我們這個后綴形式的語法。這種格式在 CSS3 語法的基礎上進行擴展，這意味着每個CSS樣式表是一個同等的SCSS文件。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器專屬前綴語法，這種語法的樣式表文件需要以 .scss 作為拓展名。

另一種，也是最早的語法，被稱為縮進語法。它提供了一種更加簡介的方式來書寫CSS。它使用縮進而不是花括號來表示選擇器的嵌套，用換行而不是分號來分隔屬性，一些人認為這樣做比 SCSS 更容易閱讀，書寫也更快速。縮排語法具有 Sass 的所有特色功能，雖然有些語法上稍有差異。使用此種語法的樣式表文件需要以 .sass 作為擴展名。

其實不管哪種語法，任何一種語法的文件可以直接導入到另一種語法的文件中使用，同時還可以通過sass-convert 命令行工具，進行互相轉換。

我感覺不用糾結這些差異，使用一種即可，我習慣第一種，所以本文一直使用scss的語法形式。

2、第二步當然就是打開sass.scss啦。用什么編輯器都行，本文使用sublime text。

要想運行sass，就要使用到指令了，好了，先別管語法，在sass.scss中敲上幾行，看能不能編譯成css，提前了解下指令。

敲上去之后呢，查看新建的文件夾，你會發現什么都沒有，還是老樣

當然啦，你還沒監測運行你的sass代碼怎么會有變化呢？還記得ruby的命令行窗口嗎？是的，需要在那里敲上運行的指令，sass才能生成css代碼。

運行sass文件：sass input.scss output.css (左邊代表sass輸入文件，右邊是css輸出文件)

sass監視sass文件的指令有：

所謂監視，就是每當sass文件發生改變時，css文件隨之生成。這點與運行不同，運行時一次性的，監視是持續性的。

監視某一個sass文件：sass --watch input.scss:output.css(左邊代表sass輸入文件，右邊是css輸出文件)

監視整個文件夾：sass --watch sass:css(左邊代表監視的文件夾路徑，右邊代表輸出文件夾路徑)

那么，跑一邊我們的scss代碼，看看生成的css，我想要的是在sasstest文件夾下面生成一個css文件夾，存放css文件，方便管理。

1）找到當前文件夾。由於是桌面，所以路徑如下

注意，如果跨盤，直接這樣進入某盤：

按照上面3種，寫對應的指令。

2）運行：運行的時候，沒能生成css文件夾，這時需要手動增加css文件夾。

本例子指令：

說明：首先進入sasstest文件夾，然后敲指令。

結果圖：

第一個是生成的緩存文件，打開是css，會看到，

除了css，還有一個map文件，sass文件相當於源文件，css相當於編譯后的文件，當檢查到頁面問題的時候，你看到的是css，但是需要修改的是sass文件，這個map就是兩個文件的對應關系表。

分別打開2個文件：

可以看到css出來了，而那個文件只是對應關系表，不用管它。

3）監視文件。我們恢復文件夾初始狀態，如圖：

監視sass.scss一個文件sass --watch sass.scss:css\sass.css，監視會生成對應的文件夾，不用手動創建。（注意，這樣只能監視一個文件，就是sass.scss，如果sasstest下還有其他sass文件，則監視不了）

效果是一樣的：

我們有恢復文件夾初始狀態，把生成的刪去，試一下監視文件夾的指令，其實用的更多的還是監視文件夾

要監視文件夾，路徑需要回到文件夾的上一級，本文中就是桌面了。

好了，關於運行就介紹到這里了。

關於css輸出格式，sass提供了四種：nested、expanded、compact、compressed。

指令寫法：

nested：nested（嵌套）格式是 Sass 默認的輸出格式，因為它的格式反映CSS樣式與HTML文檔結構。每個屬性都獨占用一行，但縮排不是固定的。每個規則是基於它的何嵌套深度縮進。

expanded：expanded（擴展）格式更像是手寫的CSS樣式，每個屬性和規則都獨占用一行。在規則之內的屬性縮進的，但規則沒有任何特殊的縮進。

compact：compact（緊湊）格式比起nested（嵌套）或expanded（擴展）格式占據更小的空間。這種格式重點聚焦在選擇器上，不是它們的屬性。每個CSS規則獨占用一行，該行還包括定義的每個屬性。嵌套的規則都是另起一行，不嵌套的選擇器會輸出空白行作為分隔符。

compressed：compressed（壓縮）格式占用盡可能小的空間，在該文件的末尾會有一個換行，並且除了必要的分隔選擇器之外，基本沒有多余空格，它還包括其他一些小的壓縮，比如選擇顏色最小的表示方式。這意味着可讀性很差。

sass的語法：

時間有限，我貼一下我練習是使用到的語法代碼：

@charset "utf-8";
/*
* CSS擴展
*/
/*嵌套規則*/
#main{
    width:100px;
    p, div{
        font-size:2em;
        a{
            font-weight: bold;
        }
    }
}
/*引用父選擇器*/
a{
    text-decoration: none;
    font-weight: lighter;
    &:hover{
        text-decoration:underline;
        font-weight: bolder;
    }
    body.firefox &{
        color:red;
    }
}
#main{
    color:red;
    a{
        font-size: 20px;
        &:hover{
            color:blue;
        }
    }
}
/*嵌套屬性*/
.fun{
    font:{
        family:"微軟雅黑";
        size:16px;
        weight:bolder;
    }
}
/* 占位符選擇器: %foo 
Sass 支持一種特殊類型的選擇器,叫做"占位符選擇器" 
](placeholder selector)。這些看起來像 class 和 id 
選擇器，除了# 或.用%替換。他們需要在@extend 指令中使用;
*/
/*
*  Sassscript
*/
/* 交互式 shell */
/*
Interactive Shell 可以在命令行中測試 SassScript 的功能。
在命令行中輸入 sass -i，然后輸入想要測試的 SassScript 
查看輸出結果：
sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
*/
/*
 變量：變量僅在它定義的選擇器嵌套層級的范圍內可用
 （愚人碼頭注：可以理解為塊級作用域）。不在任何嵌
 套選擇器內定義的變量則在可任何地方使用（愚人碼頭
 注：可以理解為全局變量）。定義變量的時候可以后面
 帶上!global標志，在這種情況下，變量在任何地方可
 見（愚人碼頭注：可以理解為全局變量）
 */
 #bod{
     $width:100px !global;
     width:$width;
 }
 #ref{
    width:$width;
 }
/*
數據類型：SassScript 支持 7 種主要的數據類型
數字、文本字符串、顏色、布爾值、空值、值列表 (list)、maps
*/
@mixin firefox-message($select){
    body #{$select}:before{
        color:red;
        content: "hi";
    }
}
@include firefox-message(".header");
/* 插值 */
$name : son;
$color :blue;
p.#{$name}{
    color:#{color};
}
/* SassScript中的& 
就像當它在選擇器中使用一樣，SassScript中的&指向
當前父選擇器。下面是一個逗號分隔的列表（list）
中包含一個空格的分隔列表（list）
*/
@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}
@include does-parent-exist;
/* 變量默認: !default 
 如果分配給變量的值后面添加了!default標志 ，
 這意味着該變量如果已經賦值，那么它不會被重
 新賦值，但是，如果它尚未賦值，那么它會被賦
 予新的給定值。
*/
$content: "Second content?" !default;
$content: "First content";
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
/* @media */
.silder{
    width: 300px;
    @media screen  and (max-width: 500px) {
        width:500px;
    }
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
/* @extend */
.error{
    border: 1px #f00;
      background-color: #fdd;
}
.seriousError{
    @extend .error;
    border-width: 3px;
}
#fake-links .link {
    @extend a.class;
    font-size: 18px;
}
a.class{
    color:blue;
    &:hover{
        color:red;
    }
}
/*
@extend-Only 選擇器
占位選擇器看起來很像普通的 class 和 id 選擇器，
只是 # 或 . 被替換成了 %。他可以像 class 或者
 id 選擇器那樣使用，而它本身的規則，不會被編譯
 到 CSS 文件中，如下
*/
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
/*
占位符選擇器，就像class和id選擇器那樣可以用於擴展。
擴展選擇器，將會編譯成CSS，占位符選擇器本身不會被
編譯。例如：
*/
.notice {
  @extend %extreme;
}
/*
!optional 標記:主要是避免擴展時如果沒有某個選擇器，會報錯
*/
a.important {
  @extend .noticeqq !optional;
}
/*
*
*控制指令和表達式
*
*/
/*@if 語法*/
$type : monster;
p{
    @if $type == ocean {
        color: red;
    } @else if $type == matator{
        color: blue;
    } @else if $type == monster{
        color: green;
    } @else {
        color: black;
    }
}
/*@for 語法*/
/*
@for指令重復輸出一組樣式。對於每次重復，計數器變量用於
調整輸出結果。該指令有兩種形式：@for $var from <start> 
through <end> 和 @for $var from <start> to <end>。注意
關鍵字through 和 to的區別。$var可以是任何變量名，比如$i;
<start> 和 <end>是應該返回整數的SassScript表達式。當
<start>比<end>大的時候，計數器將遞減，而不是增量。

@for語句將設置$var為指定的范圍內每個連續的數值，並且每
一次輸出的嵌套樣式中使用$var的值。對於from ... through
的形式，范圍包括<start>和<end>的值，但from ... to的形式
從<start>開始運行，但不包括<end>的值。
*/
@for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
}
@for $i from 5 to 3 {
      .item-#{$i} { width: 2em * $i; }
}
/*@each
@each指令通常格式是@each $var in <list or map>。$var可以
是任何變量名，像$length 或者 $name，和<list or map>是一
個返回列表（list）或 map 的 SassScript 表達式。

@each 規則將$var設置為列表（list）或 map 中的每個項目，
輸出樣式中包含使用$var的值
*/
@each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
  }
}
/*多重賦值*/
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
  }
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
        font-size: $size;
  }
}
/*
@while 指令重復輸出嵌套樣式，直到SassScript表達式返回結果
為false。這可用於實現比@for語句更復雜的循環
*/
$i: 6;
  @while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
}
/*
*
*混入指令
*
*/
/*
混入(mixin)允許定義可以在整個樣式表中重復使用的樣式，
而避免了使用無語意的類（class），比如 .float-left。
混入(mixin)還可以包含所有的CSS規則，以及任何其他在Sass
文檔中被允許使用的東西。他們甚至可以帶arguments，引入變
量，只需少量的混入(mixin)代碼就能輸出多樣化的樣式。
*/
/*1、定義一個混入(mixin):@mixin*/
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
/*2、引入混合樣式：@include*/
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
/*
混入（mixin）也可以包含在任何規則的外（即，在文檔的根）,
只要它們不直接定義的任何屬性或使用任何父選擇器引用
*/
@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
/*帶參數*/
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

下面是一個按鈕樣式制作例子：

.button-narmol{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    cursor:pointer;
    &:after{
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 10px;
    }
}
@mixin button-style-block($select,$color,$darken){
    #{$select}{
        display: block;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 16px;
        line-height: 2.55555556;
        background-color: darken($color,$darken);
        @extend .button-narmol;
        &:active{
            background-color: darken($color,$darken+10%);
        }
    }
}
@mixin button-style-inline-block($select,$color,$darken){
    #{$select}{
        background-color: darken($color,$darken);
        display: inline-block;
        padding: 0 1.32em;
        line-height: 2.3;
        font-size: 13px;
        @extend .button-narmol;
        &:active{
            background-color: darken($color,$darken+10%);
        }
    }
}
@include button-style-block(".krui-btn_primary",#1AAD19,10%);
@include button-style-block(".krui-btn_error",#E64340,0%);
@include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);

只要在html中調用即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
    <link rel="stylesheet" href="css/button.css">
    <style type="text/css">
        span{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <span class="krui-btn_primary">登錄</span>
    <span class="krui-btn_primary-small">登錄</span>
    <span class="krui-btn_primary-small">登錄</span>
    <span class="krui-btn_primary-small">登錄</span>
    <span class="krui-btn_primary-small">登錄</span>
    <span class="krui-btn_error">登錄</span>
    <span class="krui-btn_primary">登錄</span>
    <span class="krui-btn_primary">登錄</span>
</body>
</html>