一、變量

$btn-bg : darken(#fff, 6.5%) !default;
$btn-bg : darken(#000, 6.5%); //重寫就會覆蓋，無論順序是什麼樣的
$btn-border : darken($btn-bg, 5%) !default;

.btn-primary{
  $btn-bg : darken(#00f, 6.5%); //定義局部變量
  background-color: $btn-bg; //調用局部變量
  border: 1px solid $btn-border;
}

二、嵌套

1. 選擇器嵌套

nav {
  a {
    color: red;
    header & {
      color: green;
    }
  }
}

編譯結果：

nav a {
  color: red;
}
header nav a {
  color: green;
}

2. 屬性嵌套

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

編譯結果：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

3. 僞類嵌套

.clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    overflow: hidden;
  }
}

編譯結果：

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

三、混合宏

1. 混合宏不帶值的參數

(1) 聲明

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

(2) 調用

.box {
  @include border-radius(3px);
}

(3) 編譯

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

2. 混合宏帶值的參數

(1) 聲明

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

(2) 調用

.btn {
  @include border-radius;
}

或者重寫

.box {
  @include border-radius(50%);
}

(3) 編譯

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

或

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

3. 傳多個參數

(1) 聲明

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

(2) 調用

.box-center {
  @include center(500px,300px);
}

(3) 編譯

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

4. 參數“...”

當混合宏傳的參數過多之時，可以使用參數來替代

(1) 聲明

@mixin box-shadow($shadows...){
  @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;
  }
}

(2) 調用

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

(3) 編譯

@mixin box-shadow($shadows...){
  @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;
  }
}

四、擴展/繼承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯結果：

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

五、佔位符 %placeholder

%placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。所以它可以取代以前 CSS 中的基類造成的代碼冗餘的情形。

%mt {
  margin-top: 5px;
}
%pt{
  padding-top: 5px;
}
.btn {
  @extend %mt;
}

編譯結果：

.btn {
  margin-top: 5px;
}

混合宏、繼承、佔位符比較

	混合宏	繼承	佔位符
聲明方式	@mixin	.class	%placeholder
調用方式	@include	@extend	@extend
使用環境	代碼塊中涉及到變量	代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在	和繼承基本類似
不足	多次出現調用的混合宏對應的代碼塊，代碼冗餘	如果基類並不存在於HTML結構時，無論調用與否，在編譯出來的CSS中都將產生基類對應的樣式代碼	和繼承基本類似

六、插值#{}

可以在@extend 中使用，不能在@mixin使用

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

七、註釋

/* 註釋 */	在編譯出來的 CSS 顯示
// 註釋	在編譯出來的 CSS 中不會顯示

八、運算

p {
  font: 10px/8px;             // 純 CSS，不是除法運算
  $width: 1000px;
  width: $width/2;            // 使用了變量，是除法運算
  width: round(1.5)/2;        // 使用了函數，是除法運算
  height: (500px/2);          // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

編譯結果：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

對於攜帶不同類型的單位時，在 Sass 中計算會報錯，如下例所示：

.box {
  width: 20px - 1em;
}

編譯的時候，編譯器會報錯：“Incompatible units: 'em' and ‘px'.”

九、 @for循環

@for $i from <start> through <end>	through 表示包括 end 這個數
@for $i from <start> to <end>	to 不包括 end 這個數

實例：

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}

@for $i from <start> through <end>

@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

@for $i from <start> to <end>

@for $i from 1 to 13 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

十、 @while循環

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

編譯結果：

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

十一、 @each循環

$list: adam john wynn mason kuroir;  //$list 就是一個列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

編譯結果：

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat;
}
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat;
}
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat;
}
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat;
}
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat;
}

十二、字符串函數

1. unquote()函數

scss	css
unquote('Hello Sass!')	Hello Sass!
unquote("'Hello Sass!")	'Hello Sass!
unquote("I'm Web Designer")	I'm Web Designer
unquote("'Hello Sass!'")	'Hello Sass!'
unquote('"Hello Sass!"')	"Hello Sass!"
unquote(Hello Sass)	Hello Sass

2. quote() 函數

quote() 函數剛好與 unquote() 函數功能相反，主要用來給字符串添加引號。如果字符串，自身帶有引號會統一換成雙引號 ""。

3. 其他函數

