PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い...
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い...
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや?」と思ったかたはいないでしょうか? 他の画像に同じことをしてもアイコンが出てこないのもあるし制作者の意図なのか紛らわしいですね。 ク...
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができる リストのような...
sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作...
webpackを使用してjsファイルを集束(バンドル)することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。 そうならない為にひと手間加えてより確実に用意したjsコードが実行...
node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。 先発のCSSプリプロセ...
CSSに用意されているレイアウト用プロパティdisplay:flexですがいままで未対応だったIE11のサポート終了にともないもっと気軽に使用することができるようになりました。 しかし、設定の仕方で意図しない見た目になる...
前回までで次のようなことをやってきました。 nunjucks でhtml生成 stylus でcss生成 imagemin で画像圧縮 javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時...
npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。 ただ画像ファイルの処...
npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。 前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。 今回はファイル更新を感知して...