イイダリョウのブログ。CSSGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパイルしました。今回はAltCSSのSass(SCSS)をコンパイルします。クモのようにコツコツと※参考:メタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)まとめqiita.comフォルダ作成→移動→package.json作成→Gulpインストール今回からAltCSSに入る。メタ言語選定の記事でも書いたようにAltCSSはSass(SCSS)が主流なのでこちらにトライする。クモのようにコツコツとまずは準備編。ここまでは前回までとほぼ同じ手順。-vコンパイルを実行したいフォルダを作成する。今回は「gulp_sass」とする。gulpパッケージ(gulp-sass)をインストールするここから固有の内容に入る。以前、Gulpインストールでお世話になったこちらの記事にGulpのインストールもあったので参考にする。MEDIASass(SCSS)のコンパイルには「gulp-sass」をインストールする。gulp-sassインストールに成功するとpackage.jsonに追記される。}ファイルを作る「gulp_sass」フォルダにファイルを追加する。.pipe(gulp.dest('css'));});変数gulpでgulpを読み込む変数sassでgulp-sassを読み込むgulp.task()メソッド実行。引数はsass、第二引数は無名関数(引数はなし)無名関数の中はgulp.src().pipe().pipe()とチェーンになっているsrc()の引数はcommon.scssのパス一つ目のpipe()の引数はsass()で、中にオプションのoutputStyleキーを設定(値はexpanded)二つ目のpipe()の引数はgulp.dest()でcssフォルダに吐き出すこれまでと全体的な構成は変わらない。'expanded'は一番最後の閉じブロック}を改行させる設定。参考記事にあるようにgulp.task()の第一引数をdefaultにするとコンパイルのコマンドがgulpだけで済む。以前、AltCSSの記事で書いた「SCSS」の内容を元に。CodePen.まずindex.htmlを作成。class="lede">CodepenのSettingの旅CSS編第2回。<p>SCSSもdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。ん?この書き方はLESSとほぼまったく同じだ。<p>おそらくLESSにはないSCSS専用の機能。class="bikou">この尾行欄につけている「※」印は「.bikou:before」ではなく「&:before」だけで済んでいる。</section></body></html>CodePenのコードの外側にdoctype、htmlタグ、headタグ、bodyタグを追加。href="css/common.css">まだcommon.cssが存在しないのでスタイルは当たっていない。scssファイルを作成HTMLと同様、「メタ言語」の記事の「SCSS」から。クモのようにコツコツとcommon.scssを作成。"※";}最後にということでSass(SCSS)に成功しました。参考記事では自動コンパイルの方法も書かれています。手動ではなくscssファイルを保存するたびにcssファイルが書き換わる。AltCSSはここまでにして置いて、次回はAltJS編。TypeScriptのコンパイルにトライします。09:52Tweet関連記事2019-12-06【HTML】EJSをGulpでコンパイルしてみる(SyntaxErrorでちょい苦戦)Gulpの続きです。前回はHTMLテンプレートエンジンのPugをGulpで...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。...2019-11-21Gulpインストールでけった〜!!(package.json作り忘れてた。)メタ言語のコンパイル環境を作る!続きです。前回、Gulpのイン...2019-11-14【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討したメタ言語のコンパイル環境を作る!続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。