什麼是css預處理器

CSS 預處理器是一個能讓你通過預處理器自己的文法生成CSS的工具。預處理器有許多：

1.Sass（SCSS）

2.LESS

3.Stylus

4.Turbine

5.Swithch CSS

6.CSS Cacheer

7.DT CSS

...

什麼是sass？

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. --sass官網

sass基于ruby

Sass 和 SCSS 有什麼差別？

1.Sass 和 SCSS 是同一種東西，都稱之為 Sass。

2.檔案擴充名不同，分别以.sass和.scss字尾為擴充名。

3.書寫 Sass 不帶有大括号和分号，依靠嚴格的縮進方式來控制。

4.SCSS 的文法書寫和我們的 CSS 文法書寫無差别,直接把.css改成.scss或者.scs改成.scss都沒問題。

代碼對比

sass

$my-color: #666 //定義變量
$my-heihgt: 100%
body
  color: $my-color
  height: $my-height

scss

$my-color: #666; //定義變量
$my-heihgt: 100%;
body {
  color: $my-color;
  height: $my-height;
}

他們編譯出來的css

css

body {
    color: #666;
    height: 100%;
}

後面的内容我們使用scss編寫

安裝

1.ruby官網下載下傳安裝包安裝

下載下傳位址:

http://www.ruby-lang.org/zh_cn/downloads/

編譯

使用sass開發，并不是直接引入.scss檔案，引入的.css檔案，Sass 隻不過是作為一個預處理工具，通過編譯生成對應的css内容。

編譯方法：

指令編譯 sass --watch <要編譯的Sass檔案路徑> : <要輸出CSS檔案路徑>
GUI工具編譯
自動化編譯

資料類型

數字: 如，1、 2、 13、 10px；
字元串：有引号字元串或無引号字元串，如，"foo"、 'bar'、 baz；
顔色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布爾型：如，true、 false；
空值：如，null；
值清單：用空格或者逗号分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

注釋

// 這是注釋--我不會出現在生成的css中
/* 這是注釋--我會出現在生成的css中 */

變量

使用

聲明變量

普通變量

定義之後在全局範圍内有效。

scss

$my-color: #666; //定義變量
$my-heihgt: 100%;
body {
  color: $my-color;
  height: $my-height;
}

預設變量

sass 的預設變量需要在值後面加上

!default

。

預設變量一般是用來設定預設值，然後根據需求來覆寫，隻需要在預設變量之前重新聲明下變量即可覆預設變量。

scss

$my-color: #666!default;
body {
  color: $my-color;
}

編譯出來的css

css

body {
  color: #666;
}

局部變量和全局變量

全局變量 --定義在元素外面的變量
局部變量 --定義在元素内部的變量
局部變量隻會在局部範圍内覆寫全局變量

示例

scss

$my-color: #666!default; //全局變量
body {
  $my-color: #000; //局部變量
  color: $my-color;
}

css

body {
  color: #000;
}

嵌套

選擇器嵌套

Sass允許CSS規則彼此嵌套。然後内部規則僅适用于外部規則的選擇器。

scss

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
}

css

#main {
    width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
    font-weight: bold; 
}

使用 & 引用父選擇器

scss

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

css

#main {
    color: black; 
}
#main-sidebar {
    border: 1px solid; 
}

提示：僞類嵌套，&，你應該懂了吧。

屬性嵌套

scss

.funky {
  font: {
    size: 30em;
    weight: bold;
  }
}

css

.funky {
  font-size: 30em;
  font-weight: bold;
}

混合宏（mixin）

mixins

定義可以在整個樣式表中重複使用的樣式。

定義混合宏

通過@mixin來定義一個mixin

通過@include來引用

scss

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

css

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

傳遞參數

scss

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

編譯後的css

css

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

Mixins還可以使用正常變量設定文法為其參數指定預設值。

scss

@mixin sexy-border($color:#666, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

有一個特别的參數...

scss

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

css

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

繼承

通過

@extend

實作繼承。

scss

.outer {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
}

.wrap-first {
  background-color: #f36;
  @extend .outer;
}

.wrap1-second {
  background-color: orange;
  @extend .outer;
}

css

.outer,.wrap-first,.wrap1-second {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
}
.wrap-first {
  background-color: #f36;
}

.wrap1-second {
  background-color: orange;
}

不僅實作了繼承，而且非常智能的合并了。

占位符 placeholder

%placeholder

聲明的代碼，如果不被 @extend 調用的話，不會産生任何代碼。

scss

 %outer { //如果不被@extend繼承  不會在編譯後産生任意的代碼。
  margin: 0 auto;
}

插值

#{}

插值文法在選擇器和屬性名稱中使用變量。

scss

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

編譯為：

css

p.foo {
  border-color: blue; 
}

運算

加法

直接上例子

scss

.outer {
  width: 20px + 8in;
}
/* 
    in是英寸。8in即8英寸。
    1英寸約=2.54厘米,1英寸大約是96像素
    width:20px+8in;
    8in=8*96px = 768px
    即width=20px + 768px = 788px;
 */

編譯出的css

css

.outer {
  width: 788px;
}

如果是不同機關會報錯

比如px + em 報錯

減法規則同加法

乘法

10px * 2正确寫成10px * 2px報錯

除法

但是/運算符css中本來就有，是以要這樣寫：

scss

.outer {
  width: (200px / 4);
}

編譯出的css：

css

.outer {
  width: 50px;
}

如果使用了函數不用()括起來，也被認作除法運算，例如 width: round(1.5)/2 ;
如果使用了加法或減法，也被認作除法運算，例如 width: 5px + 8px/2px;
注意還有一種情況：如果兩個值帶有相同的機關值時，除法運算之後會得到一個不帶機關的數值。在乘法中這麼做會報錯。

變量也是可以運算的

顔色運算

scss

.container {
  color: #112233 + #112233; //編譯後的css中的結果是#224466
}

字元串運算

"Hello" + "" + "World!" 結果為 "Hello World"
"Hello" + "" + World! 結果為 "Hello World"
Hello + "" + World! 結果為 Hello World
font + -size 結果為font-size

CSS-Sass