函數	作用	scss	css
To-upper-case()	將字符串轉換成大寫字母	to-upper-case(aA-a)	AA-A
To-lower-case()	將字符串轉換成小寫字母	to-lower-case(aA-a)	aa-a
percentage($value)	將一個不帶單位的數轉換成百分數	percentage(2px / 10px)	20%
round($value)	將數值四捨五入，轉換成一個最接近的整數	round(12.3px)	12px;
ceil($value)	將大於自己的小數轉換成下一位整數	ceil(2.3%)	3%
floor($value)	將一個數去除他的小數部分	floor(10.8em)	10em
abs($value)	返回一個數的絕對值	abs(-.5%)	0.5%
min($numbers…)	找出幾個數值之間的最小值	min(1,2,1%,3,300%)	1%
max($numbers…)	找出幾個數值之間的最大值	max(1px,5px)	5px
random()	獲取隨機數	random()	隨機數
length($list)	返回一個列表的長度值	length(10px 20px (border 1px solid) 2em)	4
nth($list, $n)	返回一個列表中指定的某個標籤值	nth((1px solid red) border-top green,1)	(1px "solid" #ff0000)
join($list1, $list2, [$separator])	將兩個列表連接合併成一個列表	join((blue,red),(#abc,#def),comma)	(#0000ff, #ff0000, #aabbcc, #ddeeff)
append($list1, $val, [$separator])	將某個值放在列表的最後	append((blue green),red,space)	(#0000ff #008000 #ff0000)
zip($lists…)	將幾個列表結合成一個多維的列表	zip(1px 2px 3px,solid dashed dotted,green blue red)	((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))
index($list, $value)	返回一個值在列表中的位置值，第一個值就是1，不在列表中返回false，	index(1px solid red, red)	3
type-of($value)	返回一個值的類型	type-of(1 / 2 = 1)	"string"
unit($number)	返回一個值的單位（只充許乘、除運算）	unit(10px * 3em)	"em*px"
	（加、減碰到不同單位時，unit() 函數將會報錯，除 px 與 cm、mm 運算之外）	unit(1px - 1cm)	"px"
unitless($number)	判斷一個值是否帶有單位，不帶單位返回的值爲 true，帶單位返回的值爲 false	unitless(1 /2 + 2 )	true
comparable($number-1, $number-2)	判斷兩個值是否可以做加、減和合並	comparable(2rem,1em)	false
if($condition,$if-true,$if-false)	當條件成立返回一種值，當條件不成立時返回另一種值	if(true,1px,2px)	1px

十三、 Map

1. map示例

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

示例：

換皮膚的項目，可能每一套皮膚對應的顏色蠻多的，那麼使用此功能來管理顏色的變量就非常的有條理性，便於維護與管理。

$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    ),
    negative: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);

2. map-get($map,$key)

map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。

map-get($map,$key) 函數的作用是根據 $key 參數，返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map中，將返回 null 值。此函數包括兩個參數：

$map：定義好的 map。

$key：需要遍歷的 key。

示例：

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}

編譯結果：

.btn-dribble {
  color: #3b5998;
}

3. map-merge($map1,$map2)

map-merge($map1,$map2) 函數是將 $map1 和 $map2 合併，然後得到一個新的 $map。

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);
$newmap: map-merge($color,$typo);

編譯結果：

$newmap:(
    text: #f36,
    link: #f63,
    border: #ddd,
    background: #fff,
    font-size: 12px,
    line-height: 1.6
);

注意，如果 $map1 和 $map2 中有相同的 $key 名，那麼將 $map2 中的 $key 會取代 $map1 中的：

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6,
    border: #ccc,
    background: #000
);
$newmap: map-merge($color,$typo);

編譯結果：

$newmap:(
    text: #f36,
    link: #f63,
    font-size: 12px,
    line-height: 1.6,
    border: #ccc,
    background: #000
);

4. keywords($args)

動態創建 map 的函數。可以通過混合宏或函數的參數變創建 map

@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

在命令終端可以看到一個輸入的 @debug 信息：

 DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

5. 其它

函數	作用	示例	編譯結果
map-has-key($map,$key)	當 $map 中有這個 $key，則函數返回 true，否則返回 false。	map-has-key($social-colors,$color)	true/false
map-keys($map)	將會返回 $map 中的所有 key	map-keys($social-colors);	"dribble","facebook","github","google","twitter"
map-values($map)	)獲取的是 $map 的所有 value 值，如果有相同的 value 也將會全部獲取出來	map-values($social-colors)	#ea4c89,#3b5998,#171515,#db4437,#55acee
map-remove($map,$key)	刪除當前 $map 中的某一個 $key	$map:map-remove($social-colors,dribble);	$map:( facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee );

十四、顏色

