阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Stylus 条件 Conditionals

      条件

      条件提供了语言的刘控制,否则就是纯粹的静态语言。提供的条件有导入、混入、函数以及更多。下面的例子纯粹示例,并不是使用建议。

      if / else if / else

      这没什么好说的,跟一般的语言一致,if表达式满足(true)的时候执行后面语句块,否则,继续后面的else ifelse.

      下面这个例子,根据overload的条件,决定是使用padding还是margin.

      overload-padding = true
      
      if overload-padding
        padding(y, x)
          margin y x
      
      body
        padding 5px 10px
      

      另外的例子:

      box(x, y, margin = false)
        padding y x
        if margin
          margin y x
      
      body
        box(5px, 10px, true)
      

      另外的box()帮手:

      box(x, y, margin-only = false)
        if margin-only
          margin y x
        else
          padding y x
      

      除非(unless)

      熟悉Ruby程序语言的用户应该都知道unless条件,其基本上与if相反,本质上是(!(expr)).

      下面这个例子中,如果disable-padding-overrideundefinedfalse, padding将被干掉,显示margin代替之。但是,如果是true, padding将会如期继续输出padding 5px 10px.

      disable-padding-override = true
      
      unless disable-padding-override is defined and disable-padding-override
        padding(x, y)
          margin y x
      
      body
        padding 5px 10px
      

      后缀条件

      Stylus支持后缀条件,这就意味着ifunless可以当作操作符;当右边表达式为真的时候执行左边的操作对象。

      例如,我们定义negative()来执行一些基本的检查。下面我们使用块式条件:

      negative(n)
        unless n is a 'unit'
          error('无效数值')
        if n < 0
          yes
        else
          no
      

      接下来,我们利用后缀条件让我们的方法简洁。

      negative(n)
        error('无效数值') unless n is a 'unit'
        return yes if n < 0
        no
      

      当然,我们可以更进一步。如这个n < 0 ? yes : no可以用布尔代替:n < 0.

      后缀条件适用于大多数的单行语句。如,@import, @charset, 混合书写等。当然,下面所示的属性也是可以的:

      pad(types = margin padding, n = 5px)
        padding unit(n, px) if padding in types
        margin unit(n, px) if margin in types
      
      body
        pad()
      
      body
        pad(margin)
      
      body
        apply-mixins = true
        pad(padding, 10) if apply-mixins
      
      生成为:
      
      body {
        padding: 5px;
        margin: 5px;
      }
      body {
        margin: 5px;
      }
      body {
        padding: 10px;
      }
      
      目录
      目录