mockroNotes -モックロノート-

ガジェットやイラスト、ワークアウトに関心を示すブログです

Sass

Sassでよく使うmixinまとめ

Sassを書き始めるときにいつも引っ張り出してくるmixinをメモ。 よく使うものなので、再利用できるようmixinにしておくとすごく便利です。 要素内のテキストを非表示にする タイトル要素を画像に置き換えてテキストは表示したくないなど、用意しておくと便利…

Sassで@content

メディアクエリーの様な、繰り返し記述するルールセットがある場合には@Contentを使って、ブロックをメディアクエリーに渡すといった技も使えます。 メディアクエリーを@mixinにする ルールセット内でメディアクエリーを指定して見通しを良くしてしまおうと…

Sassで@mixin

@mixin(ミックスイン)を使えば、あるスタイルを定義したルールセットの内容を継承しつつ、新しいルールセットを作ることができます。 ここまでは@extendと同じですが、 @mixinは引数を指定して定義した @mixinの一部を変更して使うことができます。これに…

Sassで@extend

@extendを使えば、あるスタイルを定義したルールセットの内容を継承しつつプロパティを追加・変更して、新しいルールセットを作ることができます。 @extendの使いどころ 共通するプロパティをひな形のルールセットにして、差分だけを別のルールセット書き込…

Sassで@import

CSSで使える@importを拡張したSassの「@import」について見ていきます。 Sassの「@import」はファイルを複数に分割してメンテナンス性を高めたり、ミックスインをパーシャルファイルにしてライブラリ的に扱ったりと、Sassを利用して得られる最も重要な恩恵の…

Sassでネスト

ネストはSassの中でもよく使う機能のひとつで、CSSをHTMLの構造に合わせて入れ子で書いていくことができます。 このネストを使うことで何度も親要素を書かなくても良くなり、ノードの見通しも良くなるのでメンテナンス性が向上します。 子孫セレクタ 子孫セ…