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 を参照すること
webpackを使ってsassをコンパイルできるようにしよう！ - Qiita
const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ entry: { bundle: './src/app.js' }, output: { path: path.join(__dirname, 'public'), filename: '[name].js' }, module: { loaders: [ { loader: 'babel', exclude: /node_modules/, test: /\.js[x]?$/, query: { cacheDirectory: true, presets: ['react', 'es2015'] } } ] } }, { entry: { style: './
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
SassのビルドもWebpackでHot Module Replacementしたい - Qiita
Rails + モダンJS環境で新規アプリ作成の続きです。 上の記事ではRailsのSprocketsを切って、JSの環境をnpmによせました。となってくると、 Sassのビルドもnpmによせたい！ただ、gulpなどは使いたくない！ ということで、WebpackにSassのビルドも任せて、CSSでもHot Module Replacementをしようとやってみました。以下、CSSのソースは src/css/ に置くこととしています。 前回と、今回で作成したサンプルはこちらです。 https://github.com/ufotsuboi/rails-webpack-sample 注意 今回はCSSは全体に読み込む、JSは一部のみといった、JSとCSSを完全にわけて扱いたいような状況を想定しています。 SPAのようなJSもCSSも全部のページで読み込むといったような状況であれば、webpack
RailsアプリのAMP対応をSassで快適に - Qiita
AMPとは AMP(Accelerated Mobile Pages)はモバイルでのウェブページ表示を高速化する手法です。Googleが強く推奨しており、2016年10月よりGoogleのモバイル検索結果の表示にAMPが使用されるようになりました。 高速化のため、AMPページで用いられるHTMLには独自のプロパティや制限があります。cssに関しても、外部ファイルを読み込めない等の制限があります。 RailsでAMP対応する際の問題 AMPでは外部ファイルを読み込めないので、cssをheadタグ内のstyleタグに書かなければなりません。すなわち、ビュー内でcssをrenderする必要があります。しかし、アセットパイプラインにはそんな仕組みはありません。File.readでcssファイルを読み込んでビューに書き出すといった方法はすぐに考え付きますが、これではコンパイルが必要なSassは使えま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassを使ったz-indexの管理 - Qiita
Sassを使ったz-indexの管理 改 - Qiita
Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
