SASS使用總結_ZenDei技術網路在線

運算 sass可進行簡單的加減乘除運算等所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。如上代碼，定義了兩個占位選擇器%ir和%clearfix，其中%clearfix這個沒有調用，所以解析出來的css樣式也就沒有clearfix部分。占位選

簡單用法： 變數 sass中可以定義變數，方便統一修改和維護。

//sass style
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
     font-family: $fontStack;
     color: $primaryColor;
}
//css style
 body {
     font-family: Helvetica,
     sans-serif; color: #333;
}

嵌套 sass可以進行選擇器的嵌套，表示層級關係，看起來很優雅整齊。

//sass style
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
//css style
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav li {
  display: inline-block;
}
 
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

導入 sass中如導入其他sass文件，最後編譯為一個css文件，優於純css的@import mixin sass中可用mixin定義一些代碼片段，且可傳參數，方便日後根據需求調用。從此處理css3的首碼相容輕鬆便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}
//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

擴展/繼承 sass可通過@extend來實現代碼組合聲明，使代碼更加優越簡潔。

//sass style
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
 
.warning {
  @extend .message;
  border-color: yellow;
}
//css style
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

顏色 sass中集成了大量的顏色函數，讓變換顏色更加簡單。

//sass style
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}
//css style
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

運算

sass可進行簡單的加減乘除運算等

//sass style
.container { width: 100%; }
 
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
 
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
//css style
.container {
  width: 100%;
}
 
article[role="main"] {
  float: left;
  width: 62.5%;
}
 
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

基本語法： 文件尾碼名: .sass(不使用大括弧和分號)或者.scss(使用大括弧和分號) 導入: ass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss文件合併進來只生成一個CSS文件。但是如果你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。所有的sass導入文件都可以忽略尾碼名.scss。一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import "mixin"。註釋： sass有兩種註釋方式，一種是標準的css註釋方式/* */，另一種則是//雙斜桿形式的單行註釋，不過這種單行註釋不會被轉譯出來。變數： sass的變數必須是$開頭，後面緊跟變數名，而變數值和變數名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣），如果值後面加上!default則表示預設值。 sass的預設變數一般是用來設置預設值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在預設變數之前重新聲明下變數即可。

//sass style
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight;
}
//css style
body{
    line-height:2;
}

特殊變數：一般我們定義的變數都為屬性值，可直接使用，但是如果變數作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

//sass style
$borderDirection:       top !default;
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值變數：分為list類型和map類型，簡單來說list類型類似js中的數組，map類型類似於js中的對象 list: 數據可通過空格，逗號或小括弧分隔多個值，可用nth($var,$index)取值。

//list定義
//一維數據
$px: 5px 10px 20px 30px;
//二維數據，相當於js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
//使用
//sass style
$linkColor: #08c #333 !default;//第一個值為預設值，第二個滑鼠滑過值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}
//css style
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map: map數據以key和value成對出現，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值, 關於map數據還有很多其他函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css style
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

全局變數：在變數值後面加上!global 變數機制：在選擇器聲明的變數會覆蓋外面全局聲明的變數

//sass style
$fontSize:      12px;
body{
    $fontSize: 14px;        
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}
//css style
body{
    font-size:14px;
}
p{
    font-size:14px;
}

啟用global之後的機制：預設在選擇器裡面的變數為局部變數，而只有設置了!global之後才會成為全局變數。嵌套Nesting: sass的嵌套包括兩種：一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說起或用到的都是選擇器的嵌套。選擇器嵌套：

所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。

在選擇器嵌套中，可以使用&表示父元素選擇器

//sass style
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
 
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;
 
    &:hover{
      color:#ddd;
    }
  }
}
//css style
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
 
} 
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

屬性嵌套：所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

//sass style
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}
//css style
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc;
}

@at-root: sass3.3.0中新增的功能，用來跳出選擇器嵌套的。預設所有的嵌套，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

