---
tags: scss
---

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

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

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

2.vscode編譯scss:
在vscode安裝套件live scss compiler後可在狀態列看到，或檢視/外觀/顯示狀態列（用這編譯很卡 會當掉）

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常見錯誤:
每行結尾需加上分號
編譯順序會從上到下，變數設定一定要放在最上面

### 變數搭配加減乘除:
變數也可做運算，scss很常以一個基準點去設定，例如字級;
也可將變數代到變數裡面

$font-sm:16px;
$font-l: $font-sm *1.2;


### 字串管理:
字串寫法前後加雙引號或單引號

$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%);
}


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

### &連結符號
(這個被放在Sass 環境教學 - 一起掌握最世界最多人用的 CSS 管理語言！章節)

## 四、切分檔案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之前）


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畫個方向的三角形


//範例圖片取代文字
@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

@mixin color($color){
  color: $color;
  border: 5px solid $color;
  text-dercoration: $color;  
｝
.box1{
@include color(#ff0000);
}
.box2{
@include color(#000);
}

#### 範例2

@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

@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使用


@mixin pad{
 @media(max-width:768px){
     width:100px;
 }
}

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

### 4.核心語法 @mixin + content:
不同區塊@media裡面的內容會更換，所以用@content


@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先寫在同一支，遇到專案較多可拆分。


* 結構也可拆成如下，好處是共通的東西可延用到下次專案，建立資料庫，提升開發速率(這裡是rwd課程內容好像比較舊了)

@import "mixin";//所有全域變數和mixin
@import "reset";//css reset
@import "layout";//共同框架第一層，例表頭、表尾
@import "module";//button,form,table
@import "page/index、pages1、pages2";



## 六、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

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

* 載入按鈕模組
1.以pure.css為例，進入custom，複製button的css,另存為_buttons-min.scss

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

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

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


### oocss
oocss就是結構與樣式分離、容器與內容分離。讓class可重複利用，避免過多css內容重複寫

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



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