Replace Sass with CSS

[hi85gh]

47 の対応

Sass への依存をなくし PostCSS に移行しました。
プラグインとしてパッケージを追加してはいませんが、 Nuxt.js でデフォルトサポートしていた postcss-import の機能を利用しています。
（ layouts/*.vue から assets/css/common.css の読み込みで利用）

1. Sass の変数を CSS Custom Properties に置き換え

assets/css/admin.scss の変数はすべて assets/css/common.css の :root に移動しています。
名前の変換ルールは以下の通りです。

Sass : $VARIABLES_NAME → CSS : --variables-name

また、 .vue 内に記述されていた以下の Sass の変数も移動しています。

// components/molecules/CommitBoard.vue
$COMMENT_CIRCLE_SIZE: 32px;
$COMMIT_MAKER_HEIGHT: 102px;
$COMMIT_GRAPH_LEFT: 35px;

// components/molecules/Members.vue
$OPEN_ICON_HEIGHT: 50px;

// components/organisms/FileView.vue
$TOP_BAR_HEIGHT: 70px;
$VIEWER_WIDTH: 650px;
$COMMIT_MAKER_HEIGHT: 60px;

// components/organisms/FolderView.vue
$HERDER_HEIGHT: 100px;
$PADDING: 30px;
$ITEM_HEIGHT: 40px;

// components/organisms/UploadDialog.vue
$DROP_COLOR: #409eff;
$DROP_PADDING: 80px;

2. ネストの展開

Sass のネストは先祖のセレクタを構造通りにすべて記載する形で手動展開しています。
ネストを多用しそうであれば postcss-nesting を追加したいと思います。

3. Deep Selectors の変換

Sass と CSS で指定方法が異なるため変更しています。
components/organisms/FolderView.vue でシンタックスエラーとなるため先頭に .dialog を追加しています。

- /deep/ .v-modal,
- /deep/ .el-dialog__wrapper {
-  top: $TITLEBAR_HEIGHT;
+ .dialog >>> .v-modal,
+ .dialog >>> .el-dialog__wrapper {
+  top: var(--titlebar-height);