You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
cssnextをgulpで使ってみたかったので、gulp-cssnextを導入してみたのですが、プラグインの追加方法でちょっとつまづいたので、経緯と解決法をまとめてみました。 基礎知識 cssnextは、CSSの先行実装を、現状のブラウザが解釈できるCSSに変換してくれるポストプロセッサーです。 cssnextは、PostCSSのラッパーに当たるツールなので、その機能を内包しています。 前提 CSSのコンパイルはPostCSSの機能をラップしているgulp-cssnextにて行う。 (gulp-postcss側から、cssnextを用いてコンパイルするのではないやり方) gulp-cssnextのインストール プロジェクトのルートディレクトリで以下のコマンドを実行。
はじめに 治療ノートのフロントエンドエンジニアの @uemurakenta です。 今年もあと少しですねということで、フロントエンド界隈は今年もてんやわんやだったなぁと思い出してみると、node.jsがio.jsと統合されてv4.0がリリースされたと思ったらすぐにv.5.0がstableになったりBootstrapがBabelやSassを導入したり、npmがフロントエンドのpackageを受け入れる発表をしたのに対して、Bower側はBowerは元気ですと高らかに宣言したのは記憶に新しいですね これから書くことと全然関係ないので本題に入ろうと思います。 医療業界のあたりまえを発明するために 少し事業の話になりますが、治療ノートは「治療法を選択できる世の中」を実現するためのサービスです。 現在リリースから半年くらいで、主に、治療法、体験談、医療に関するコラムなどを展開しています。 ただ、新規
社内で新しいドメインを設立するにあたり、CSS Modules, PostCSS, cssnextを試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか?」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コンポーネント時代のスタイリング 2. グローバルCSS、BEM、そしてローカルCSS 3. CSS Modules、そしてJSXへの割り振り 4. cssnextと、その書き方 5. 我々のPostCSSスタンダード 新ドメインの CSS環境(案) CSS Modules css next PostCSS on webpack 何が変わるのか 我々の今までのスタイリング sassで書く スタイルのモジ
cssnext の custom-media を使っているファイルを import して、別ファイルで使う方法JavaScriptwebpackcssnext
automatic vendor prefixes custom properties & `var()` custom properties set & `@apply` reduced `calc()` custom media queries media queries ranges custom selectors nesting `image-set()` function `color()` function `hwb()` function `gray()` function `#rrggbbaa` colors `rgba` function (`rgb` fallback) `rebeccapurple` color `font-variant` property `filter` property `initial` value `rem` unit (`px` fal
どうも、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,
gulp-sassとgulp-postcssを組み合わせると、快適なCSSのコンパイル環境を実現できます。 Sassのコンパイルはgulp-sassで行い、ポストプリセッサーであるgulp-postcssにその後の処理を連携させるイメージです。 ※このエントリーは当初「gulp-sassとgulp-cssnextで快適コンパイル環境を構築」というタイトルで公開していましたが、gulp-cssnextが非推奨プラグインとなり、PostCSSを使ったやり方が主流になってきたため、gulp-postcssを用いた内容に全面的に修正しました。 基礎知識 gulp-sassについて gulpでSassのコンパイルを行うnpmパッケージです。 libsassを使っているため、gulp-ruby-sassやgulp-compassと比べて処理が高速で、 Rubyに依存しないため環境の構築・共有がしやすい
cssnextとは策定中のCSS仕様を先立って使えるようにするツールのことです。 ひとことで言うとCSS版Babelです。 CSSを変換する仕組みはPostCSSのプラグインとして有志によって作成されています。 cssnextはそのプラグインをまとめたプラグインパックと呼ばれるものです。 ※古いブラウザに対応させるためのフォールバック機能を提供するプラグインも含んでいます。 本記事は策定中のCSSの知識をつけることが目的です 参考リンクなど cssnext(PostCSS)の背景や使い方は先日記事を書いたので是非見てみてください Step by Stepで始めるCSSモダン化(PostCSS) playgroundでcssnextが実際にどのように変換するのかを試せます。 機能一覧 本記事で紹介する機能一覧を出すのに使ったcssnextのページです。 postcss-cssnext fea
Netim offers nearly 1,000 geographical (ccTLDs) and generic (gTLDs) extensions. Find the perfect domain name Netim regularly offer discounts on domain names. Some extension start at $1.50 excl.tax for the first year. Discover all of our special offers Whether your website is personal, professional or an online store, you will find the perfect offer for your projects! Discover our web hosting plans
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く