タグ

postcssに関するama-chのブックマーク (6)

  • PostCSS まとめ - Qiita

    僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて

    PostCSS まとめ - Qiita
  • GitHub - masaakim/stylefmt: stylefmt is a tool that automatically formats stylesheets.

    stylefmt is a tool that automatically formats CSS according to stylelint rules. stylefmt'd code is: easier to write : never worry about minor formatting concerns while hacking away. easier to read : when all code looks the same you need not mentally convert others' formatting style into something you can understand. easier to maintain : mechanical changes to the source don't cause unrelated change

    GitHub - masaakim/stylefmt: stylefmt is a tool that automatically formats stylesheets.
    ama-ch
    ama-ch 2015/08/09
    CSS整形ツール。SCSSにも対応
  • PostCSSとは何か - morishitter blog

    PostCSSというnode.js製のツールがある。 PostCSSGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日では盛り上がりを感じていないので、日語のPostCSSの記事を書くことにした。 PostCSS PostCSSとは、JavaScriptで書いたプラグインでCSSを変換するためのツールだ。 PostCSS自体は、CSSパーサーとそのASTを操作するためのAPIのみを提供していて、ユーザーはPostCSSのプラグインを書くことでCSSを変換することができる。 僕もPostCSSを使って、以前ブログにも書いたAtCSSというCSSプリプロセッサーや、postcss-style-guideというスタイルガイドをMarkdownから自動生成するためのプラグインなどを書いたことがある。 PostCSS

    PostCSSとは何か - morishitter blog
  • cssnextを使って最新のcss syntaxで開発するのが良さそう

    ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の

  • 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を用いて開発が行われており,

    cssnextでみる次世代CSSとPostCSS | Yucchiy's Note
  • PostCSS v3の変更点

    PostCSS v3.0.0がリリースされ、かなり高速化した。一部互換性のないAPIの変更があるが、多くは内部的な変更でそれほど影響はないような印象だ。 一番大きな変更点はノードの配列名の統一だろう。今までルールセット内の定義の配列はdecls、ルールセットの配列はrulesと分けられていたが、v3.0.0でchildsに統一された。At-ruleでは子ノードに定義をとるもの(@font-faceなど)とルールセットをとるもの(@mediaなど)があるので、別々に処理しなければならないパターンもありえたが、その必要が少し減ることになる。 なおchildsという違和感のある名称はv3.1.0でchildren(かnodesなど)に修正される模様。 もうひとつはSource Mapの生成でインラインのものがデフォルトになったことだ。別ファイルに吐きたい場合は明示的に無効にする必要がある。言い換

    PostCSS v3の変更点
  • 1