Kite的筆記
0%

SASS筆記

發表於 更新於 分類於
1.4k 3 分鐘

1. SASS原理

2. SASS 提供兩種寫法

2.1. SASS 與SCSS 差別

SASS利用空白的方式縮行(2個空白或1個tab)，代表下一個階層的內容，跟python的程式風格一樣的概念

3. 編譯軟體

  1. 軟體編譯
    • Prepros
  2. gulp or webpack 打包工具
    • 使用command line方式打包，會用到js語法
  3. 編輯器內鍵的插件
    • VSCode
      • Live Sass Complier

3.1. &符號使用

3.2. 變數

3.2.1. 宣告變數在最前面

3.2.2. Bootstrap也有在使用

3.2.3. 自我練習

1
2
3
4
5
6
7
8
9
10
11
12
$font-m:32px;
$font-l:$font-m*1.2;
$font-s:$font-m*0.8;
.a{
    font-size: $font-m;
}
.b{
    font-size: $font-s;
}
.c{
    font-size: $font-l;
}

3.3. 拆檔

Bootstrap 使用拆檔功能

3.3.1. 自我練習

_index.scss

1
2
3
4
5
6
7
8
9
10
11
12
$font-m:32px;
$font-l:$font-m*1.2;
$font-s:$font-m*0.8;
.a{
    font-size: $font-m;
}
.b{
    font-size: $font-s;
}
.c{
    font-size: $font-l;
}

_reset.scss

1
2
3
body{
    margin:0;
}

all.sass

1
2
@import 'reset';
@import 'index';

3.4. mixin用法

將常用或記不起來的css包裝成@mixin方式宣告，接著在要用的地方使用@include，
當然在bootstrap有一個專門的mixin資料夾存放這些設定

3.4.1. 簡單include方式

3.4.2. 函式方式

3.5. 循序漸進優化網頁架構

3.5.1. 第一次寫SCSS建議結構(all.scss)

1
2
3
4
5
@import "mixin";//所有全域變數與mixin
@import "reset";//reset.css
@import "index";//首頁
@import "page/..";//內頁

3.5.2. 接著可以這樣寫(all.scss)

1
2
3
4
5
6
@import "mixin";//所有全域變數與mixin
@import "reset";//reset.css
@import "layout";//共同框架，第一層
@import "module";//button,form,table
@import "page/index,page1,page2";

舉例來說，將button 跟video 分開撰寫
然後在每一個頁面都有各自的css

3.5.3. @mixin+@cotent設計響應式網站超方便

先設計好每個裝置的斷點，內容部分填寫@content

在應用部分直接@include() 裡面內容填寫相關設定