Sassメモ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
gulp-sass, gulp-plumberを使うときの注意 - Qiita
gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。 .scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。 .pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。 以下のようにgulpfileを書いたところ解決。 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber') ; gulp.task('compile:sass', () => { return gulp.src('src/**/*.scss
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は使えま
CSSfmtをつくった話、もしくは本質的な問題解決とは - Qiita
CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。 使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。 atom-cssfmt sublime-cssfmt vim-cssfmt cssfmt.el AtomでCSSfmtが動いている様子： なぜつくったのか チーム開発において、コードのフォーマットが統一されていないことがある。 フォーマットの小さな違いはわざわざ指摘するのもめんどうだし、指摘されても嫌な気分になる。なので、コードをあるルールに従って自動で整形するツールの導入は必須だと思う。 CSSコードの整形ツールはいくつかある。CSS BeautifyやCSScomb、stylelintでも可能だ。 これらのツールとCSSfmt
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita
ブラウザの進化が早い昨今、CSSのベンダープレフィックス(-webkit-や-ms-)が必要なプロパティと不要なプロパティが入り乱れています。必要なベンダープレフィックスのみを付与しようとした場合、途端にコード量が倍増し、メンテナンス性が低下し、バグの温床となります。このベンダープレフィックス地獄を解消するAutoprefixerをGulpやwebpackで使う方法を紹介します。 今なお続くベンダープレフィックス地獄 角丸を表現するborder-radiusプロパティはIE 11を含む全ての主要ブラウザで、ベンダープレフィックス無しで使えます。(Can I use border-radius) 一方で、ボックスレイアウトモジュールの為のflexboxプロパティやテキスト要素を変形するtransformプロパティ等では、Android 4.4以下等一部のブラウザではベンダープレフィックスが必
QiitaのCSS構成2016 - Qiita
Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas
BEMとSMACSSを融合させる最も簡単な方法 - Qiita
BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 SMACSSではCSSを主要な6つのカテゴリに分類します。 ベース、レイアウト、モジュール、サブモジュール、ステート、テーマです。（※サブモジュールに関しては他のカテゴリと比べるとあまり言及されて
postcssでsassの形式（っぽく）書く - Qiita
nodeでsass（っぽく）かく構造化されたcssを書く nodeがインストールされている環境でnode-sassなどを使うと、他コンパイラのinstallが面倒（windowsだけかもしれないが postcssを使うが、よく言われている、cssnextでの書き方をしらない人にとっては、少し記法が違うので新しく覚えるのが面倒。 ということから、どうにかしてnode onlyでsassの記法でcssをかけないかという事を考えてた。 非常に申し訳ないが、自分の環境（すでに.netがインストールされていたりといろいろ前提がある）なのでうまく行かなくても怒らないでください。 要望 要するにまとめると 開発環境はwindowsです（会社ではそっちが主流） sass的に書きたい できればnodeのインストールのみですませたい watchしてほしい（できれば cssを圧縮してほしい 以下要望をまとめると
フロントエンド開発における革命とスタイルシートの管理 - Qiita
こんにちは、freee株式会社 の @ymrl です。フロントエンドエンジニアなるものをしています。 この記事は freee Engineers Advent Calendar の2日目です。 革命について freee では最近フロントエンド開発を取り巻くいろいろなものを大きく変化させていて、これを 革命《レボリューション》 と呼んでいます。これはフロントエンド界の地殻変動の速さに付いて行きづらくなっているRailsアプリケーションのフロントエンドをエイヤッと近代化して、具体的にはRailsが用意している Sprockets によるフロントエンドの precompile のレールからはずれようとする動きです。 主力サービスである 会計freee は、最初のgitリポジトリへのコミットが2012年7月で、開発初期から jQuery UI や各種 jQuery プラグインや Backbone.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassを使ったz-indexの管理 - Qiita
Sassを使ったz-indexの管理 改 - Qiita
Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
【CSS】複数行でも3点リーダーをきかせる - Qiita
