Sassデザイナーのための9つのMixinライブラリ

開発ワークフローでSassを使用している場合、ミックスインの重要性がわかります。書かれていることがいくつかあるとき CSSで繰り返し退屈に, それがミックスインがあなたが繰り返し作業を防ぐのを助けることができるところです。ミックスインには、サイト全体で再利用できるCSS宣言が含まれています.

開発中にSassを使用するときに役立つように、開発者によって作られたミックスインはたくさんあります。大部分はCSSで頻繁に繰り返されることをカバーしています。から 複数のブラウザに適応する に ボタン、アニメーション、トランジション効果の作成, Sass開発に必要な以下の11のミックスインライブラリで、これ以上のものを見つけてください。.

1.バーボン

Bourbonは、クロスブラウザで使用するためのスタイルシートの作成を簡単にするミックスイン、関数、およびアドオンを含むSassライブラリです。私にとって、これは最も素晴らしいSass mixinです。それはあなたのスタイルシートを軽量に保ちながらあなたがあなたのウェブサイトをスタイルするのに必要なほとんどすべてを含んでいます.

利用可能なそれぞれのミックスインと関数を使用するために完全なドキュメントをチェックしてください.

Sass CSS3 Mixin

Sass CSS3 Mixinは、異なるブラウザ間で動作するミックスインを提供します。背景、境界線、ボックス、列、フォントフェイス、変換、トランジション、アニメーションなど、ベストプラクティスのミックスインがここにたくさんあります。あなたのスタイリングニーズには十分です。使用するには、 css3-mixins.scss そしてCSSクラスのミックスインを呼び出します。.

このmixinをここからダウンロードしてください.

3. CssOwl

CssOwlは、要素の位置（相対的または絶対的）を設定し、擬似セレクターを使ってコンテンツを追加するための便利なミックスインを提供します（ ：後 そして ：前）スプライト要素を作成したい場合にも役立ちます。ミックスインを使用すると、スプライト内の画像位置を柔軟に設定できます。 Sassに加えて、CssOwlミックスインライブラリはLESSとStylusでも利用可能です。.

4.ブレークポイントセス

ブレークポイントを使用すると、Sassを介して簡単にメディアクエリを実行できます。ブレークポイントを使用すると、変数を作成してそれを定義する値を与えることができます。 最小幅 または 最大幅 メディアクエリ作成した変数には意味のある名前が付いているので、Sassで使用するために簡単に呼び出すことができます。.

スカット

Scutには、一般的なスタイルコードパターンを簡単に実装するのに役立つ、再利用可能なSassミックスイン、プレースホルダ、関数、および変数のセットが含まれています。これは、ページレイアウトのようなWebスタイルのものやスタイルのタイポグラフィを作成するためのベストプラクティスコードを提供します。コードをより頻繁に再利用することで、コードを書くときの繰り返しを減らすことができます。このようにして、あなたがプロセスの中でより組織化されるのを手伝う.

6.サフラン

Saffronを使えば、CSS3アニメーションやトランジションを簡単に追加できます。フェードイン/アウト、スライドイン/アウト、ライズイン/アウト、さらにはシェイク、ティーター、バウンスなどのさまざまな効果を含む、利用可能な数十のアニメーションとトランジションがあります。 Saffronを使用するには、Sass宣言にミックスインを含めて、CSSクラス内でエフェクト名を呼び出すだけです。 SaffronはBowerかGemを使ってインストールするか、Githubから手動でダウンロードすることで入手できます。.

7.設定を入力します

TypeSettingsはSass用のツールキットの一種です。 em（remsやpixelsの代わりに）、垂直方向のリズム、そして反応率ベースの見出しを使って、フォントサイズをモジュラースケールで設定します。これをBowerでインストールしたり、リリースをダウンロードしたり、リポジトリを複製したりすることもできます。詳細については、そのページをチェックしてください。.

8.セスライン

Sass Lineは、より優れたタイポグラフィを作成するのに役立つSassミックスインです。ベースライングリッドから比例して作業できるように、フォントにレム単位を使用します。 Sass Lineは、ベースライングリッドに基づいて正確な垂直方向のリズムを使用し、各ブレークポイントに対してモジュラースケールを設定して、Webサイトのあらゆる面で適切な比率を設定できます。.

使い方の詳細については、ここをクリックしてください。.

9. Andy.scss

Andy.scssは、軽量でありながらWebサイトの外観を簡単に作成できるように作成された、便利なSassミックスインのコレクションです。背景からアニメーションまで、数十種類のSassミックスインがあります。ここでは、一般的に使用されているほとんどすべてのCSSプロパティについて説明します。 Githubで入手してください.

Sassへのより多くの投稿：

Sassをはじめよう
セスを掘り下げる
SassをSublime Textでコンパイルする方法
Sassでブートストラップ3を使用する
Sass＆CompassでオンラインVCardを構築する方法
CSSプリプロセッサの比較：Sass Vsもっと少なく
文法的に素晴らしいスタイルシート：SassでCompassを使う
CSSをSass＆SCSSに変換する方法