//sass style
//沒有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}
//單個選擇器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}
//多個選擇器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}
//css style
.parent-1 {
  color: #f00;
} .parent-1 .child {
  width: 100px;
}
.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}
.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root (without: ...)和@at-root (with: ...)：預設@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示所有），rule（表示常規css），media（表示media），support（表示support，因為@support目前還無法廣泛使用，所以在此不表）。我們預設的@at-root其實就是@at-root (without:rule)。

//sass style
//跳出父級元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}
 
//跳出media嵌套，父級有效
@media print {
  .parent2{
    color:#f00;
 
    @at-root (without: media) {
      .child2 {
        width:200px;
      }
    }
  }
}
 
//跳出media和父級
@media print {
  .parent3{
    color:#f00;
    @at-root (without: all) {
      .child3 {
        width:200px;
      }
    }
  }
}
 
//css style
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}
 
@media print {
  .parent2 {
    color: #f00;
  }
}
.parent2 .child2 {
  width: 200px;
}
 
@media print {
  .parent3 {
    color: #f00;
  }
}
.child3 {
  width: 200px;
}
@at-root與&配合使用：
//sass style
.child{
    @at-root .parent &{
        color:#f00;
    }
}
 
//css style
.parent .child {
  color: #f00;
}

應用於@keyframe:

//sass style
.demo {
    ...
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
          ...
        }
    }
}
 
//css style
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

混合(mixin) sass中使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設置預設值。聲明的@mixin通過@include來調用。無參數mixin:

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

有參數mixin:

//sass style
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
//css style
.opacity{
  @include opacity; //參數使用預設值
}
.opacity-80{
  @include opacity(80); //傳遞參數
}

多個參數的mixin: 調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，後面不足的使用預設值，如不足的沒有預設值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入。

//sass style
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding; 
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}
//css style
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

多組值參數mixin: 如果一個參數可以有多組值，如box-shadow、transition等，那麼參數則需要在變數後加三個點表示，如$variables...。

//sass style
//box-shadow可以有多組值，所以在變數參數後面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

@content: @content在sass3.2.0中引入，可以用來解決css3的@media等帶來的問題。它可以使@mixin接受一整塊樣式，接受的樣式從@content開始。

//sass style
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
@include max-screen(480px) {
  body { color: red }
}
 
//css style
@media only screen and (max-width: 480px) {
  body { color: red }
}

PS：@mixin通過@include調用後解析出來的樣式是以拷貝形式存在的，而下麵的繼承則是以聯合聲明的方式存在的，所以從3.2.0版本以後，建議傳遞參數的用@mixin，而非傳遞參數類的使用下麵的繼承%。繼承： sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟需要繼承的選擇器

//sass style
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}
 
//css style
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

占位選擇器%：從sass 3.2.0以後就可以定義占位選擇器%。這種選擇器的優勢在於：如果不調用則不會有任何多餘的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然後實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以%標識定義，通過@extend調用。

//sass style
%ir{
  color: transparent;
  text-shadow: none;
 
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}
//css style
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
 
  border: 0;
}
#header h1{
  width:300px;
}

如上代碼，定義了兩個占位選擇器%ir和%clearfix，其中%clearfix這個沒有調用，所以解析出來的css樣式也就沒有clearfix部分。占位選擇器的出現，使css文件更加簡練可控，沒有多餘。所以可以用其定義一些基礎的樣式文件，然後根據需要調用產生相應的css。

ps：在@media中暫時不能@extend @media外的代碼片段，以後將會可以。函數： sass定義了很多函數可供使用，當然你也可以自己定義函數，以@fuction開始，實際項目中我們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深為最，其調用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個參數都是顏色值，第二個參數都是百分比。

//sass style
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;       
 
// pixels to rems
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
 
body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}
 
//css style
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

運算： sass具有運算的特性，可以對數值型的Value(如：數字、顏色、變數等)進行加減乘除四則運算。請註意運算符前後請留一個空格，不然會出錯。

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;
 
//grid
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

條件判斷及迴圈： @if 可以一個條件單獨使用，也可以和@else結合多條件使用

//sass style
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
 
//css style
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green;
}

