3Feb2019

EspressoでSASS、SCSSの編集をリアルタイムプレビュー

公開日：2019/02/03
更新日：2019/02/03
投稿者：n bit

SASSや、SCSSの編集時1回ずつビルドしてブラウザの更新をしているのでは時間がかかりすぎます。そのためSASSや、SCSSの編集内容をリアルタイムでプレビューできるようにするEspressoを利用したセットアップ方法を解説します。

この記事は約分で読めます。（文字）

EspressoでSASS、SCSSの編集をリアルタイムプレビューして爆速コーディング

WordPressやDjangoのようなCMSのCSSを編集するときCSS編集結果のリアルタイムプレビューで絶大な力を発揮するEspresso。

CSSを編集しFTPでアップロード、最後はブラウザを更新して確認するといった流れは回数が増えるとロスの多い作業です。これがSASSやSCSSになるとビルド作業まで増えてとっても非効率。コードの編集を効率化するためにSASSやSCSSがあるのにこれでは本末転倒ですね。

EspressoはSASSやSCSSのリアルタイムプレビューにも対応していますので利用すればこれらの問題は一気に解決。EspressoでSASSやSCSSの編集をリアルタイムプレビューさせて爆速コーディングを体験しましょう。

EspressoでSASS、SCSSの編集を
リアルタイムプレビューする方法

EspressoでCSSをリアルタイムプレビューする方法はとっても簡単ですがSASSやSCSSをリアルタイムプレビューするのは少し特殊な設定が必要となります。SASSやSCSSをリアルタイムプレビューするための手順をステップ毎に解説していきましょう。

ステップ1：作業プロジェクトの準備

先に作業で利用するためのhtml、CSS、SCSSファイルとプレビュー用のディレクトリを用意します。今回は説明用でシンプルに3つのファイルだけを作成しました。

ファイルとディレクトリの構成

css_preview

├── css

│   └── test.css

├── css.esdynamo

│   └── test.scss

└── index.html

1：htmlファイル

1つ目はCSSを反映するためのhtml。

index.html

ファイル内のコードはCSSの読み込みを指定しただけのシンプルなものです。

<html lang="ja">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/test.css">

</head>

<body>

    <p class="frame-box-001">ダミーテキストです。</p>

</body>

</html>

2：CSSファイル

2つ目はSCSSからビルドされたCSSファイル。CSSファイルは『CSS』と言うディレクトリの中に保存しています。内容は何も記述しなくても大丈夫です。

css >test.css

3：SCSSファイル

3つ目はCSSファイルを生成する元となるSCSSファイル。SCSSファイルはCSSを保存しているディレクトリの名称の後に『.esdynamo』とつけたディレクトリ内に保存します。このディレクトリ名が正しくない場合は正常にリアルタイムプレビューされません。正しい名称がついているか確認しておきましょう。

css.esdynamo >test.scss

内容は文字コードの指定とhtmlに適用したいCSSの内容を記述します。下記のページで解説した括弧デザイン用のCSSだけを1つ記述しました。

@charset "UTF-8";



$bar-style: solid; 

$bar-size: 2px;

$bar-color: #000000;

.frame-box-001 {

    padding: 30px;

    position: relative;

    &::before, &::after {

        content:'';

        width: 30px;

        height: 30px;

        position: absolute;

    }

    &::before {

        border-left: $bar-style $bar-size $bar-color;

        border-top: $bar-style $bar-size $bar-color;

        top: 0;

        left: 0;

    }

    &::after {

        border-right: $bar-style $bar-size $bar-color;

        border-bottom: $bar-style $bar-size $bar-color;

        bottom: 0;

        right: 0;

    }

}