私はSassを使用してJS/CSSライブラリに取り組んでいます。自分のプロジェクトに自分のSassを直接インポートしてコンパイルするオプションをユーザに提供したいのですが、含まれるCSSアニメーションの動作を変更する変数を変更するオプションがあります。ユーザーが変数を変更できるようにするSassアニメーションライブラリの設計方法は？
しかし、私はSassに比較的新しいです。私はこれをどうすればいいのか分かりません。 Sassユーザーは、Sass変数（BootstrapやBulmaなど）のインポートと変更をどのように期待しますか？ hereの!defaultキーワードを使用する必要がありますか？
スタイルフレームワークがブートストラップやファンデーションのようにどのように機能するかを理解するようにしてください。
例はplunkerにあります。
プロジェクトの基本的な構造は次のとおりです。
animation.scss // Your library
variables.scss // User custom variables
main.scss // User main scss file
これらのファイルを見てみましょう。
Animation.scssには、すべてのデフォルト変数と必要なすべてのクラスがあります。クラスはミックスインでラップされ、ユーザーはそれらを別々にインポートできます。このファイル内のすべての変数には、ユーザーがそれらを無効にするためのフラグ!defaultがあります。要素にカラープロパティを追加する単純なクラスanimationがあります。
$color: green !default;
@mixin animation() {
.animation {
color: $color;
}
}
Variables.scssには、ユーザーカスタム変数が含まれています。彼らは旗を持っていません。
$color: red; // Note, there is no !default flag
Main.scssすべてのファイルをインポートし、ライブラリコンポーネントの一部が含まれます。たとえば、animationというコンポーネントをインポートします。
// Import library
@import 'animation.scss';
// Override library variables
@import 'variables.scss';
// Import components
@include animation();
概要
デフォルトでは、あなたのライブラリーは、の値を持つ変数$colorを持っています。ユーザーはredに上書きし、コンポーネントanimationを含みます。したがって、クラスanimationの要素はすべて赤色である必要があります。