1 - 7 件 / 7件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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
はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回: postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 (策定中のため、書き方が変わったり、機能
こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0(意欲的) Stage1(実験) Stage2(許容) Stage3(包含) Stage4(標準化) 新機能のNesting CSS Moduleを使ってみる Nesting CSS Moduleのルール 直接入れ子にする場合 @nestを使う場合 プラグインでの挙
この記事の概要 PostCSSのプラグインであるPostCSS Preset Envをご存知でしょうか。 "Use tomorrow’s CSS today!"というキャッチフレーズが示す通り、まだ正式な仕様になる前のCSSを色々と使うことができます。 CSS関連の勉強会などに登壇すると「普段どこからインプットしていますか?」と質問されることがあり、学ぶ先の1つとしてPostCSS Preset Envがあるので紹介してみます。 Features CSSでは策定段階がStage 0から4まであります。 数字が高いほど仕様として固まっていて、低いほど変更や破棄になる可能性が高いです。 Stage 2でも「一部のブラウザでは使用できるけど、まだ動かないことも多い」くらいで、実用的と言えるのはStage 3からでしょうか。 そんな中でも、PostCSS Preset Envを使えばStage 0
はじめに Sass とは Sass は現在の CSS のコーディング環境のデファクトスタンダードである。 SASS 記法と SCSS 記法の 2 種類がある。(現在主に利用されているのは SCSS 記法) CSS を効率よく書くための便利な機能が含まれている。 コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。 libsass が先日deprecatedになったため、今後はsass(旧:dart-sass)のシェアが伸びると予測される。 PostCSS とは PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。 最新の CSS の polyfill として利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。 Sass との組み合わせでもよく利用される。Autoprefixer
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
で開発開始。sassファイルを更新すると処理が走ってdist/に処理結果のcssが吐き出される。 cssファイルの一時経由先として「tmpCssディレクトリ」を設けてるのがコツ。 「watch:sassToPostcss」から連なる処理から解説 まず「build:sass」でsrc/sass/内の(.scss|.sass)を、tmpCss/へトランスパイル。次にwatchを効かせる為、追加オプション「-- -w」を足して「build:sass」「build:postcss」を実行。 「tmpCssディレクトリ」が必要だった理由 直でsassからdist/に吐き出したcssを、postcssの「--replace」で上書きできればシンプルだった...。しかし、いざ実行するとpostcssが「--replace を使うと、同時に --watchが出来ないよ!」と英語で怒ってくる。しぶしぶ経由ディレ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く