■目次
導入動作確認メモバージョンアップ
■導入
※今ならGulpやWebpackからコンパイルする方がいいかも Gulpによる構築は Gulp.txt を参照 Koala http://koala-app.com/ Sass(SCSS)+Koalaを使ってみよう。導入編 http://mizukazu.minibird.jp/sass-scss-koala/ フリーのSass,LessコンパイラKoala http://blog.sou-lab.com/koala/ KoalaというSCSS(SASS)開発補助ツールを使ってWordPressテーマの開発効率を手軽にアップする方法 http://nelog.jp/wordpress-sass-compass-gui これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG https://liginc.co.jp/web/html-css/css/56599 CSSの常識が変わる!「Compass」の基礎から応用まで! | 株式会社LIG https://liginc.co.jp/designer/archives/11623
■動作確認
sass-test/index.html を作成し、以下の内容を記述する
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>テスト</h1> <p>テスト。</p> </body> </html>
sass-test/sass/style.scss を作成し、以下の内容を記述する
// ネストのテスト div { p { font-weight: bold; } } // 変数のテスト $fontColor: #525252; h1 { color: $fontColor; }
Koalaの「+」から sass-test フォルダを登録すると、以下のファイルが作成された。 SASSファイルを編集すると、CSSファイルにも反映された。(初期設定では自動コンパイルで無いかも?後述の設定内容を確認) 他にもコンパイル対象にしたいファイルがあれば、すべて登録する(勝手に登録されるかも?) sass-test/css/style.css sass-test/css/style.css.map Koalaに表示されたSCSSをクリックするとコンパイル設定が表示される。以下の設定にするか 他の人が編集していたファイルなら、その設定に合わせておくのが無難 ・自動コンパイル(チェック) ・Source Map(チェック) ・アウトプットスタイル:compressed(選択)
■メモ
Sassで作成されたデータを引き継いだときに行った作業 Sassフォルダに実際にコーディングされたものがある ディレクトリを丸ごとKoalaにドラッグ&ドロップすると、scss/style.scssだけが一覧に表示された scss内のファイルを編集すればcss内に反映されるようになった (起動させてから少し待ったほうがいいかも。Koalaを閉じるとSassの変換も止まるので、ウインドウは開いたままにする) あとはひたすらscssファイルを編集すればいい 作成されたCSSファイルに行数とパスが含まれている場合、 Koala側の各プロジェクトのコンパイル設定画面のオプションで「Line Comments」のチェックを外す git管理する場合、scssやconfig.rbも含めて公開ディレクトリ内に置けば良さそう 「.sass-cache」を管理対象外にすれば良さそう JavaScriptは直接編集する。画像は直接images内に配置する
■バージョンアップ
最新版のインストーラー(KoalaSetup.exe)をダウンロードし、 インストール済みの場所に上書きでインストールした 設定もクリアされずに残っていた