[解決済み】SASS - 複数のファイル間で変数を使用する
2022-04-01 07:38:21
質問
プロジェクトのすべての SASS 変数定義を格納する 1 つの中央 .scss ファイルを保持したいと思います。
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
このプロジェクトは、その性質上、大量のCSSファイルが存在することになります。プロジェクト全体のスタイル変数をすべて一箇所で宣言することが重要です。
SCSSでこれを実現する方法はあるのでしょうか?
どのように解決するのですか?
この質問はずいぶん前にされたものなので、最新の回答を掲載しようと思います。
今すぐ
避ける
を使って
@import
. ドキュメントから引用しています。
Sass は今後数年間かけて徐々に廃止され、最終的には 最終的には言語から完全に削除されます。より望ましいのは@useルール 代わりに
を使用する必要があります。
@use
を以下のように設定します。
_variables.scss
$text-colour: #262626;
_otherFile.scss
@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension
body {
// namespace.$variable-name
// namespace is just the last component of its URL without a file extension
color: variables.$text-colour;
}
また、名前空間の別名を作成することもできます。
_otherFile.scss
@use 'variables' as v;
body {
// alias.$variable-name
color: v.$text-colour;
}
EDIT
執筆時(2020年11月)に@und3rdgさんからご指摘があったように
@use
は現在Dart Sassでのみ利用可能で
ではなく
LibSass (現在は非推奨) または Ruby Sass。参照
https://sass-lang.com/documentation/at-rules/use
最新の互換性については
関連
-
[解決済み】display:noneの反対語はあるのか?
-
[解決済み】bootstrap 3で画像にテキストを回り込ませる
-
[解決済み] font-face は OpenType 埋め込み許可チェックに失敗しました。パーミッションはインストール可能である必要があります。
-
[解決済み] FontAwesomeによる星評価用CSS
-
[解決済み] エレメントの角を面取りする方法を教えてください。
-
[解決済み] psuedo 要素を用いたスクロール/ホバー可能な CSS ツールチップ
-
[解決済み] twitter-bootstrapの@-ms-viewportというタグは何ですか?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] CSS calc()関数内のSass変数
-
[解決済み] Sass .scss: ネストと複数クラス?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ユーザーエージェントのスタイルシートが私のCSSを上書きしないようにする方法
-
[解決済み] Chrome で注入されたスタイルシートによる奇妙なスタイリングが発生する
-
[解決済み] moz-とwebkit-とは何ですか?[重複しています]。
-
[解決済み] cssによる波状の形状
-
[解決済み] ネストしたdivのcssを簡素化
-
[解決済み] css グリッドによる垂直・水平方向の中央揃え 4x4 正方形グリッド
-
[解決済み] CSSでitempropをターゲットにする?
-
[解決済み] 高さと幅はspanには適用されないのですか?
-
[解決済み] twitter-bootstrapの@-ms-viewportというタグは何ですか?
-
[解決済み] select2入力の幅を設定する(Angular-uiディレクティブを使用)