line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
Deprecating cssnext
Like I said in my farewell to CSS post, I don't use CSS directly anymore. And things have been this way for years now. I also have been tired of PostCSS (because I disagree with the vision and the directions taken by the project). Beside the fact that I were not using CSS directly anymore, too many PostCSS releases meant that I had to update most of the PostCSS plugins underneath cssnext in order
Firebase, React, FluxでWebアプリ作って思ったこと - Qiita
ここで書いてること タイトルの構成でWebアプリ作った際に思ったこと 作り方ではないのでコードは一切書いてない 作り方的なのも書きたいけど多分無理 きっかけ 2016年は結構ダラダラしてた 仕事以外ではほとんど何も書いてない 夏以降は筋トレのことばっか考えてた おかげで筋肉はついたよ そろそろ何か始めようかと思った 何を作ったか 何をはさほど重要ではなかった 今回重視したのは何を触るか Redux(Flux) React Webpack Firebase postcss 結局作ったのはメモ帳でした Redux ReduxというかFluxでちゃんと作ってみたかった Reduxのチュートリアルはやった 公式ドキュメントは読んだ Fluxを調べる内に@azu_reさんの10分で実装するFluxに辿り着いた これで良いじゃない Fluxの実装面をちゃんと理解して書ける 別にReduxを使わなくても
From Sass to PostCSS
Sass has been my go-to for years. But for a while now, I've wanted to try a new styling setup with PostCSS and the cssnext plugin. I love the idea of writing future CSS syntax today and using tooling more aligned with other tools I'm used to. This personal site is a perfect test bed to try this new setup. The first step I took was an inventory of my Sass usage. I needed to know what features I was
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
PostCSSのASTを操作する - Qiita
PostCSSには2日目で説明した、ASTを簡単に操作するためのAPIが用意されています。ASTはJavaScriptのオブジェクトなので、JavaScriptの構文で直接変換させることもできますが、より便利に、そして効率の良い処理をするためにも提供されているAPIを使います。 また、PostCSSの全てのAPIはAPIドキュメントで確認することができます。 ノードの種類 まずはASTのノードの種類です。PostCSSのASTのノードは以下の5つです。 Rootノード: ASTの1番上のノード（Rootノードは親ノードがない） Ruleノード: 1つのルールセット AtRuleノード: 1つの@ルール Declarationノード: 1プロパティ宣言 Comment: 1つのコメント これらは実装的には PostCSSの Node クラスを継承したもので、Node.type を参照すること
cssnextから学ぶ次世代CSS - Qiita
cssnextとは策定中のCSS仕様を先立って使えるようにするツールのことです。 ひとことで言うとCSS版Babelです。 CSSを変換する仕組みはPostCSSのプラグインとして有志によって作成されています。 cssnextはそのプラグインをまとめたプラグインパックと呼ばれるものです。 ※古いブラウザに対応させるためのフォールバック機能を提供するプラグインも含んでいます。 本記事は策定中のCSSの知識をつけることが目的です 参考リンクなど cssnext（PostCSS）の背景や使い方は先日記事を書いたので是非見てみてください Step by Stepで始めるCSSモダン化（PostCSS） playgroundでcssnextが実際にどのように変換するのかを試せます。 機能一覧 本記事で紹介する機能一覧を出すのに使ったcssnextのページです。 postcss-cssnext fea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tokencss/tokencss
GitHub - postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust
GitHub - twbs/rfs: ✩ Automates responsive resizing ✩
GitHub - csstools/cssdb: A database of staged CSS features
Release 6.0 “Marquis Orias” · postcss/postcss
GitHub - eduardoboucas/postcss-cssential: 🚩 PostCSS plugin to identify annotated blocks of critical CSS and inline them into a page
GitHub - TrySound/postcss-easy-import: PostCSS plugin to inline @import rules content with extra features
PostCSS-modules: Isolate ’em all!—Martian Chronicles, Evil Martians’ team blog
js.coach
postcss.parts
GitHub - pascalduez/postcss-apply: PostCSS plugin enabling custom properties sets references
GitHub - timaschew/postcss-compare-packs: :pencil: compare most popular postcss packs like cssnext, rucksack and precss
GitHub - johno/immutable-css: A css linter for immutable selectors