scss基礎知識整理
scss的環境搭建
這里使用koala，避免分部下載ruby什么的,到koala的官網下載軟件即可。
Koala的使用——打開項目
打開軟件的首界面如下圖所示：
方法一：
點擊左上角的加號選擇項目所在的文件夾即可，koala會自動導入文件夾中的相關文件，在頁面下方 可以選擇文件類型的過濾，如styles,scripts等，當項目中文件有增加或者減少時，需要點擊界面 上方的refresh按鈕進行刷新。
方法二：
直接選中項目文件夾拖拽到首界面即可。
Koala的使用——scss的相關設置
有關scss的基本設置：
點擊首界面左上角的齒輪符號可以打開設置界面，頁面如上圖所示。在基本設置中點擊sass，在輸出 中可以選擇scss的輸出方式，輸出方式有四種，具體區別待會會說明。
設置scss編譯后的輸出路徑：
在首頁面中右邊的欄目中選中需要編譯的scss文件，點擊鼠標右鍵，在彈出的菜單中選中設置輸出路徑， 如下圖所示。在設置輸出文件名時，需要加上.css后綴。
scss的四種輸出模式
現在以下面的scss代碼為例：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
嵌套輸出方式nested
輸出的css格式如下：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
展開輸出方式expanded
輸出的css格式如下：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
緊湊輸出方式compact
輸出的css格式如下：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
壓縮輸出方式compressed
輸出的css格式如下：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
scss的基本語法
變量
變量使用“$”符號聲明，! default表明這是默認變量，在花括號中定義的是局部變量，在花括號外 中定義的是全局變量，在默認變量前進行重復定義同名變量可以覆蓋默認變量。
$width: 300px; /*變量的聲明*/
$height: 100px; /*全局變量*/
$color: blue;
$baseFontSize: 20px !default; /*默認值*/
$baseLineHeight: 24px; /*覆蓋默認值*/
$baseLineHeight: 12px !default;
.demo{
width: $width;
height: $height;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $color;
$color: red; /*局部變量*/
a{
color: $color;
}
}
數據類型
/*數值類型（帶單位也是數值型）*/
$number1: 10;
$number2: 10px;
$number3: 1em;
/*字符串類型*/
$string1: "string";
$string2: string;
/*顏色類型*/
$color1: blue;
$color2: #fff;
$color3: rgba(0,0,0,.5);
/*布爾類型*/
$bool1: true;
$bool2: false;
/*空值類型*/
$null1: null;
/*值列表類型*/
$list: Helvetica, Arial, sans-serif;
$properties: (margin, padding);
/*map類型*/
$map: (
primary: (
bgcolor: red,
text-color: blue
),
defalut: (
bgcolor: green,
text-color: yellow
)
)
嵌套
嵌套包括選擇器嵌套，屬性嵌套，偽類嵌套。“&”符號用於獲取父元素
nav{
/*簡單的選擇器嵌套*/
a{
color: red;
}
/*引用父元素的選擇器嵌套*/
header &{
color: blue;
}
/*屬性嵌套*/
border: {
top: 1px solid red;
bottom: 1px solid green;
}
/*偽類嵌套*/
&:before {
content: "";
}
}
注釋
scss中注釋包括//和/**/兩種，第一種在輸出的css文件中不保留，第二種會保留，不過樣式表中的注釋可能位置為變亂。如下：
原來的scss中的注釋
//這里的注釋不會被保留，下面的注釋會保留不過位置會改變
$width: 300px; /*變量的聲明*/
$height: 100px; /*全局變量*/
.size{
width: $width;
height: $height;
}
編譯后的css中的注釋
/*變量的聲明*/
/*全局變量*/
.size {
width: 300px;
height: 100px;
}
基本運算
運算包括四則運算，顏色運算和字符串的加法運算。
一些規則說在前面
下面的可換算單位是指一些絕對單位，如px,in,cm,mm等；不可換算單位是一些相對單位，如em,rem等
帶單位的運算之后的單位如果能被識別就能運算，不能被識別就不能運算。如1px+2in，因為換算成px，可以被識別，能夠運算；又如2px*3px，單位變成px的平方不能被識別，不能運算。
加減法
操作數單位不同時，都是可換算單位可以進行加減計算，但是含有相對單位不能進行計算。
$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 20px;
/**
加法
不同的絕對單位可以進行計算，因為單位可以換算。不同的相對單位不能進行計算。
*/
.container{
width: $sidebar-width+$content-width+$gap-width;
height: 20px + 8in + 1cm + 1pt + 1pc - 1mm;
margin-left: 1 + 1em;
margin: 0 auto;
}
乘法
/**
乘法
乘法只能帶一個單位，因為兩個單位相乘就變成了不能識別的單位，如px * px = (px)2
*/
.box{
width: 10px * 2;
}
除法
除法的特別地方在於“/”符號在css中有特定的含義，所以在使用時要告訴編譯器這是除法運算。
/**
除法
由於“/”符號在css中已作為一種符號使用，所以要讓編譯器知道是數學表達式才會運行除法。
除法可以帶單位（可換算單位）
*/
$margin: 20px;
.divide{
width: (100px / 2); /*加上括號告訴編譯器這是運算*/
height: 100px / 2 + 3px; /*加上加或減法告訴編譯器這是運算*/
margin: $margin / 2; /*變量告訴編譯器這是運算*/
padding: (100px / 20cm);
}
顏色運算
顏色的運算規則：
顏色運算符號四則運算規則。
十六進制的運算是對應位進行運算，如#112233 + #112233 = #224466
rgba運算是rgba()函數的對應參數進行運算
運算極限：顏色最小只能是#000編譯成black，最大只能是#fff編譯成white；透明度最小只能是0，最大只能是1
.color{
color: #e89 + #e3f;
background: #ccc * 2;
}
字符串運算
加法就是進行字符串的拼接，如下面代碼編譯后content變為"Hello sass!"
/*字符串運算*/
.string{
content: "Hello" + " sass!";
}
語句
語句包括判斷語句和循環語句，語句一般用在混合宏中。
判斷語句@if
@mixin blockOrHidden($boolean:true) {
@if $boolean {
display: block;
}
@else {
display: none;
}
}
循環語句@for
循環語句@for有兩種方式：
一：@for $i from (start) through (end)
二：@for $i from (start) to (end)
$i表示變量；(start)表示起始值；(end)表示結束值
through包括(end)，to不包括(end)
/*through方式*/
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
/*to方式*/
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
循環語句@while
下面使用的#{$type}為插值，作用是進行替換
$types: 4;
$type-width: 20px;
/**/
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
變量語句@each
@each語句可以遍歷列表和數組
scss文件：
/**********混合宏聲明*******/
@mixin list{
$list: a b c;
/*遍歷列表*/
@each $item in $list{
.item-#{$item}{
content: $item;
}
}
}
@mixin arr{
$arr: (d,e,f);
/*遍歷數組*/
@each $i in $arr{
.i-#{$i}{
content: $i;
}
}
}
/*****混合宏調用*****/
@include list;
@include arr;
編譯后的css文件：
/*遍歷列表*/
.item-a {
content: a;
}
.item-b {
content: b;
}
.item-c {
content: c;
}
/*遍歷數組*/
.i-d {
content: d;
}
.i-e {
content: e;
}
.i-f {
content: f;
}
插值和混合宏
插值——#{}
插值就是替換值得意思，如#{$i}就是這里用$i替換的意思。
混合宏調用時不能使用插值，不過繼承可以。
$properties: (margin, padding); /*屬性集*/
$data: 1;
/*************混合宏中的插值*****************/
/*屬性使用插值替換*/
@mixin set-value($side, $value){
/*遍歷屬性*/
@each $prop in $properties{
#{$prop}-#{$side}: #{$data};
}
}
/*類名使用插值替換*/
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
/*繼承使用插值替換*/
%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
//不過混合宏的調用不能使用插值
/*************混合宏的調用*******************/
.login-box{
@include set-value(top, 14px);
}
@include generate-sizes("header-text", 12px, 20px, 40px);
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}
.footer{
@extend .#{selected}-status; //#{}里面可以是變量，字符串（不寫引號也行）
}
混合宏
混合宏就像javascript中的自定義函數一樣，它可以被調用，可以帶參數，它用於代碼的復用。
這里特別說一下variable...這種寫法是指該變量含有多個值得意思，如果除了這個變量還有其它變量參數的話，必須把這個變量 寫在最右邊，且這種參數一個混合宏最多只能有一個。
/*************混合宏的聲明******************/
/*不帶參的宏*/
@mixin border-radius{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
/*帶參的宏*/
@mixin border-radius($radius: 5px){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
/*帶多個參數的宏*/
@mixin box-shadow($color,$shadows...){
color: $color;
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}
/**************混合宏的調用******************/
/*不帶參的宏*/
.demo1{
@include border-radius;
}
/*帶參的宏*/
.demo2{
@include border-radius(3px);
}
/*帶多個參數的宏*/
.demo3{
@include box-shadow(red,.0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2))
}
占位符——%
占位符通過繼承指令@extend調用
占位符不像普通的形式會被編譯后的的css文件保留
編譯前：
/*占位符不保留*/
%bubaoliu {
color: red;
}
/*普通的類形式會保留*/
.baoliu{
background: red;
}
.required{
@extend %bubaoliu;
@extend .baoliu;
}
編譯后：
/*占位符不保留*/
.required {
color: red;
}
/*普通的類形式會保留*/
.baoliu, .required {
background: red;
}
@規則指令
@import
@import是導入文件的指令，如果沒有指明文件后綴，默認導入.scss或.sass文件
如果出現以下四種情況，則會編譯成css的@import指令
擴展名是.css，文件名以http://開頭，文件名是url()，指令中包含媒體查詢如：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@media
@media是媒體查詢指令，編譯時它始終冒泡到外面，且可嵌套
編譯前：
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
編譯后：
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@extend
@extend是繼承指令，它用於擴展選擇器或者占位符，而且它會把同時調用同一個選擇器或者站位符的選擇器樣式合並
/*繼承會將選擇器合並*/
.btn {
border: 1px solid #ccc;
}
.btn-danger {
background: red;
@extend .btn;
}
.btn-info {
background: blue;
@extend .btn;
}
@at-root
@at-root是把自己變成根選擇器的指令。
編譯前：
.demo {
animation: motion 3s infinite;
@at-root {
@keyframes motion {
0%{
color: map-get($colors, red);
}
100%{
color: map-get($colors, red);
}
}
}
}
編譯后：
.demo {
animation: motion 3s infinite;
}
@keyframes motion {
0%{
color: map-get($colors, red);
}
100%{
color: map-get($colors, red);
}
}
@deug
@debug指令用於調試，如果代碼出錯會在控制台輸出提示
@error
@error指令用於輸出自定義錯誤信息，是自定義異常
@warn
@warn指令用於輸出警告信息
scss內置的功能函數
字符串函數
unqote($string)和quote($string)函數
這兩個函數用於添加引號和刪除引號，需要注意的是:
quote()只能增加雙引號，如果字符串本身有引號，編譯后都為雙引號；如果字符串中間有引號或者空格，則會報錯。
unqote()只能刪除字符串兩邊的引號，而不能刪除中間的引號；如果字符串本身沒有引號，則返回字符串本身。
to-upper-case()和to-lower-case()函數
這兩個函數用於字符串的大小寫轉換
數字函數
數字函數包括percentage(),round(),ceil(),floor(),abs(),min(),max(),random()
這些函數的功能和javascript中沒有區別，不過需要跟前面說的運算一樣，注意運算后單位的合法性。
列表函數
$list: 10px, 20px, 30px;
/*length($list)函數獲取列表的長度*/
@for $i from 1 through length($list){
.box-#{$i}{
/*nth($list,$index)獲取對應位置的列表的值，位置的標號從1開始*/
width: nth($list,$i);
}
}
$list1: blue, red;
$list2: yellow, white;
/*join函數可以組合兩個列表，形成一個新的列表*/
$list3: join($list1,$list2);
/*
結果轉換成:
list3: blue, red, yellow, white
*/
/*append函數用於在列表的后面插入列表項*/
$list4: append($list1,green);
/*
結果轉換成：
list4: blue, red, green
*/
/*
注意：join($list1,$list2,$separator)和append($list,$separator)函數的$separator
當沒有指定$separator時，
join函數：
先看$list1的格式，它是什么格式拼接后就是什么格式
如果$list1只有一項，就看$list2的格式，它是什么格式就以什么格式拼接
如果$list2也只有一項，就用空格拼接。
append函數：
先看$list的格式，它是什么格式就用什么格式連接
如果$list只有一項，就用空格連接
$separator參數用來指定連接的格式：
auto: 自動就是上面的規則
comma: 以逗號連接
space: 以空格連接
*/
$list5: 1px 2px 3px, solid dashed dotted, blue red green;
/*將列表分隔成多維列表*/
$arr: zip($list);
/*
結果轉換成：
nth($arr,1): 1px solid blue
nth($arr,2): 2px dashed red
nth($arr,3): 3px dotted green
*/
/*index($list,$value)用於返回對應值在列表的索引，索引從1開始*/
$index: index(1px solid red, 1px);
//結果：$index: 1
//如果在列表沒有找到對應值，就返回false
Introspection判斷型函數
//type-of(value)返回對應值得類型
$type-of1: type-of(100); //結果："number"
$type-of2: type-of("abcd"); //結果："string"
$type-of3: type-of(true); //結果："bool"
$type-of4: type-of(blue); //結果："color"
//unit(value)返回對應值的單位
$unit1: unit(100px); //結果： $unit1: "px"
$unit2: unit(100); //結果：$unit2: ""
//unitless(value)判斷對應值是否不含單位
$unitless1: unitless(100); //結果： $unitless1: true
$unitless2: unitless(100px); //結果 $unitless2: false
//comparable(value1,value2)判斷兩個數是否可以進行“加，減或者合並”
$comparable1: comparable(2px,1%); //結果：false
$comparable2: comparable(2px,1cm ); //結果：true
Miscellaneous函數
//三元條件函數 if($condition,$if-true,$if-false)的使用
$if1: if(true,1px,2px); //結果：$if1: 1px
$if2: if(false,1px,2px); //結果：$if2: 2px
Map的函數
/*定義Map*/
$map:(
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
$map1:(
color: red
);
$map2:(
text-color: blue
);
//map-get($map,$key)函數獲取對應$key的$value
$value: map-get($map,facebook); //結果：$value: #3b5998
//map-has-key($map,$key)函數判斷Map是否含有對應的$key
$hasKey: map-has-key($map, facebook); //結果：$hasKey: true
//map-keys($map)函數返回map所有的$key
$keyList: map-keys($map); //結果：$keyList: "dribble","facebook","github","google","twitter"
//map-values($map)函數返回map所有的$value
$valueList: map-values($map); //結果：$valueList: #ea4c89,#3b5998,#171515,#db4437,#55acee
//map-merge($map1,$map2)函數將兩個map合並生成一個新的map
$mergeList: map-merge($map1,$map2);
/*
結果：$mergeList: (
color: red,
text-color: blue
)
*/
//map-remove($map,$key)函數刪除一個$key，返回一個新的map
$removeMap: map-remove($map,facebook);
/*
結果：$removeMap: (
dribble: #ea4c89,
github: #171515,
google: #db4437,
twitter: #55acee
)
*/
//keywords($args)函數用於動態創建map，與混合宏使用
@mixin map($args...){
@debug keywords($args);
}
@include map(
$dribble: #ea4c89,
$facebook: #3b5998,
$github: #171515,
$google: #db4437,
$twitter: #55acee
);
/*
結果：
DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)
*/
顏色函數
RGB函數
$red: 255;
$green: 255;
$blue: 255;
$alpha: 0.5;
$color: #f36;
$mixColor1: #f00;
$mixColor2: #00f;
//根據紅、綠、藍三個值創建一個顏色: rgb()函數參數類型為number
$color1: rgb($red,$green,$blue);
//根據紅、綠、藍、透明度四個值創建一個顏色, rgba()函數參數類型為number
$color2: rgba($red,$green,$blue,$alpha);
//獲取一個顏色中的紅、綠、藍部分創建一個顏色
$red1: red($color);
$green1: green($color);
$blue1: blue($color);
//mix($color1,$color2,$weight)函數用於混合函數，$weight指第一種顏色的比例
//如果不定義$weight，默認為.5
$mixColor: mix($mixColor1,$mixColor2,.75);
HSL函數
$baseColor: #ad141e;
//將顏色變亮或者變暗，第二個參數是變亮的程度，如10%就是增加10%的亮度
.lighten{
background: lighten($baseColor,10%);
}
.darken{
background: darken($baseColor,10%);
}
//增加或減少顏色的飽和度
.saturate{
background: saturate($baseColor,30%);
}
.desaturate{
background: desaturate($baseColor,30%);
}
//改變色相，第二個參數在-360deg和360deg之間，也可以是百分數
.adjust-hue-deg{
background: adjust-hue($baseColor, 30deg);
}
.adjust-hue-per{
background: adjust-hue($baseColor, 30%);
}
//將飽和度直接設為0
.grayscale{
background: grayscale($baseColor);
}
opacity函數
//獲取顏色透明度，顏色透明度默認為1
$alpha: alpha(red);
$opacity: opacity(red);
//上面說到的rgba()也可以設置透明度
//將兩種顏色的透明度進行加法運算，讓其更不透明，返回一個新的顏色
$opacify: opacify(rgba(22,34,235,.6),.2);
$fade-in: fade-in(rgba(22,34,235,.6),.2);
//結果：rgba(22,34,235,.8)
//將兩種顏色的透明度進行減法運算，讓其更加透明，返回一個新的顏色
$transparentize: transparentize(red,.5);
$fade-out: fade-out(red,.5);
//結果：rgba(255,0,0,.5);
注意事項
混合宏、占位符、繼承的比較
混合宏可以帶參數，但是相同的調用選擇器不會組合；
占位符不會在編譯后的css文件中保留，相同的調用選擇器會進行組合
不使用占位符的繼承會在css文件中保留基類，相同的調用選擇器會進行組合