Sass / Scss 入門

Sass/SCSS 是什麼

Official Site: sass-lang.com

1. Dart Sass
2. LibSass* ➡ node-sass
3. Ruby Sass

CSS 的超集（superset）

• 檔名為 *.scss
• 編譯成 CSS 瀏覽器才看得懂
• 為了開發與管理（ex: 巢狀、變數、分檔）
• 可配合函式庫使用（Compass、Bourbon）

在 CSS 的基礎上增加功能，由於是超集，在 SCSS 內可以直接寫 CSS，不會有錯誤（舊專案直接把 *.css 改成 *.scss 就可以了）

Sass vs. SCSS

Syntactically Awesome StyleSheets

          .block
            width: 600px
            height: 300px
            .text
              color: red
          

Sassy CSS (Sass version 3)

          .card {
            background: #EFEFEF;
            .title {
              font-size: 1.2em;
            }
          }
          

編譯！？

編譯（compile）是什麼？

原始語言（便於編寫與閱讀）

目標語言（電腦執行效率高）

編譯環境建置：懶人包

先安裝 docker（mac、windows）

然後依照這個專案的說明來使用

編譯環境建置：詳解

Gulp

自動化建置工具

            // 設定檔範例：gulpfile.js
            gulp.task('css', () => {
              gulp.src('src/sass/**/*.scss')
                .pipe($.plumber())
                .pipe($.sass.sync({
                  outputStyle: 'nested', // expanded, nested, compact, compressed
                  precision: 10,
                  includePath: ['.'],
                }).on('error', $.sass.logError))
                .pipe($.autoprefixer({ browsers: ['last 2 versions'] }))
                .pipe(gulp.dest('dist/css')) // output folder
                .pipe(browserSync.stream())
                .pipe($.notify("Compile Sass Complete!"))
            });
          

GUI 介面 vs. CLI 介面
（大部分前端工程師使用 CLI，因為容易調整設定，且可以配合其他工具使用）

GUI 介面

• CodeKit (paid)
• Compass.app (paid, open source)
• Ghostlab (paid)
• Hammer (paid)
• Koala (open source)
• LiveReload (paid, open source)
• Prepros (paid)*
• Scout-App (free, open source)

CLI 介面

• 直接用 sass cli

  
                # terminal
                sass in.scss out.css
                

• 用自動化建置工具
  • Gulp*
  • Webpack

安排檔案架構

            // your project folder
            // src/sass => dist/css
            .
            ├── README.md
            ├── dist
            │   ├── assets
            │   │   ├── backgrounds
            │   │   ├── icon
            │   │   └── materials
            │   ├── css
            │   │   ├── layout
            │   │   │   ├── about.css
            │   │   │   ├── contact.css
            │   │   │   └── index.css
            │   │   └── main.css
            │   ├── index.html
            │   ├── js
            │   │   └── bundle.js
            │   ├── module
            │   │   └── card-case.html
            │   └── partial
            │       ├── default-script.html
            │       ├── footer.html
            │       └── head.html
            ├── gulpfile.babel.js
            ├── index.html
            ├── package-lock.json
            ├── package.json
            └── src
                ├── assets
                │   ├── backgrounds
                │   ├── icon
                │   └── materials
                ├── js
                │   ├── main.js
                │   └── utils
                │       ├── index.js
                │       └── toggle-active.js
                ├── sass
                │   ├── _base.scss
                │   ├── _font.scss
                │   ├── _variable.scss
                │   ├── layout // 分頁面
                │   │   ├── about.scss
                │   │   ├── contact.scss
                │   │   └── index.scss
                │   ├── main.scss
                │   ├── mixin // 共用常用的邏輯
                │   │   ├── _assets.scss
                │   │   ├── _breakpoint.scss
                │   │   └── _mixins.scss
                │   ├── module // 模組化的元件
                │   │   ├── _card-case.scss
                │   │   ├── _developing.scss
                │   │   ├── _footer.scss
                │   │   ├── _header.scss
                │   │   └── _mask.scss
                │   └── vendor // 第三方套件
                │       └── normalize-scss
                └── views
                    ├── index.pug
                    ├── module
                    │   └── card-case.pug
                    └── partial
                        ├── default-script.pug
                        ├── footer.pug
                        └── head.pug

          

7-1 pattern

gist: sass-7-1-pattern.scss

基礎語法

@-rules

@-rules

補充：資料型態

小作業

• Credit Card Form
• Cards Menu Concept *

如果覺得不夠...

• Toggle Button *