![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
SCSSが使えるようになりコーディング速度、保守性が爆上がりした件についてテンションが上がっている私ですが前回は変数や応用の@mixinについてご紹介しました。
今回は実際にSCSSを使用する時の環境や、方法をご紹介できればと思います。
使えると便利なSCSSですがいざ拡張子.scssのファイル内にコードを書いて、そのまま表示できるかと言われればそうは問屋が卸さないんですね。
HTMLから読み取り実際にスタイルを適用できるのは拡張子が.cssファイルのみ。
そうなってしまうと、せっかくSCSSにファイルに書いた膨大なコードが無駄になるの!?と思ったそこのあなた!安心してください。ちゃんと方法はございます。それが「コンパイラ」。これを使うことによりSCSSに記述したファイルを自動でCSSに変換してくれるのです。
コンパイラとは、コンピュータ・プログラミング言語の処理系の一種で、高水準言語(今回だとSCSS)によるソースコードから、元のプログラムよりも低い水準のコード(今回だと)に変換するプログラムである。
さて、コンパイルをするという事は環境構築を行わなければなりません。
環境構築と言うとパスを設定したり数あるエラーをくぐり抜けて・・・
あの面倒くさい作業です。。。
ですので今回は割りと簡単に出来るコンパイラの環境構築方法をご紹介しようと思います
使ってる方も多いと思われるテキストエディタ「VS code」。
このエディタを使うと簡単に環境構築ができてしまいます。
まずVS codeのプラグイン『Live Sass Compiler』をインストールします。
手順は以下の通り
1.VSCodeの拡張機能のメニューを開く
2.プラグイン『Live Sass Compiler』を検索する
3.プラグインのインストールを実行する
コンパイルの監視は、Live Sass Compilerのインストール後にVSCodeの画面下部に追加される【Watch Sass】というボタンをクリックするとスタートさせる事が出来ます。
【Watch Sass】のボタンをクリックするとボタンの状態が「Watching..」といった様に変わります。以降は「Watching..」の状態でSCSSファイル(.scss)を作成したり内容を変更すると、都度コンパイルが実行される様になります。
この状態でSCSSファイルへコードを書いていき保存をすると自動にCSSファイルへと変換されるという仕組みです。
いかがでしたでしょうか?
使えると便利になるSCSSは導入コストが多少あるかと思いますがそれの見返りは絶大な生産性を生みます。皆さんも是非SCSSを使いこなし快適なコーディングライフを過ごしましょう!
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?