web-dev-qa-db-ja.com

他のスコープで初期化された変数をスタイラスに表示させる方法は？

SASSの場合：

.DocumentationArticle

  $DocumentationArticle-Heading__TopLevel--Selector: null

  &-Heading
    &__TopLevel
      $DocumentationArticle-Heading__TopLevel--Selector: &
    &__Section
      @debug($DocumentationArticle-Heading__TopLevel--Selector) // OK: ".DocumentationArticle-Heading__TopLevel"

スタイラスでは、変数値が変更され、この変更は変更されたスコープでのみ表示されます。

.DocumentationArticle

  DocumentationArticle-Heading__TopLevel--Selector = null

  &-Heading
    &__TopLevel
      DocumentationArticle-Heading__TopLevel--Selector = selector()
    &__Section
      warn(DocumentationArticle-Heading__TopLevel--Selector) // null!

作り方DocumentationArticle-Heading__TopLevel--Selectorに表示される新しい値&__Sectionスコープ？

????フィドル

stylus
7
Gurebu Bokofu

スタイラスは、これを実現するために2つの同一の演算子を提供します？=と：=ここに記載されているように：

http://learnboost.github.io/stylus/docs/operators.html#conditional-assignment--

完全を期すために、ここに2つの代替（ただし同等の）構文を示す例を示します。

例1：

// my-html-object.styl

$my-html-object-color ?= blue

$my-html-object
    color $my-html-object-color

例2：

// my-html-object.styl

$my-html-object-color := blue

$my-html-object
    color $my-html-object-color

そして、どちらの場合も、意図したとおりに値を調整できます。

// main.styl

$my-html-object-color = blue

@import('my-html-object')

私はここでこの答えを見つけました スタイラススタイルシートのグローバル変数のデフォルト値を想定しますか？

1
iGuru1994