Sass

ここではScss記法のことをSassと呼んでいます。(Sass記法も存在はします)

SassでできることについてはSassを使いたくなる!便利機能をまとめてみました。あたりを読んでください。

gulpを導入する

  • Node.jsをインストール
  • gulpfile.js と package.json ファイルを置いた階層で下記のコマンド使う
    npm install -g gulp-cli
  • インストールされていれば下記コマンドでバージョンが表示される
    gulp -v
  • scssをコンパイルしたいフォルダで
    npm install
  • あとはgulpタスクを実行する
    gulp sass

Preprosを導入する

  • 最近はgulp一択なのであまり導入することはなくなった。ただgulpがまだ難しく感じてしまう人が多い場合は使う手もありかも。
  • 2016年ぐらいまではよく使われていたコンパイラ。Prepros
    • ver5以降のFree版はポップアップが頻繁に出てきてしまうので、無料で使うなら4.2推奨。software.informer

基本的な操作は下記の記事を参考に。

大雑把な使い方は

  1. インストール後、「ADD NEW PROJECT」でscssファイルがある場所を指定(ここではstyle.scssがあるとする)
  2. 認識されたscssファイルの「→css/style.css」をクリックしてCSSの出力先を設定
  3. 「Auto Compile」にチェックを入れる
  4. 好みでOutput Styleを選択する。個人的に「Compact」が好み。
  5. 以降、style.scssを更新すればstyle.cssが出力される。

#dcdcdcをPreprosでコンパイルするとgainsboroにされてしまう。

こういうのやめさせられないか?と思っているうちにPreprosが廃れていた。

background: #{'#dfdfdf'};

一応これで解決だったはず。

emEditorFreeでscssファイルを編集しやすくする

基本

  • ツール>設定の選択>設定の定義>CSSのプロパティを開く
  • 「関連付け」タブで拡張子SCSSを追加する

コメントを見やすく

  • 「強調(2)」タブで、「行コメント(L)」に「//」と入力。

参考


最終更新: 2019-01-05 (土) 17:16:23