Vueは友達
ホーム
>
CakePHP
>
初心者向け。CakePHPにSCSSを導入する方法を詳しく解説

初心者向け。CakePHPにSCSSを導入する方法を詳しく解説

CakePHPにSCSSを導入する方法を詳しく解説

308 回閲覧されました

みなさんこんにちは、jonioです。

私の見た限りですがIT業界の人でscssを知らずにcssを使っている場合が結構あります。

scssを導入するとコーディングがかなりやりやすくなるのですがSCSSとは何か・導入するメリットとデメリット・ざっくりとした書き方について解説します。

CakePHPのバージョン

4.5.3で試しましたがscssを導入する為のコマンドが使える限りはどのバージョンでも導入できると思います。

scssって何？

簡単に言うとcssを書きやすくした物です。

どう書きやすくなるんだろうって思いますよね。

導入するメリットにもつながるのですが書きやすさについて解説します。

書きやすさ（導入するメリット）

例えばHTMLで下記のコードがあったとします。

<div class="parent">
  <div class="child">
    <p>子要素です</p>
  </div>
</div>

この時にpタグにcssを適用するならcssの書き方は下記になります。

.parent .child p{
  font-size:10px;
}


//別の書き方
.child p{
  font-size:10px;
}


//別の書き方
p{
  font-size:10px;
}

cssの修正を数ヶ月後にやるとこれならまだ何に対して「font-size:10px;」を適用しているか分かりますがcssの量が増えて煩雑になると何にcssを適用しているかが分からなくなる可能性が高いです。

cssではなくscssで書くと下記になります。

.parent{
  .child{
    p{
      font-size:10px;
    }
  }
}


//別の書き方
.child{
  p{
    font-size:10px;
  }
}

見たままですがHTMLの入り子構造と同じになっています。

cssの書き方だとどこにあるpタグか分かりにくいですがscssで書くとどこにあるpタグなのかが可視化され可読性が上がります。

cssで分かりにくい場合は他にもあります、レスポンシブにする時のメディアクエリの書き方です。

cssで書く場合は1つのメディアクエリの中に全て記述しないといけません。

<div class="parent">
  <div class="child">
    <p>子要素です</p>
  </div>
</div>
.parent{
  width:100px;
}
.parent p{
  font-size:16px;
}


//メディアクエリを使った場合
@media screen and (min-width:768px){
  .parent{
    width:50px;
  }
  .parent p{
    font-size:13px;
  }
}

メディアクエリを使った時とそうでない時で対象のcssを別にしないといけないから何にcssを適用しているかが見にくいですがscssを使えばかなり見やすいです。

.parent{
  width:100px;
  @media screen and (min-width:768px){
    width:50px;
  }
  @media screen and (min-width:1023px){
    width:100px;
  }
  
  p{
    font-size:13px;
    @media screen and (min-width:1023px){
      font-size:16px;
    }
  }
}

クラス・タグの1つ1つに対してメディアクエリを使うことができるのでクラスがどの画面幅になった時にどういう風にcssが変わったかが見やすくなります。

これを突き詰めるとサイト制作でよく使われるFLOCSS（Foundation・Layout・Object CSSの略）やBEM（BLOCL・ELEMENT・MODIFIER）とかをやることになりますがゴリゴリにcssを使う場面はないと思うのでそこまでやる必要はないです。

私がサイト制作をしていた時に1サイトを作るのにcssを使ったら3000行とかかかっていたのがscssに変えてから数100行に変わったので恩恵はかなりあります。

デメリット

書き方が少し変わるだけですが入り子の書き方をするだけなのでそんなにデメリットはないと思います。

注意点としてscssにはLib SASSとDart SASSがありLib SASSは2022年の10月に廃止になるはずでした。

でも利用者があまりに多かった為に廃止が中止になって先ではいつか廃止になりますと公式でアナウンスが出て現在まで廃止になっていません。

だからLib SASSを使った場合は廃止になったらDart SASSに乗り換えないといけません。

それでは導入方法を解説します。

コマンド

ターミナルでCakePHPのプロジェクトに移動して下記のコマンドを叩きます。

npm install laravel-mix --save-dev

このコマンドでLib SASSが使えるようになります。

CakePHPのプロジェクトの直下に「webpack.mix.js」を作成します。

touch webpack.mix.js

webpack.mix.jsに記述

webpack.mix.jsに下記の記述をします。

const mix = require('laravel-mix');

mix.setPublicPath('webroot/css')
   .sass('resources/scss/app.scss', 'webroot/css');

4行目の「’resources/scss/app.scss’, ‘webroot/css’」は「’resources/scssの下の階層のapp.scssに記述したscssをwebroot/cssの下にapp.cssを作成してcssに変換する」という意味です。

「webroot/css」はcssの名称の指定をしていませんが指定しない場合は「〜.scss」の.scssをcssに変えた「〜.css」が自動的に作成されます。

自分で「xxx.css」と名前を自分で決めることももちろんできます。

まとめると下記です。

  • webroot/cssの場合 : 〜.scssのscssをcssにしたファイルが自動的に作成される
  • webroot/css/〜.cssの場合 : 〜.scssをcssに変換して〜.cssに保存される

上記の例は1つのscssファイルをcssファイルに変換していますが複数のscssファイルをcssファイルに変換することもできます。

その場合は下記の書き方になります。

const mix = require('laravel-mix');

mix.setPublicPath('webroot/css')
   .sass('resources/scss/app.scss', 'webroot/css')
   .sass('resources/scss/xxxxx.scss', 'webroot/css/xxxxx.css');
   //下記に5行目と同じ書き方をすればいい

セミコロン（;）は最後につけます。

「CakePHPのプロジェクト > config >resources」の下の階層にscssフォルダを作成してその下の階層にapp.scssを作成します。

サンプルで下記の記述をします。

div{
  p{
    font-size:10px;
  }
}

package.json

CakePHPのプロジェクト直下にある「package.json」に下記の記述をします。

{
  "devDependencies": {
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.49",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.71.1",
    "sass-loader": "^12.6.0"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  }
}

scssをcssに変換

下記のコマンドを叩きます。

npm run watch

これはscssを変更するたびに自動的にcssに変換するコマンドです。

万が一scssを変更するたびに手動でcssに変換したい場合は下記のコマンドを叩きます。

npm run dev

まれに原因不明のエラーになる場合がありますがもしエラーになったらもう一度同じコマンド叩くと変換ができる場合があります。

変換されているか確認

app.cssを確認すると下記になりscssがcssに変換されたのを確認できます。

div p {
  font-size: 10px;
}