Sass-i

Compassを導入するだけで格段に便利になりますが、世の中にはもっと便利にを追求されたものがあるようです。

@mixinとは??

なんども同じスタイルを定義するとき、@mixinを使うと何度も同じ事を書かなくて済みますし、何よりスタイルを一括で管理できるようになります。

ミックスインによってCSSの定義をグルーピングし、何度も呼び出して使いまわすことができます。

@mixin」でミックスインは定義され、セレクタ内で 「@include」で呼び出します。

※ ミックスイン名は数字で始めることはできません

参考になった@mixinスニペット

そんな便利なミックスイン。使わないと!とSassを始めた頃に見て回って参考にしたコードをまとめました。

1. SCSS Mixin for a Lined Paper Effect

mixin

ノートの罫線のように下線が表示される@mixin

2. SASS MIXIN FOR AUTO-NUMBERING

See the Pen SASS MIXIN FOR AUTO-NUMBERING WITH CSS by Ahmed El Gabri (@ahmedelgabri) on CodePen.

ol要素を自動ナンバリングする@mixin

3. SASS Triangle Mixin

mixin2

ol要素を自動ナンバリングする@mixin

4. sass mixin for rem font sizing & line height with px fallback

文字の大きさとline-heightを定義する@mixin

5. Cross Browser CSS Rotation Sass Mixin

回転を定義する@mixin

Sass対応グリッドシステム

今まではCSSのみだったものをSassに対応したり、新たに発見したグリッドシステム(Sass対応)です。

1. Bootstrap Sass

Sass-3

BootstrapのSassバージョン。

2. Susy: Responsive grids for Compass

sassres-23

なんだかおもしろいレスポンシブなグリッドを組めるようです。

3. Zen Grids

ZEN

こちらもレスポンシブなグリッドですが、名前に惹かれました。

Sassのmixinライブラリ

便利!Sassのmixinライブラリ。

1. bourbon

Sass-5

docsをみると様々なmixinが用意されていてとてもおもしろいです。

2. media queries mixins

Sass-1

メディアクエリ用のSassミックイン。

3. Animate Mixin for Compass/SASS

mixin3

いろいろなアニメーションをひとまとめに書いてあります。 SassだけでなくCSSファイルもあり、そのまま使うもよし、勉強に使うもよしなとても参考になるものでした。

Sassのボタン

Sassのボタンです。

1. Zocial

Sass-4

上記のリンクはCSSボタンですが、真ん中あたりにSASSはこちらというところがありますのでそちらから。なのですが、行ってみるとよく分からないので使い方はこちらが参考になるかと思います。

2. Sassy Buttons

Sass-6

いろいろなボタンを作成できるようです。

さいごに

いろいろ気になるものや参考になったものをズラーっと並べましたが、何か気になるものはありましたでしょうか?

こういったライブラリとかは本当に便利ですが、自分で@mixinを作ったほうがいい場合や、こういったものを活用していったほうがいい場合など考慮して使っていきたいですね。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る