CSS-再不學習sass你就被淘汰了！
什麼是css前處理器
:bookmark: CSS 前處理器是一個能讓你通過前處理器自己的語法生成CSS的工具。
- CSS 前處理器技術已經非常的成熟。
-
前處理器有許多
1.Sass（SCSS）
2.LESS
3.Stylus
4.Turbine
5.Swithch CSS
6.CSS Cacheer
7.DT CSS
...
這裡來學習sass。
什麼是sass？
:bookmark:Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. --sass官網
sass基於ruby
Sass 和 SCSS 有什麼區別？
相同點：Sass 和 SCSS 是同一種東西，都稱之為 Sass。
不同點：
1.副檔名不同，分別以.sass和.scss字尾為副檔名。
2.書寫 Sass 不帶有大括號和分號，依靠嚴格的縮排方式來控制。
3.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編譯
:bookmark:使用sass開發，並不是直接引入.scss檔案，引入的.css檔案，Sass 只不過是作為一個預處理工具，通過編譯生成對應的css內容。
編譯方法：
- 命令編譯
- GUI工具編譯
-
自動化編譯
通過命令編譯
sass --watch
<要編譯的Sass檔案路徑>/style.scss:<要輸出CSS檔案路徑>/style.css
示例資料型別
- 數字: 如，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。
Sass註釋
1、// 這是註釋--我不會出現在生成的css中
2、/* 這是註釋--我會出現在生成的css中 */
宣告變數和呼叫變數
:bookmark:使用$ 宣告變數
普通變數
:bookmark:定義之後在全域性範圍內有效。
scss
$my-color: #666; //定義變數
$my-heihgt: 100%;
body {
color: $my-color;
height: $my-height;
}
預設變數
:bookmark: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
css
body {
color: #000;
}
sass巢狀
選擇器巢狀
:bookmark:Sass允許CSS規則彼此巢狀。然後內部規則僅適用於外部規則的選擇器。
scss
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
}
編譯出來的css
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
css
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
提示：偽類巢狀，&，你應該懂了吧。
屬性巢狀
scss
.funky {
font: {
size: 30em;
weight: bold;
}
}
編譯出來的css
css
.funky {
font-size: 30em;
font-weight: bold;
}
混合巨集（mixin）
:bookmark: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
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
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;
}
繼承
:bookmark:通過@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
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
:bookmark:%placeholder是一個極好的功能。他可以取代以前 CSS 中的基類造成的程式碼冗餘的情形。因為 %placeholder 宣告的程式碼，如果不被 @extend 呼叫的話，不會產生任何程式碼。
scss
%outer { //如果不被@extend繼承不會在編譯後產生任意的程式碼。
margin: 0 auto;
}
插值
:bookmark:使用#{}插值語法在選擇器和屬性名稱中使用變數,
這個東西非常厲害，有興趣的去探索吧。
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報錯
除法
- 如果是不同單位會報錯
- 10px * 2正確 寫成10px * 2px報錯
- 但是/運算子css中本來就有，所以要這樣寫：
scss
.outer {
width: (200px / 4);
}
編譯出的css：
css
.outer {
width: 50px;
}
-
如果使用了函式不用()括起來，也被認作除法運算，例如
width: round(1.5)/2; -
如果使用了加法或減法，也被認作除法運算，例如
width: 5px + 8px/2px;; -
注意還有一種情況： 如果兩個值帶有相同的單位值時，除法運算之後會得到一個不帶單位的數值。在乘法中這麼做會報錯。
:bell: 變數也是可以運算的
顏色運算
scss
.container {
color: #112233 + #112233; //編譯後的css中的結果是#224466
}
字串運算
- "Hello" + "" + "World!" 結果為 "Hello World"
- "Hello" + "" + World! 結果為 "Hello World"
- Hello + "" + World! 結果為 Hello World
- font + -size 結果為font-size
:bell:希望你對sass能有初步認識，後續我會寫一篇關於compass的文章
如有錯誤，敬請批評指正！
完~~