mac 安裝sass命令行編譯環境

1.安裝ruby

    使用homebrew安裝ruby。

    命令：brew install ruby

2.在~/.bash_profile中加入ruby的環境變量，替換系統本身ruby

export PATH=/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/2.5.0/bin:$PATH
export LDFLAGS=-L/usr/local/opt/ruby/lib
export CPPFLAGS=-I/usr/local/opt/ruby/include
export PKG_CONFIG_PATH=/usr/local/opt/ruby/lib/pkgconfig

3.使用ruby的包管理gem安裝sass相關依賴

gem install sass
gem install compass

4.即可是喲sass命令編譯scss文件

sass src/theme/default.scss src/theme/default.css

編譯前：

// 表單
.ibiz-form {

    .ibiz-form-button {
        text-align: center;
    }

    .ibiz-form-item {

        .stars {
            color: red;
        }

        .ibiz-form-item-input {
            text-align: right;
        }

        .ibiz-form-label {
            text-align: right;
        }
    }
}

// 門戶
.ibiz-view-content.ibiz-portal {

    .ibiz-portal-card {
        margin: 0;

        .ibiz-portal-card-content {
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}

// 快捷工具欄
.ibiz-quick-toolbar {
    display: flex;

    .ibiz-quick-toolbar-item {
        flex-grow: 1;
        margin: 0px 3px;
    }
}

// 佈局面板
.ibiz-layout-panel {

    .ibiz-layout-panel-container-grid,
    .ibiz-layout-panel-container-row {
        padding: 0px;
        height: 100%;
        width: 100%;
    }

    .ibiz-layout-panel-container-col {
        height: 100%;
        padding: 0px;
    }

    .ibiz-layout-panel-container-flex {
        width: 100%;
        height: 100%;
        display: flex;
    }
}

// 樹部件
.ibiz-tree {
    .ibiz-treenode {
        padding: 15px;
        border-bottom: 1px solid #ddd1d1;
    }
    .ibiz-tree-button {
        font-size: 16px;
        background: #fff;
        color: #3899fa;
    }
    .icon-inner {
        padding-top: 3px;   
    }
}

編譯後：

.ibiz-form .ibiz-form-button {
  text-align: center; }
.ibiz-form .ibiz-form-item .stars {
  color: red; }
.ibiz-form .ibiz-form-item .ibiz-form-item-input {
  text-align: right; }
.ibiz-form .ibiz-form-item .ibiz-form-label {
  text-align: right; }

.ibiz-view-content.ibiz-portal .ibiz-portal-card {
  margin: 0; }
  .ibiz-view-content.ibiz-portal .ibiz-portal-card .ibiz-portal-card-content {
    overflow-y: auto;
    overflow-x: hidden; }

.ibiz-quick-toolbar {
  display: flex; }
  .ibiz-quick-toolbar .ibiz-quick-toolbar-item {
    flex-grow: 1;
    margin: 0px 3px; }

.ibiz-layout-panel .ibiz-layout-panel-container-grid,
.ibiz-layout-panel .ibiz-layout-panel-container-row {
  padding: 0px;
  height: 100%;
  width: 100%; }
.ibiz-layout-panel .ibiz-layout-panel-container-col {
  height: 100%;
  padding: 0px; }
.ibiz-layout-panel .ibiz-layout-panel-container-flex {
  width: 100%;
  height: 100%;
  display: flex; }

.ibiz-tree .ibiz-treenode {
  padding: 15px;
  border-bottom: 1px solid #ddd1d1; }
.ibiz-tree .ibiz-tree-button {
  font-size: 16px;
  background: #fff;
  color: #3899fa; }
.ibiz-tree .icon-inner {
  padding-top: 3px; }