!importantはもう使わない！CSSの優先順位をおさらいしよう
先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった！ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。 もくじ 0.デモの準備 1.基本の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと？ 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし 「ある程度なら知ってるよ！」って方は5.つまりどうゆうこと？から読んでもらえれば大丈夫かと思
Sassの「@mixinと@extendの違い」と使い分け
@extendのおさらい @extendは一言で言うと「継承」。@extendは次の例のように、一度定義したクラスを、他のクラスに継承するというスタイルで使う。 .base-border{ border:1px solid #ddd; } .box1{ @extend .base-border; width:100%; } .box2{ @extend .base-border; width:50%; } @mixinのおさらい @mixinは、@mixin hoge(){}という記述でスタイルを定義して、別の場所でそのスタイルを使い回せる機能であり、さらに「引数」が使えるという大きなメリットがある。 @mixinをもっと詳しくおさらししたい方はこちらの記事を確認しておこう。 引数を使わない場合 @mixin baseBorder{ border:1px solid #ccc; } .bo
【SASS、SCSS】calcの計算式で変数を使うときの記述方法
このページをご覧になられたということは、SCSSでcalc()関数をご使用になられた方でしょうか。 そしてcalcの計算式に変数を入れたものの、上手く計算されないという状況でしょうか。 ご安心下さい、変数が含まれてても無事に計算できます。 以下の例はヘッダーの高さを80pxに固定し、メイン要素の高さをブラウザの高さに合わせて可変にしたい場合の計算式です。 赤線のcalcの計算式に、そのまま「$header-height」の変数を入れても、計算が上手くいきません。 それもそのはず、calcの計算式でSCSSの変数を使う場合、#{$変数名}と入力する必要があります。 以下ご確認ください。 See the Pen wvwrNNr by DoGgy (@DoGgy12) on CodePen. これで無事に計算が出来ました。 calcの四則演算のルール 実は上と別のパターンでも、calcの計算でハ
Sassファイルの管理方法。ディレクトリ構造（フォルダ・ファイル構成） | Webエンジニアのブログ
Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造（フォルダ・ファイル構成）をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。 Sassを複数ファイルとして分割管理することで、編集する箇所へのアクセスがスムーズに行えるので、プロジェクトの大きさによっては、作業効率を上げることもできます。 ここでは、Sassファイルを分割管理する方法について見ていきます。 Sassの記法はいくつかありますが、公式も推奨しているDart Sass（ダートサス）の記法で、記述方法も含めてご紹介していきます。 今後は、Dart Sassベースで新機能が追加されていきますので、覚えておくと良いでしょう。 また後半には、Dart Sassの自動コンパイルについても少し触れていきます。 Sassファイルの分割管理 Sass(scss)ファイルの分割管理を、サンプルを交
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
Visual Studio Code で Sass をコンパイルする Live Sass Compiler - bnote
Autoprefix 自動でベンダープレフィックスを追加する条件を設定します。設定は、 Browserslist のフォーマットで記述します。 例えば、「シェアが1%以上」または「最新バージョンから数えて2つまで」という条件は以下のように指定します。 "liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions" ] Exclude List コンパイル対象から除外するファイルを指定します。グロブ（ glob ）と呼ばれるワイルドカードを使ったパターンで指定することができます。 次の例は、すべての node_modules ディレクトリ配下にあるすべてのファイルがと、.vscode ディレクトリ配下の全てのファイルがコンパイル対象から除外されます。 "liveSassCompile.settings.excludeLis
フリーのSass,LessコンパイラKoala【Win,Mac】
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
スゲぇと噂のスタイルシート！『Sass』をサクッとブラウザで試すところまでやる。
一度試すと病みつき！ 普通のCSSの書き方には戻れないと噂のSass。もう試してみましたか？ Sassを試してみるには、なにやら面倒な下準備が必要だとも聞いてましたが、実はブラウザから簡単にトライできる方法があります。今回はその方法を簡単なサンプルと一緒に試してみます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2012 まずはサラッと。『Sass』って何？ Sassを直訳すると「構文的にすごいスタイルシート」です。「構文的に」というところをもっとくだいて言うと、「すごい書き方ができるスタイルシート」みたいな感じですかね。 とにかく、Sassはスタイルシートの記述や管
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コレ棚
Nuxt.jsで外部scssを読み込む - Qiita
【Sass】親セレクタを参照する&や+の使い方 - Qiita
SCSSの変数と、CSS3のcalc()を併用するには - Qiita