函數	作用	示例	編譯結果
red($color)	從一個顏色中獲取其中紅色值	red(#c82858)	200
green($color)	從一個顏色中獲取其中綠色值	green(#c82858)	40
blue($color)	從一個顏色中獲取其中藍色值	blue(#c82858)	88
mix($color-1,$color-2,[$weight])	將兩種顏色根據一定的比例混合在一起（weight爲第一個顏色所佔比例）	mix(#f00, #00f, 25%)	#3f00bf
hsl($hue,$saturation,$lightness)	通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色	hsl(200,30%,60%)	#7aa3b8
hsla($hue,$saturation,$lightness,$alpha)	通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色	hsla(200,30%,60%,.8)	rgba(122, 163, 184, 0.8)
hue($color)	從一個顏色中獲取色相（hue）值	hue(#7ab)	195deg
saturation($color)	從一個顏色中獲取飽和度（saturation）值	saturation(#7ab)	33.33333%
lightness($color)	從一個顏色中獲取亮度（lightness）值	lightness(#ad141e)	37.84314%
adjust-hue($color,$degrees)	通過改變一個顏色的色相值，創建一個新的顏色	adjust-hue($baseColor,30deg)	#ad5614
lighten($color,$amount)	通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色	lighten($baseColor,70%)	#db1926
darken($color,$amount)	通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色	darken($baseColor,40%)	#7f0f16
saturate($color,$amount)	通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色	saturate($baseColor,30%)	#c1000d
desaturate($color,$amount)	通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色	desaturate($baseColor,30%)	#903137
grayscale($color)	將一個顏色變成灰色，相當於desaturate($color,100%)	grayscale($baseColor)	#616161
complement($color)	返回一個補充色，相當於adjust-hue($color,180deg)	complement(#f36)	#33ffcc
invert($color)	反回一個反相色，紅、綠、藍色值倒過來，而透明度不變	invert(#f36)	#00cc99
alpha($color) /opacity($color)	獲取顏色透明度值	alpha(rgba(red,.8))	0.8
opacify($color, $amount) / fade-in($color, $amount)	使顏色更不透明	opacify(red,.15)	#ff0000
opacify($color, $amount) / fade-in($color, $amount)	使顏色更不透明	fade-in(rgba(23,34,34,.5),.15)	rgba(23, 34, 34, 0.65)
transparentize($color, $amount) / fade-out($color, $amount)	使顏色更加透明	transparentize(#fde,.9)	rgba(255, 221, 238, 0.1)
transparentize($color, $amount) / fade-out($color, $amount)	使顏色更加透明	fade-out(hsla(98,6%,23%,.5),.6)	rgba(58, 62, 55, 0)

十五、 @ 規則

1. @import

引入 SCSS 和 Sass 文件

(1) 示例

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

編譯結果：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

(2) 嵌套@import

example.scss

.example {
  color: red;
}
#main {
  @import "example";
}

編譯結果：

#main .example {
  color: red;
}

2. @media

(1) 示例：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯結果：

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

(2) 嵌套 @media

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

編譯結果：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

3. @at-root

跳出根元素

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }
}

編譯結果

.a {
    color: red;
}

.a .b {
    color: orange;
}

.a .b .c {
    color: yellow;
}

.d {
    color: green;
}

4. @debug

@debug 在 Sass 中是用來調試的，在 Sass 的源碼中使用了 @debug 指令之後，Sass 代碼在編譯出錯時，在命令終端會輸出設置的提示 Bug:

@debug 10em + 12em;

會輸出：

Line 1 DEBUG: 22em

5. @warn

@warn 和 @debug 功能類似，用來幫助我們更好的調試 Sass。如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

6. @error

@error 和 @warn、@debug 功能是如出一轍。

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設置在10以內的數";
  }

}

.test {
  @include error(15);
}

編譯的時候：

你需要將15值設置在10以內的數 on line 7 at column 5

學習筆記之SCSS

一、 變量

二、 嵌套

1. 選擇器嵌套

2. 屬性嵌套

3. 僞類嵌套

三、 混合宏

1. 混合宏不帶值的參數

(1) 聲明

(2) 調用

(3) 編譯

2. 混合宏帶值的參數

(1) 聲明

(2) 調用

(3) 編譯

3. 傳多個參數

(1) 聲明

(2) 調用

(3) 編譯

4. 參數“...”

(1) 聲明

(2) 調用

(3) 編譯

四、 擴展/繼承

五、 佔位符 %placeholder

六、 插值#{}

七、 註釋

八、 運算

九、 @for循環

實例：

@for $i from <start> through <end>

@for $i from <start> to <end>

十、 @while循環

十一、 @each循環

十二、 字符串函數

1. unquote()函數

2. quote() 函數

3. 其他函數

十三、 Map

1. map示例

示例：

2. map-get($map,$key)

示例：

3. map-merge($map1,$map2)

4. keywords($args)

5. 其它

十四、 顏色

十五、 @ 規則

1. @import

(1) 示例

(2) 嵌套@import

2. @media

(1) 示例：

(2) 嵌套 @media

3. @at-root

4. @debug

5. @warn

6. @error

一、變量

二、嵌套

三、混合宏

四、擴展/繼承

五、佔位符 %placeholder

六、插值#{}

七、註釋

八、運算

十二、字符串函數

十四、顏色