at html5j, 61th.
cssnext 今日ではSassやStylusなどaltCSSを用いたウェブデザインは主流になりつつあるが, 一方で, 次世代CSSではaltCSSで実装されているような様々な機能追加が検討されている. そこで次世代CSSを先取りするcssnextと次世代CSSで足りない機能をPostCSSのプラグインを用いて補う方法について紹介する. これらのツールを用いると, CSSの枠組みの中で閉じた開発が行えて良いのではないかと思う. 最近のウェブデザイン事情と次世代CSS 最近のウェブデザインでは, SassやStylusなどのaltCSSと呼ばれるメタ言語を用いてスタイルを記述し, それぞれのプリプロセッサを用いてCSSを生成するような開発スタイルが多くなってきた. Twitter BootstrapやFoundationなど, 主要なCSSフレームワークはSassを用いて開発が行われており,
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか? PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
cssnextをgulpで使ってみたかったので、gulp-cssnextを導入してみたのですが、プラグインの追加方法でちょっとつまづいたので、経緯と解決法をまとめてみました。 基礎知識 cssnextは、CSSの先行実装を、現状のブラウザが解釈できるCSSに変換してくれるポストプロセッサーです。 cssnextは、PostCSSのラッパーに当たるツールなので、その機能を内包しています。 前提 CSSのコンパイルはPostCSSの機能をラップしているgulp-cssnextにて行う。 (gulp-postcss側から、cssnextを用いてコンパイルするのではないやり方) gulp-cssnextのインストール プロジェクトのルートディレクトリで以下のコマンドを実行。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く