---
# System prepended metadata

title: Sass
tags: [Documentation, Templates]

---

---
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學習&nbsp;筆記
