第2章 Sassの利用環境を整えよう2-2 黒い画面でSassを使ってみようSample Code

実際に黒い画面を使ってみよう

コマンドを入力してみよう

1
node -v

現在地（カレントフォルダ）に移動する

1
cd Desktop

1
cd ../ 　 # 1つ上の階層に
2
cd ../../ 　 # 2つ上の階層に
3
cd / 　 # ドライブのルートに移動

1
cd ~  # ホームに移動

1
cd /d D:¥Users¥Public¥Pictures #DドライブのPicturesフォルダに移動

1
pwd

1
cd

Sassの開発環境を作成しよう

package.json の作成

1
npm init -y

1
{
2
  "name": "02_sample",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "keywords": [],
10
  "author": "",
11
  "license": "ISC"
12
}

.scssファイルを作成

1
mkdir sass

.scssファイルを作成

1
touch sass/sample.scss

1
type nul > sass/sample.scss

Sassをインストールする

1
npm install --save-dev sass

1
  "devDependencies": {
2
    "sass": "^1.79.3"
3
  }

インストールを確認する

1
npx sass

Sassをコンパイルしよう

Sassファイルを用意する

1
#main {
2
  width: 600px;
3
  p {
4
    margin: 0 0 1em;
5
    em {
6
      color: #f00;
7
    }
8
  }
9
  small {
10
    font-size: small;
11
  }
12
}

npm-scriptsからSassをコンパイル

1
  "scripts": {
2
    "test": "echo \"Error: no test specified\" && exit 1"
3
  },

1
  "scripts": {
2
    "sass": "sass ./sass:./css",
3
  },

1
npm run sass

Sassファイルの更新を監視する（コンパイルする）

1
#main {
2
  width: 600px;
3
}
4
#main p {
5
  margin: 0 0 1em;
6
}
7
#main p em {
8
  color: #f00;
9
}
10
#main small {
11
  font-size: small;
12
}
13

14
/*# sourceMappingURL=sample.css.map */

ソースマップの出力を設定する

1
  "scripts": {
2
    "sass": "sass ./sass:./css --no-source-map",
3
  },

SassとCSSの入力先:出力先を指定する

1
  "scripts": {
2
    "sass": "sass ./sass:./css",
3
  },

1
  "scripts": {
2
    "sass": "sass input.scss:output.css",
3
  },

アウトプットスタイルを指定する

1
  "scripts": {
2
    "sass": "sass ./sass:./css --style=スタイル名",
3
  },

アウトプットスタイルの種類

Expanded

1
  "scripts": {
2
    "sass": "sass ./sass:./css --style=expanded",
3
  },

1
#main {
2
  width: 600px;
3
}
4
#main p {
5
  margin: 0 0 1em;
6
}
7
#main p em {
8
  color: #f00;
9
}
10
#main small {
11
  font-size: small;
12
}

Compressed

1
  "scripts": {
2
    "sass": "sass ./sass:./css --style=compressed",
3
  },

1
#main{width:600px}#main p{margin:0 0 1em}#main p em{color:red}#main small{font-size:small}/*# sourceMappingURL=sample.css.map */

圧縮用のスクリプトを作ろう

1
  "scripts": {
2
    "sass": "sass ./sass:./css",
3
    "min:sass": "sass ./sass:./css --style=compressed --no-source-map"
4
  },

1
npm run min:sass

ファイルの更新を監視する

1
  "scripts": {
2
    "sass": "sass ./sass:./css",
3
    "watch:sass": "sass ./sass:./css --watch"
4
  },

1
npm run watch:sass

サンプルコード一覧へ