Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita
CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ
CSSfmtをつくった話、もしくは本質的な問題解決とは - Qiita
CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。 使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。 atom-cssfmt sublime-cssfmt vim-cssfmt cssfmt.el AtomでCSSfmtが動いている様子： なぜつくったのか チーム開発において、コードのフォーマットが統一されていないことがある。 フォーマットの小さな違いはわざわざ指摘するのもめんどうだし、指摘されても嫌な気分になる。なので、コードをあるルールに従って自動で整形するツールの導入は必須だと思う。 CSSコードの整形ツールはいくつかある。CSS BeautifyやCSScomb、stylelintでも可能だ。 これらのツールとCSSfmt
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
なんだかノウハウ溜まってきた感あるのでまとめる。 1. prefixの付与はautoprefixerに任せる方が良かった 基本的な部分だが、SCSSになんでもかんでもやらせようとするのはよくない。 例えば下記のようなprefix div { -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5); box-shadow: 0px 0px 10px rgba(255,0,0,.5); } sass/scssであればCompass、Bourbon、lessであればLESSPrefixerなど、mixinとしてprefix付与を提供してくれるライブラリがあったりするが、これよりもautoprefixerによる解決をおすすめしたい。 gulpなどを導入していな
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
なんだかノウハウ溜まってきた感あるのでまとめる。 1. prefixの付与はautoprefixerに任せる方が良かった 基本的な部分だが、SCSSになんでもかんでもやらせようとするのはよくない。 例えば下記のようなprefix div { -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5); box-shadow: 0px 0px 10px rgba(255,0,0,.5); } sass/scssであればCompass、Bourbon、lessであればLESSPrefixerなど、mixinとしてprefix付与を提供してくれるライブラリがあったりするが、これよりもautoprefixerによる解決をおすすめしたい。 gulpなどを導入していな
cssnextでみる次世代CSSとPostCSS | Yucchiy's Note
cssnext 今日ではSassやStylusなどaltCSSを用いたウェブデザインは主流になりつつあるが, 一方で, 次世代CSSではaltCSSで実装されているような様々な機能追加が検討されている. そこで次世代CSSを先取りするcssnextと次世代CSSで足りない機能をPostCSSのプラグインを用いて補う方法について紹介する. これらのツールを用いると, CSSの枠組みの中で閉じた開発が行えて良いのではないかと思う. 最近のウェブデザイン事情と次世代CSS 最近のウェブデザインでは, SassやStylusなどのaltCSSと呼ばれるメタ言語を用いてスタイルを記述し, それぞれのプリプロセッサを用いてCSSを生成するような開発スタイルが多くなってきた. Twitter BootstrapやFoundationなど, 主要なCSSフレームワークはSassを用いて開発が行われており,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
