Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
altCSSを捨ててPostCSSで活きよう！ - 弥生開発者ブログ
こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 髪がだいぶもっさりしてきたのでそろそろなんとかしないとなぁと思っています。 この写真は先日 きたむらさんとこくぼさんで朝明渓谷に行ってきた時の写真です。 すごく綺麗で泳いだのですが、まぁまぁ寒かったです。 最近はポケモンGOにはまっています。 会社の入っているビルがポケストップになっていて、お昼休みに社長がルアーモジュールを置くので、 ポケモンも集まるし、社員も集まってきます。 どうやら社長が会社にルアーモジュールおいたっぽい— めろたん。れんやたん。 (@renyamizuno_) July 25, 2016 Misocaのはいってるビルはポケストップになっていて、昼休みは社長の仕事としてルアーを指しています。社員に1000円のランチを奢るより感謝されている実感がある。 pic.twitter.com/8
Working With Images In Stylesheets With PostCSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You’re about to see a variety of PostCSS plugins at work that are all rel
PostCSSの基本的なところ - PAY.JP Engineering Blog
フロントエンドエンジニアの @7jin16 です。 今回は最近フロントエンド界隈でよく耳にするPostCSSの基本的な部分を書こうと思います。 PAY.JPでも導入しているので、PostCSSってなんだろうって方の参考になればとても嬉しいです。 PostCSSとは PostCSSの公式ページにも書かれていますが、一言で説明すると『CSSを変換するために書かれたnode.js製のパーサー』です。 Google や Twitter、阿里巴巴やShopifyも使っているとのこと。 PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline im
cssnano: A modular minifier based on the PostCSS ecosystem.
Deliver your website's styles, faster. Plug in cssnano into your build step for modern CSS compression. Get Started What it does cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment. Input /* normalize selectors */ h1::before, h1:before { /* reduce shorthand even further */ margi
My Top 5 PostCSS Plugins - Max Stoibers Blog
There has been a lot of talk recently about a new CSS preprocessor called PostCSS.1 PostCSS is a wrapper for plugins which exposes an easy to use, but powerful API. Plugins can then use this API to change something in your CSS – or not. This makes PostCSS modular and extensible. While it is possible to replicate other preprocessors features, PostCSS can do so much more. Using PostCSS is as easy as
次世代CSS登場！PostCSSの簡単な使い方 - TetraThemesブログ
最近のWeb制作の現場では、ふわっとした自然な動きのアニメーションやSMACSSのようなスタイルの概念、スタイルのコンポーネント化など、PSDをそのままCSS化すればいいという時代ではなくなってきていますね。 レスポンシブデザインなどに対応するため、すでにBootstrapやSASSのようなpre-processorを採用されているところも多いと思いますが、ここにきてPostCSSというヤツが注目されています。 今回は次世代CSS！になるかもしれない、PostCSSの使い方を紹介します。 PostCSSって何？ PostCSSはjavascriptを使ってCSSスタイルを変換する、CSS Processor。javascriptはプラグインとして既に数多く公開されており、変数やミックスイン、カスタムセレクターなど様々な機能があります。 また、関数を使う場合を除きCSSからかけ離れた特殊な記
PostCSSってなに？導入前に知っておきたいことを箇条書きでまとめてみた
PostCSS って最近ちらほら目にするようになったけどいったいなに？と思っている方いませんか？僕はその一人です。なんとなくこんなもんかな？といった感じで曖昧にしか理解していなかったので「とりあえずこれだけ知っておけばいい」という情報を簡単にまとめてみました。 はじめに PostCSSをノートPCに例えると… SassをVAIOのようなメーカーが作ってパッケージしたノートPCに例えると、PostCSSはマザーボードからプロセッサーからケースまで、すべて自分で選んで組み立てる自作PCです。 かなり良さそう 結論から言ってしまうと、かなり良さそうなので早速使い始めて損はないと思います。大きな導入リスクやデメリットは思いあたらないし、すでにビルドツールを使っていれば導入コストも少なくすみます。少なくとも試してみる価値は十二分にありそうです。もちろん、開発体制や環境、プロジェクトの性質によるんでし
Breaking up with Sass: it’s not you, it’s me
3423 days since last revision. Details are possibly out of date. Right now, I have a near frictionless CSS workflow. I write in Sass, compile with Libsass and get vendor prefixes added with PostCSS/Autoprefixer via Gulp/Grunt. Why would I want to upset that? Just under a year ago, my interest was piqued by a post by Nicolas Gallagher. In it he described how he/they (Twitter) were using a JS tool t
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、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でみる次世代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ページを開く
GitHub - TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
GitHub - csstools/postcss-write-svg: Write SVGs directly in CSS