---
# System prepended metadata

title: scss
tags: [scss]

---

---
tags: scss
---

# scss
## 一 、環境格式教學
1.瀏覽器看不懂.scss檔，需透過軟體或套件編譯成css
2.在scss檔也可以寫純粹的css寫法，但主要還是要利用scss寫法來管理css
3.若使用codepen內建有scss選項，右上小箭頭下拉選view uncompiled scss預覽編譯結果
![](https://i.imgur.com/cV4xkhm.png)

4.sass提供兩種寫法
   (1)scss寫法和css幾乎一樣，只是比css多了一些功能，css副檔名改成scss也可以編譯成功
   (2)sass較嚴謹有寫ruby的適合用這個，用兩個空白或一個tab做階層，
   不用加｛｝；
   冒號後面空一格 
![](https://i.imgur.com/huBFBcQ.png)

## 二、scss編譯方式
1.scss編譯方式
(1)編譯軟體：prepros，若使用sublime、dw或其他編輯器，建議可以直接安裝prepros軟體
(2)gulp、webpack 前端任務打包工具，前端除了scss還會用到js等壓縮工具，用來一起打包→(目前還用不到)
(3)編輯器插件: live scss compiler

2.vscode編譯scss:
在vscode安裝套件live scss compiler後可在狀態列看到，或檢視/外觀/顯示狀態列（用這編譯很卡 會當掉）
![](https://i.imgur.com/DrHM8HL.jpg)

3.prepros編譯:
安裝軟體 [prepros](https://prepros.io/)，把專案資料夾拉進去後，軟體開著，一樣在編輯器寫code，有寫scss會自動編譯成css（速度較快但廣告很多一直跳出來）


## 三、scss常用語法
### 變數: 
* 將時常需要設定的css放在變數來管理，例如寬度、行數、顏色、文字大小等，都很適合用變數設定，好處是日後修改變數設定，有代到變數名稱的會自動修改設定

* 變數以美元符號$當開頭，後面自行命名，再將變數名稱代入即可  [範例在這](https://codepen.io/tinchen/full/WNMNWdR)


    ```
    $text-color: #f00;
    $font-size: 13px;
    $width: 960px;

    .shop li{
     width:$width/4; 編譯出240px
    }
    ```

### scss常見錯誤: 
每行結尾需加上分號
編譯順序會從上到下，變數設定一定要放在最上面
 ![](https://i.imgur.com/aL3ejHX.jpg)
 
### 變數搭配加減乘除: 
變數也可做運算，scss很常以一個基準點去設定，例如字級;
也可將變數代到變數裡面
```
$font-sm:16px;
$font-l: $font-sm *1.2;
```
  ![](https://i.imgur.com/b901H9k.png)



### 字串管理: 
字串寫法前後加雙引號或單引號
```
$font-family-base:”Helvetica,Arial,sans-serif”;
$font-family-title:”monospace”;

body{
  font-family:$font-family-base;
}
```
 
### scss內建顏色功能-darken、light : 
可代變數或色號
```
$base-color: #440055;

.content{
  background: darken($base-color,20%);
}
.text{
  background: lighten(#556677,8%);
}
```
![](https://i.imgur.com/PWpOsTO.png)

  
### 從基礎到進階的變數管理技巧:
可參考bs 變數檔寫法，[github上面有變數檔](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss) 

### &連結符號
(這個被放在Sass 環境教學 - 一起掌握最世界最多人用的 CSS 管理語言！章節)![](https://i.imgur.com/GSgkObX.png)

 

## 四、切分檔案scss import
1.參考bootstrap.scss檔

2.import+變數管理+css拆開管理:
 (1)觀念:
* 依不同功能分別存成_scss檔，各別的去負責一個功能，讓scss檔更加乾淨
* 建立一個all.scss檔，再@import多個scss檔進來，統一管理

(2)操作: 
* 建立變數檔_varibles.scss，檔名加下底線為合併用，之後會合併成all.scss
  變數檔裡通常會寫色系、字體、大小
* 在all.scss匯入: 輸入@import “variable”；
* 再把自己寫的scss內容，存成_main.scss，一樣在all.scss匯入@import”main”;
  第三方插件也是在all.scss匯入
* css reset: 再到all.scss匯入@import(main之前）  
  ![](https://i.imgur.com/yZqyaGs.png)
  
  ![](https://i.imgur.com/H08pLsb.png)


3.css reset
[normalize](https://necolas.github.io/normalize.css/latest/normalize.css) 還是會保留部分預設，可到官網查看（ctrl+s儲存檔名加_副檔改scss）若不喜歡內容可以再自行修改，cssreset本質還是css，可以改，工具沒有對錯，能加快速度就是好工具，或用[myweb](https://meyerweb.com/eric/tools/css/reset/) 清除所有樣式，css reset匯入在all.scss @import(main之前）

4.常見錯誤：
@import結尾沒加分號 ;
@import順序錯誤，先放main再放variable讀取錯誤，（變數要放最上面，先載變數其他資料才會跑出來，因為main裡面會有變數資料，放在最上面撈不到東西就會跳出錯誤），變數不會直接編譯，有些設計師會把心法放在變數檔，不讓其他人在網頁直接看出來



 
## 五、mixin
### 1.mixin
可以記住常用的css技巧，@include呼叫這段語法出來，mixin獨立存一個_scss檔在到all匯入(main前面)

例如:
* 圖片取代文字
* 兼容個瀏覽器的inline-block的寫法
* 各css3語法瀏覽器支援解決方案
* 清除浮動解決方案clearfix
* 用css畫個方向的三角形

![](https://i.imgur.com/FduV6EF.jpg)


```
//範例圖片取代文字
@mixin texthide{
  text-indent: 110%;
  white-space: nowrap; 
  overflow: hidden;
}
	
.header h1{
background: url(“../logo.png”)
@include texthide;
```


```
//範例blueSize
@mixin blueSize{
  color:blue;
  font-size:13px;
｝
.header{
background-color:#000;
@include blueSize;
}
```

### 2.mixin搭配參數: 
可以代兩個以上的參數
#### 範例1
![](https://i.imgur.com/YKFkWUq.png)
```
@mixin color($color){
  color: $color;
  border: 5px solid $color;
  text-dercoration: $color;  
｝
.box1{
@include color(#ff0000);
}
.box2{
@include color(#000);
}
```

#### 範例2
![](https://i.imgur.com/9IBqA0Y.png)
```
@mixin color($color,$size){
  color: $color;
  border: 5px solid $color;
  text-dercoration: $color;
  font-size: $size*1.5;
｝
.box1{
@include color(#ff0000,16px);
}
.box2{
@include color(#000,20px);
}
```
 

#### 範例3
![](https://i.imgur.com/VKlLUl9.png)
```
@mixin circle($size,$bgcolor){
  border-radius:50%;
  height:$size;
  width:$size;
  font-size:$size/3;
  background:$bgcolor;
｝
.box{
@include circle(30px,#fff);
}
```


### 3.mixin+rwd:
將常用斷點寫成mixin在@include使用

![](https://i.imgur.com/hpsJLEM.png)
```
@mixin pad{
 @media(max-width:768px){
     width:100px;
 }
}

.header{
    width:500px;
    @include pad;
}
```

### 4.核心語法 @mixin + content:
不同區塊@media裡面的內容會更換，所以用@content 
![](https://i.imgur.com/DQwtwJw.png)

![](https://i.imgur.com/yWNWKtM.png)


```
@mixin desktop-below{
 @media(max-width:1023px){
     @content
 }
}
@mixin pad{
 @media(max-width:768px){
     @content
 }
}
@mixin mobile{
 @media(max-width:568px){
     @content
 }
}


.header{
    width:500px;
    @include pad{
     width:100px;
     font-size:20px;
    }
    @include mobile{
     font-size:8px;
    } 
}
```
### 5.scss總結: 注意@import順序
* 變數檔 →css reset →mixin →main
* mixin也可將斷點和文字隱藏拆開→textHide →media，
或用資料夾mixin/media →mixin/textHide; 
* 建議剛開始mixin先寫在同一支，遇到專案較多可拆分。

![](https://i.imgur.com/xmxcOrq.png)

* 結構也可拆成如下，好處是共通的東西可延用到下次專案，建立資料庫，提升開發速率(這裡是rwd課程內容好像比較舊了)
```
@import "mixin";//所有全域變數和mixin
@import "reset";//css reset
@import "layout";//共同框架第一層，例表頭、表尾
@import "module";//button,form,table
@import "page/index、pages1、pages2";
```
![](https://i.imgur.com/eXSJgIJ.png)

![](https://i.imgur.com/oKt1iGM.png)






## 六、scss/css設計模式 網頁收納術
### SMACSS 
SMACSS http://smacss.com/
PURE https://purecss.io/  yahoo開發
* _bass.scss: 有點像客製化的全站設定，把全站設定跟css reset分開，之後有其他專案可重複使用，參考pure裡面的base

* _layout.scss: SMACSS的觀念，遇到相同框架可將名稱統一，設定為layout-xxx，例如範例就可以將.bookList和.dvdList改成l-list
![](https://i.imgur.com/cSXKLEQ.png)

* 模組化：參考bootstarp btn和pure btn table的設計
* SMACSS元件觀念：軟體工程有很多的程式語言，每個對元件和模組等的定義都不一樣，看別人的scss或css時，掌握如何擴充子模組的觀念，就不容易搞混
建議看完pure.css可幫助更了解css規劃，複製連結時將min刪除，可以看到更完整的css（沒壓縮過的）


* 載入按鈕模組
1.以pure.css為例，進入custom，複製button的css,另存為_buttons-min.scss![](https://i.imgur.com/Cria87y.jpg)

2.在import"module/buttons-min"，就可以使用button裡面的class
.pure-button .pure-button-primary
![](https://i.imgur.com/SnTavnV.jpg)
3.其他類似pure、bs5等框架，也可以用這種方式，只截取部分來使用，建立自己的css(這裡練習拉出table)

* SMACSS標籤優化
盡量用class指定html標籤，不直接使用html tag

因標籤具有語意化，有不同的權重，
範例樣式一樣，但不同權重時，用class名稱可解決

![](https://i.imgur.com/YrMuTRH.jpg)



###  oocss
oocss就是結構與樣式分離、容器與內容分離。讓class可重複利用，避免過多css內容重複寫
![](https://i.imgur.com/ple6Kfe.png)

* 概念就像bootstrap一樣，例: btn(結構css打地基），打好地基以後做變化，    btn-primary(樣式、背景色）、btn-lg(大小）
    * 框架: grid 、col、row...
    * 結構: header、footer...
    * 樣式另外拆開寫(例陰影、顏色、文字、大小、工具類例clearfix等)

![](https://i.imgur.com/4qAZWVT.png)

![](https://i.imgur.com/2VU51fN.png)  



練習code: https://codepen.io/tinchen/pen/PomjPYZ
