Sass

SCSS寫法

    .menu{
        li{
          color:red;
        }
        h2{
          color:blue;
          a{
        color:green;
        &:hover{
            color:pink;
        }
        &:active{
            text-decoration:none;
        }
          }
        }
    }

Variables 變數

$link-color: #aaa; //設定變數
$base-color: #008000;
$font-m: 18px;
$font-l: $font-m * 1.5;
$font-family-base: "santa,sans-serif"; //字串管理

.header {
    a{
    color: $link-color; //代入
    font-size: $font;
    &:hover{
        color: darken($base-color,20%);//比主色深
    }
    &:active{
        color: lighten($base-color,30%);//比主色淺
    }
    }
    h1{
        font-size: $font-l;
        font-family: $font-family-base;
    }
}

結構

|
/-all.scss
|
|-base
|   |-_reset.scss
|   |-_base.scss
|   |-_fontStyle.scss   //字型基礎設置
|   |-_color.scss
|
|-components
|   |-_button.scss
|   |-_dropdown.scss
|   |-_alert.scss
|
|-layout
|   |-_header.scss
|   |-_footer.scss
|   |-_nav.scss
|
|-pages
|   |-_index.scss       //放只有這個頁面才有的樣式
|   |-_content.scss
|
|-themes
|   |-_theme.scss       //如果有黑白版型，可以在這裡區分
|
|-utils                 //工具類
|   |-_helpers.scss
|   |-_mixin.scss
|   |-_function.scss
|
|-vendors               //放外部第三方套件
|   |-_bootstrap.scss
|   |-_swiper.scss

@import - 匯入

all.scss

//base
@import 'variable';
//utils
@import '_helpers';
//components
@import '_button';