---
title: 'Sass'
disqus: Pai
---
# Sass
## Table of Contents
[TOC]
## 待學習項目
- [ ] 如何使用photoshop切版
- [ ] 使用@if提升@Mixin靈活度，以CSS圖形化為例
- [ ] @for+random()創造無限可能
- [ ] inline-image()與Livereload介紹
## 環境篇
-使用prepros
## 寫法篇
## 變數篇
- 全域變數:讓所有共用的屬性使用變數
- 例如 &linkcolor: #000;
- 變數的運算功能單位不能混用，像是px+em或%+em等等。
- 運用在:字體大小$font-l、$font-m、$font-s
- 支援加減乘除:$font-m:12px、$font-l:$font-m*1.2、$font-s:$font-m*0.8、 $ width/7
1. 透過#{...}將變數中的字串提取出來
```sass=
$bg:'../image/'
background-color:url(#{bg}header.png)
```
編譯出來結果就會是
background-color:url(../image/header.png)
- 常用的全域設定就有下述幾種
**$text-color:pink→預設文字顏色
$link-color:#000→文字連結樣式，多則就再加紹數字
$link-color-hover:#fff→滑鼠拖曳過後的樣式顏色
$font-size:13px→全域字型大小，如一網站有多種就下多種字型
$line-height:1.8→全域行距
$container-width:960px→ 網站整體寬度
$font-style："Helvetica Nueue", Arial, Sans Serif; →全域字型**
## 拆檔篇 - @import: 每隻 Sass 檔專心做一件事情
- 使用import將sass匯成一隻檔案
```sass=
@import "reset.sass"
@import "index.sass"
```
- 將兩隻獨立的程式匯入在一起。
## 工具篇 - @mixin:
- @mixin能幫你記住css技巧讓你不在因為回想原理而中斷思緒
- 一般使用
```sass=
= hide-text
text-indent: 110%
white-space: nowrap
overflow: hidden
header
+ hide-text
```
mixin也能夠帶入變數
```sass=
= circle ($size,$bgcolor)
border-radius: 50%
height: $size
width: $size
font-size: $size/3
background: $bgcolor
.circle1
+ circle(10px,#000)
```
## 載具篇 - @mixin+@content 設計響應式設計超方便
```sass=
=pad
@media(max-width: 768px)
@content
.header
height: 500px
width: 500px
+pad()
height: auto;
```
編譯後的css
```css=
.header {
height: 500px;
width: 500px; }
@media (max-width: 768px) {
.header {
height: auto; } }
```
## 共通樣式使用@extend
-如果有很多共同的樣式需要寫在程式中且不需要帶入參數，就適合用@extend
```sass=
%all-h1
width: 100px
height: 200px
font-size: 30px
.header h1
@extend %all-h1
letter-spacing: 1.2
.footer h1
@extend %all-h1
line-height: 20px
```
編譯出來的結果=
```css=
.header h1, .footer h1 {
width: 100px;
height: 200px;
font-size: 30px; }
.header h1 {
letter-spacing: 1.2; }
.footer h1 {
line-height: 20px; }
```
## 試著去編寫自己的cssreset
- 參考公版的cssreset去修改出符合自己習慣的cssreset
- 可以挖空某些需要調整的屬性，像:line-height、link-color、font-size，把他寫在統合css的全域變數上。
## 規劃你的Sass結構
- 一版
@import mixin //放置所有Sass全域變數與Mixin
@import reset // reset.css
@import extnd // 拿來合併樣式，都放@extend用的檔案
@import layout //共同框架
@import index //首頁
@import page //內頁
@import xxx //各單元CSS
- 專業版
stylesheets/
|
|-- modules/ # Common modules
| |-- _all.scss # Include to get all modules
| |-- _utility.scss # Module name
| |-- _colors.scss # Etc...
| ...
|
|-- partials/ # Partials
| |-- _base.sass # imports for all mixins + global project variables
| |-- _buttons.scss # buttons
| |-- _figures.scss # figures
| |-- _grids.scss # grids
| |-- _typography.scss # typography
| |-- _reset.scss # reset
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # primary Sass file
## 利用@Mixin與Sass運算建立Grid System
```sass=
$width:960px
.wrap
width:$width
margin: 0 auto
// 欄位數量 , 欄位間距
@mixin grid($cloum_number,$cloum_gutter)
//總寬度 - 欄位間距 * (欄位數量-1) / 欄位數量
width: ($width - $cloum_gutter*($cloum_number - 1) ) / $cloum_number
margin-right: $cloum_gutter
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
// 欄位數量
&:nth-child(#{$cloum_number}n)
margin-right: 0
.product li
+grid(3,30px)
```
編譯結果
```css=
.wrap{
width: 960px;
margin: 0 auo;
}
.product li {
width: 300px;
margin-right: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: auto;
margin-bottom: 30px;
border: 3px solid gray;
float: left;
padding: 30px;
}
.product li:nth-child(3n) {
margin-right: 0;
}
```
## Sass顏色函數介紹
- 調暗和調亮可以用在按鈕hover滑過去的時候。
```sass=
background: #ff0000 // 原本顏色為紅色
background: darken(#ff0000,10%) //將紅色調暗10%
background: lighten(#ff0000,10%) //將紅色調亮10%
background: adjust-hue(#ff0000) // 從紅色調整其色相值，並建立一個新顏色
background: invert(#ff0000) //返回一個反相色
```
另外補充
rgb($red,$green,$blue)：根據紅、綠、藍三個值創建一個顏色；
rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值創建一個顏色；
red($color)：從一個顏色中獲取其中紅色值；
green($color)：從一個顏色中獲取其中綠色值；
blue($color)：從一個顏色中獲取其中藍色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起
## 透過index()與nth()來設計網站版本樣式控制管理
```sass
$sites:coffee,cart,cloth,tea,child //網站類型
$text-color:red,orange,yellow,green,blue //文字顏色
$bg:#fff,#000,#000,gray,#fff //背景顏色
$style: index($sites,coffee) //選擇coffee後 = $style:1
.box
background: nth($bg,$style)
color: nth($text-color,$style)
```
關鍵的設計在於第四行$style的設計，
今天我選擇了coffee的樣式後，
由於$style等於1，所以我後面寫的nth自動都會撈對應的第一種網頁樣式，
這樣的設計流程在於:
1.以後有新的版型，只要修改/引入一隻CSS，降低CSS請求數外，CSS量也變小了。
2.如果要再新增網頁版型，就再後面繼續寫逗號加上變數即可。
## 如何讓你的CSS動畫更具動態效果
- linear：平均速度
ease：很快到漸慢
ease-in：逐漸變快
ease-out：逐漸變慢
ease-in-out：快→慢→快
- 安裝方式如下：
到這個網站:
https://github.com/jhardy/compass-ceaser-easing
1.到Github頁點選右下角的Download下載下來，將stylesheets資料夾裡面的檔案放到你的Sass資料夾。
2.再到你的Sass檔案@import ceaser-easing這個下載下來的Sass檔案。
3.最後再到Demo網站瀏覽你想要的動態效果，將名稱寫進去就可以了，譬如說我要easeInOutBack的效果就打：
## Beginners Guide
If you are a total beginner to this, start here!
1. Visit hackmd.io
2. Click "Sign in"
3. Choose a way to sign in
4. Start writing note!
```javascript=
var s = "JavaScript syntax highlighting";
alert(s);
```
:::info
:bulb: **Hint:** You can also apply styling from the toolbar at the top :arrow_upper_left: of the editing area.
:::
:::success
:bulb: **Hint:** * 縮寫emmet用法 meta=vp!
:::
:::danger
:bulb: **Hint:** * 縮寫emmet用法 meta=vp!
:::
:::warning
:bulb: **Hint:** * 縮寫emmet用法 meta=vp!
:::
> [name=姓名] [time=1990] [color=#1FAF38]Read more about Gherkin here: https://docs.cucumber.io/gherkin/reference/
> Read more about Gherkin here: https://docs.cucumber.io/gherkin/reference/
>[color=red][表情符號連結](https://www.webfx.com/tools/emoji-cheat-sheet/)
---
## Appendix and FAQ
:::info
**Find this document incomplete?** Leave a comment!
:::
###### tags: `Templates` `Documentation`
JQurey學習 筆記
Sign in with Wallet
Connect another wallet