# Sass Scss 基本筆記 @

###### tags: `SCSS`

[SASS DEMO](https://github.com/gonsakon/Sass-Layout-Demo)
[BOOTSTRAP SCSS撰寫方式參考](https://github.com/twbs/bootstrap/tree/main/site/assets/scss)

### 變數variables
$+代號:CSS樣式
[變數解說&以下示範來源](https://ithelp.ithome.com.tw/articles/10127206)
多用於顏色、行高、

CSS原檔
.header a{
  color: #000;
}
.menu a{
  color: blue
}
.footer a{
  color: #000;
}
.nav a{
  color: blue
}

SASS轉譯
$link-color-1: #000
$link-color-2: blue
.header a
  color: $link-color-1
.menu a
  color: $link-color-2
.footer a
  color: $link-color-1
.nav a
  color: $link-color-2

### @mixin

常常有元件有類似的樣式如,不同大小按鈕共用一樣,外框和背景顏色.此時就可以使用@mixin,除此之外@mixin可以代參數,如果修改顏色或是遇到不同季節版面顏色修改就可以使用.

搭配@include指令使用

[@mixin解說參考&以下示範來源](https://www.w3cplus.com/preprocessor/sass-the-mixin-directive.html)

@mixin button { 
  font-size: 1em; 
  padding: 0.5em 1.0em; 
  text-decoration: none; 
  color: #fff; }



@mixin link {
a { 
color: blue; 

  &:visited { 
  color: purple; 
  } 

  &:hover { 
  color: white; 
  } 

  &:active { color: red;
  } 

 } 
}


.button-green { 
@include button; 
background-color: green;
}

編譯後

.button-green { 
font-size: 1em; 
padding: 0.5em 1.0em; 
text-decoration: none;
color: #fff; 
background-color: green; 
}

.button-red{
    @include button;
    @include link;
    background-color:red;
}

編譯後

.button-red {
	font-size: 1em;
	padding: 0.5em 1.0em;
	text-decoration: none;
	color: #fff;
	background-color: red;
}

.button-red a {
	color: blue;
}

.button-red a:visited {
	color: purple;
}

.button-red a:hover {
	color: white;
}

.button-red a:active {
	color: red;
}

### 帶變數的@mixin

@mixin circle($size,$background-color){

 border-radius: 50%;
 height: $size;
 width: $size;
 font-size: $size/2;
 background: $background-color;

}

redcircle {
 @include circle(15px,#AA0000)
 

}

轉譯後
redcircle {
	 border-radius: 50%;
	 height: 15px;
	 width: 15px;
	 font-size: 7.5px;
	 background: #a00;
}
 

### SCSS RWD
[參考資料](https://hackmd.io/@yuci0213/r17cT6NiL)

### @extend
和@mixin有點類似,都是用於合併兩個class樣式使用,可以減少css撰寫數量,但不一樣地方在於
@extend不可帶入參數.

[@extend解說參考&以下示範來源](https://ithelp.ithome.com.tw/articles/10128359)

有一些介紹說@extend不建議使用,bootstrap的scss也沒再使用@extend,真實性以及是否真的不好用待研究,我沒有探索過,但純紀錄找到資料.