web-dev-qa-db-ja.com

SASSで変数が定義されているかどうかを確認する

タイトルにあるように、変数がSASSで定義されているかどうかを確認しようとしています。 （それが異なる違いを生む場合、私はコンパスを使用しています）

Rubyと同等のものが見つかりました：

defined? foo

暗闇の中でショットを与えたが、それはちょうど私にエラーを与えました：

defined": expected "{", was "?

私は回避策を見つけました（これは明らかにすべての場合に変数を定義するだけであり、この場合は実際にはより理にかなっています）が、これが将来可能かどうかを本当に知りたいです

rubysass
51
locrizak

Sass 3.3以降の場合

Sass 3.3現在、variable-exists()関数があります。 変更ログ から：

  • これらの新しい関数を使用して、さまざまなSassコンストラクトの存在を判別できるようになりました。
    • variable-exists($name)は、変数が現在のスコープで解決するかどうかを確認します。
    • global-variable-exists($name)は、指定された名前のグローバル変数が存在するかどうかを確認します。 ...

使用例：

_$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don't */
}
_

Sass 3.2.x以前（元の回答）

今日、私は同じ問題に出くわしました。変数が設定されているかどうかを確認しようとして、そうであればスタイルを追加したり、ミックスインを使用したりするなどです。

isset()関数 sassに追加されない を読んだ後、 _!default_ キーワードを使用して簡単な回避策を見つけました。

_@mixin my_mixin() {
  // Set the variable to false only if it's not already set.
  $base-color: false !default;

  // Check the guaranteed-existing variable. If it didn't exist 
  // before calling this mixin/function/whatever, this will 
  // return false.
  @if $base-color {
     color: $base-color;
  }
}
_

falseが変数の有効な値である場合、次を使用できます。

_@mixin my_mixin() {
  $base-color: null !default;

  @if $base-color != null {
     color: $base-color;
  }
}
_
102
RobW

補足的な答えとして-特定のユースケースではdefaultキーワードを確認する必要があります。変数がまだ定義されていない場合、変数にデフォルト値を割り当てることができます。

値の最後に！defaultフラグを追加して、変数がまだ割り当てられていない場合は、変数に割り当てることができます。これは、変数が既に割り当てられている場合、再割り当てされないことを意味しますが、値がまだない場合は、値が与えられます。

例：

Specific-variables.scssには次のものがあります。

$brand: "My Awesome Brand";

Default-variables.scssには次のものがあります。

$brand: company-name !default;
$brand-color: #0074BE !default;

プロジェクトは次のように構築されます。

@import "specific-variables.scss"; @import "default-variables.scss"; @import "style.scss";

ブランドの値はMy Awesome Brandになり、ブランドカラーの値は＃0074BEになります。

3
Blackbam