三目判斷：語法為：if($condition, $if_true, $if_false) 。三個參數分別表示：條件，條件為真的值，條件為假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

for迴圈：
for迴圈有兩種形式，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變數，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

//sass style
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

//css style
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}

@each迴圈：語法為：@each $var in <list or map>。其中$var表示變數，而list和map表示list類型數據和map類型數據。sass 3.3.0新加入了多欄位迴圈和map數據迴圈。單個欄位list數據迴圈：

//sass style
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
 
//css style
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

多個欄位list數據迴圈：

//sass style
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
 
//css style
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move;
}

多個欄位map數據迴圈：

//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
 
//css style
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

sass編譯: 命令行編譯： 單文件轉換：sass style.scss style.css 單文件監聽：sass --watch style.scss style.css 文件夾監聽：sass --watch sassFileDir:cssFileDir css文件轉換成sass/scss文件： sass-convert style.css style.sass sass-convert style.css style.scss 配置項： 運行命令行幫助文檔，可以獲得所有的配置選項： sass -h 一般常用的有--style，--sourcemap，--debug-info等： sass --watch style.scss:style.css --style compact sass --watch style.scss:style.css --sourcemap sass --watch style.scss:style.css --style expanded --sourcemap sass --watch style.scss:style.css --debug-info - --style表示解析後的css是什麼格式，有四種取值分別為：nested，expanded，compact，compressed。

// nested
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
 
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }
 
// expanded
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
 
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}
 
// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
 
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
 
// compressed
#main{color:#fff;font-weight:bold;text-decoration:underline}

- --sourcemap表示開啟sourcemap調試。開啟sourcemap調試後，會生成一個尾碼名為.css.map文件。 - --debug-info表示開啟debug信息圖形化工具gui koala sass調試: sass調試需要開啟編譯時輸出調試信息和瀏覽器調試功能，兩者缺一不可。 開啟編譯調試信息： 目前sass的調試分為兩種，一種為開啟debug-info，一種為開啟sourcemap（這個將成為主流）。如開啟的是debug-info，則解析的css文件中會有以@media -sass-debug-info開頭的代碼，如沒有則表明沒有開啟。如開啟的是sourcemap，則在解析的css文件同目錄下生成一個.css.map的尾碼名文件。命令行開啟調試： sass --watch style.scss:style.css --debug-info sass --watch style.scss:style.css --sourcemap koala開啟：如下圖：點擊相應的文件，然後就會出現右邊的編譯選項，即可選擇是否開啟source map，debug info 開啟瀏覽器調試： 谷歌瀏覽器調試：

F12打開調試面板，點擊調試面板右上角的齒輪圖標打開設置，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

open chrome css source map

開啟--sourcemap編譯，f12打開調試面板，就可以看到原先右邊的css文件變成了我們現在的scss文件

chrome scss

點擊scss文件，會跳到source裡面的scss源文件，現在可以在裡面進行修改，修改完成後可以右鍵選擇save或save as命令，然後替換我們本地的scss源文件，刷新chrome就可以看到變化（註意，解析樣式需要一定時間）。以後只要ctrl+s保存修改就可以在瀏覽器中看到修改效果了。

chrome scss source

火狐瀏覽器調試

debug-info調試

firefox可以安裝插件FireSass使用debug-info來調試。

開啟--debug-info編譯，f12打開firebug，就可以看到原先右邊的css文件變成了我們現在的scss文件

firefox debug

sourcemap調試

firefox 29 將會開始支持sourcemap，註意是火狐自帶的調試功能，而不是firebug。開啟--sourcemap編譯，右鍵“查看元素”採用火狐自帶的調試功能，打開調試面板，在樣式上右鍵選擇“顯示原始來源”。

點擊scss文件，這樣就跳到了scss文件。如下圖：

firefox sourcemap

然後就可以進行我們的修改了，修改之後點擊保存或者'ctrl+s'彈出我們要保存到哪裡，同谷歌一樣直接覆蓋到我們本地的源文件就ok了。

