0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SASSって何だ?〜環境構築

Last updated at Posted at 2020-05-15

#はじめに
初学者である私が学習内容を脳みそに定着させるために記述している記事です。

※Mac利用前提。
※内容に誤りがある場合はご指摘いただけますと幸いです。
※引き続き学習を継続しつつ内容を更新していきます。

#SASSとは
簡単に言うと、「ハイスペックなCSS」です。
CSSをより効率的に書くための便利なもので、「ライブラリ」の中の一つ。
※ライブラリ=「開発のための便利ツール」という認識です。

正直、SASSがなくてもCSSだけでWEBサイトは作れます。


で、これを使うための「環境」を作ってあげる必要があります。

今回はSASSを使うための最低限の内容をまとてみます。

#SASSでできること
SASSにはいろいろ便利なことがあるのですよ。

いくつかピックアップしますと…
・ネスト(入れ子)の記述ができる。 -> 見やすくなるし、メンテナンスもしやすくなるのです。
・ファイルを分けることができる。 -> 管理がしやすくなるのです。
・独自のテンプレート(mixin)や変数、関数が作れる -> 効率が良くなります。
・四則演算が使える。

…などなど。

環境構築のために必要なこと

###SASSの環境を作るには、npmもしくはyarnが必要。
今回はyarnを使用します。
※yarn:各種ライブラリのパッケージマネージャとのこと。
 ライブラリの追加やインストールをしてくれるものです。
※npmと基本的な機能は同じですが、Yarnの方が新しい技術。

###yarnのインストール
こちらからインストールしてください。

※Yarnインストールの前提としてHomebrewが必要。

#SASSを使うためのライブラリ(便利ツール)をインストール

###①まずはコマンド画面にてこれを実行。

コマンド
yarn init

###②下記のような表示が出ます。

コマンド
yarn init v1.17.3
question name (portfolio): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json

 //questionは1行ずつ質問形式で表示される
 // -> ローカルで使用する場合は、基本的に全てそのままEnterでOK。(公開する場合は設定した方が良さげ)
 // -> package.jsonファイルが作成される。

###③プロジェクトに対してパッケージの追加をする

コマンド
yarn add [パッケージ名]

 // -> package.jsonにも自動で追記されていく。

###④開発時のみ使用するパッケージを追加したい場合

コマンド
yarn add [パッケージ名] --dev

 // -> package.jsonのdevDependenciesに追加される。

###⑤package.jsonが最初から用意されている場合

コマンド
yarn -i
 //もしくは
yarn install

 // -> これだけでpackage.jsonに登録されている内容が自動で追加される。
 //  (プロジェクトを複数人開発する際に便利)

#scriptsでコマンドを定義していく

※ここではnode-sassとnodemonというパッケージを追加して、それを使用するためのコマンドを登録する方法を記載します。

###①scriptsを記載する

package.json
{
  "name": "portfolio",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
    //ここから ↓
  "scripts": {
    "build-css": "node-sass --include-path scss scss/style.scss css/style.css",
    "watch": "nodemon -e scss -x \"yarn build-css\""
  },
    //ここまで ↑
  "devDependencies": {
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4"
  }
}

上記の記載だと以下のよう内容のなコマンドが使えるようになります。
・「build-css」コマンド:同階層にあるsassフォルダ内のstyle.scssのファイルを更新すると、同じく同階層のcssフォルダ内のstyle.cssのファイルにコンパイルしてくれます。

・「watch」コマンド:style.scssが更新されると、自動的に「yarn build-css」が実行される。

##コマンド実行方法
「build-css」コマンドを実行する場合

コマンド
yarn buid-css

「watch」コマンドコマンドを実行する場合

コマンド
yarn watch

##備忘録
sassファイルが複数に別れる場合、「node-sass-globbing」というパッケージも便利なようです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?