CSS-再不學習sass你就被淘汰了！
什麽是css預處理器
?? CSS 預處理器是一個能讓你通過預處理器自己的語法生成CSS的工具。
- CSS 預處理器技術已經非常的成熟。
預處理器有許多
1.Sass（SCSS）
2.LESS
3.Stylus
4.Turbine
5.Swithch CSS
6.CSS Cacheer
7.DT CSS
...
這裏來學習sass。什麽是sass？
??Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. --sass官網
sass基於rubySass 和 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-heightscss $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編譯
??使用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中 */聲明變量和調用變量
??使用$ 聲明變量
普通變量
??定義之後在全局範圍內有效。
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
css
body {
color: #000;
}sass嵌套
選擇器嵌套
??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）
??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;
}繼承
??通過@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
??%placeholder是一個極好的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %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報錯
除法
- 如果是不同單位會報錯
- 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
??希望你對sass能有初步認識，後續我會寫一篇關於compass的文章
如有錯誤，敬請批評指正！
完~~
CSS-再不學習sass你就被淘汰了！