sass庫： 1.sassCore sassCore分核心文件和擴展文件兩種。其中核心文件提供一些基礎的樣式和@mixin，%等方便調用；而擴展文件則提供一些模塊的樣式，如form，table等核心文件調用： 1.除了提供基礎功能外，會產生reset樣式 @import "d:/sassCore/base" 2.不產生任何樣式，只提供功能的調用 @import “d:/sassCore/function” 擴展文件調用：按需調用： @import "d:/sassCore/ext/table" 註：因為sass不能導入線上sass文件，而sassCore也沒有提供安裝版的使用，所以預設統一放在D盤進行調用特點： 1.sassCore涵蓋範圍廣。核心文件有setting，css3，media-queries，mixin，grid，reset；擴展文件有animate，font-face，btn，message，form，table，helps，typography；除此之外還有兩個集合文件function和base。 2.sassCore對相容採用了開關控制機制。如對是否支持ie6/7可以通過設置為true或false以生成對應的代碼。 3.sassCore嚴格控制樣式冗餘累贅。使用開關變數做到需要什麼樣式就載入什麼樣式，按需開啟，避免樣式冗餘累贅。 4.sassCore設計了兩種調用方式，一種是只調用功能，不產生任何多餘的css代碼；另一種是包含了些重置樣式。為團隊的合作開發提供了良好的解決方案。 5.- sassCore借鑒優秀的作品，根據實戰創造新的方法，緊跟前沿，每一個文件都是經過深思熟慮，幾易其稿，在實用和卓越上狠下功夫。命名規則：變數以及@function採用駝峰式寫法@mixin %採用中劃線文件簡述： sassCore包括兩個集合文件（base，function）和兩個文件夾（core，ext）。其中core文件夾中為核心基礎文件，包括setting，css3，media-queries，mixin，grid，reset；而ext文件夾中是一些擴展文件，包括animate，font-face，btn，message，form，table，typography，helper。兩個集合文件（base，function）導入的都是core中的文件，區別在於base除了提供基本功能之外還會生成一份reset樣式，而function則只提供基本功能。至於ext中的文件則屬於額外的一些模塊擴展，可根據需求導入。 core文件 setting 負責基礎變數的文件，如常用的顏色，字體等變數。 css3 負責css3屬性首碼的文件。 media-queries 負責響應式寬度判斷的文件。主要是對響應式佈局的一些寬度判斷，來自paranoida的sass-mediaqueries。 mixin 負責功能方面的文件。這裡大概分成三個部分，一個是混合部分即mixin，一個是placeholder選擇器部分即%，最後就是我們的function函數部分。我們常用的include及extend當然就是來自於這裡了。 grid 負責網格系統的文件。預設為固定寬度佈局（1000px），可以通過設置$gridPercentSwitch為true來切換為流體佈局，也可以通過設置$gridSpanSwitch為true或false來控制是否輸出各個網格的class。 reset 在normalize的基礎上，根據目前我們大家的使用習慣進行了一些歸零行動，及設置文字字體顏色，是否輸出列印樣式。 ext文件 animate 將animate.css轉成scss版本，預設不輸出任何樣式，需要什麼動畫先導入對應的動畫文件，然後include調用即可。 font-face 來自Font Awesome的字體圖標，可以根據自己的需求使用其他字體圖標，預設不輸出任何class，可根據實際需求輸出其中的某些icon。參考了大漠的font-awesome模塊 btn 為按鈕設計的文件，裡面定義了一系列mixin，可用於自定義按鈕，預設生成兩種按鈕 message 交互提示信息，包括警告，錯誤，成功，提示四種狀態的樣式 form 提供了表單元素樣式及幾種常見的表單組合樣式，可通過變數控制輸出 table 提供幾種常用的表格樣式，可通過變數來控制輸出 helper 常用的幾個class，可以根據自己的喜好定義。 typography 負責文字排版的文件。這裡主要考慮到文章詳細頁和其他頁面的一些不同情況而給詳細頁加入了article這個class，裡面的一些元素如ul，li，p給予一定的樣式，而不是清零。 2.compass 3.bourbon