使用觸控筆對列表進行迭代

我決定從SCSS => Stylus切換預編譯程序。我已經瀏覽了Stylus的文檔，但遇到了一個障礙。使用觸控筆對列表進行迭代

筆清單：

breakpoints = xs 176px, 
       s 480px, 
       m 768px

此列表被拉像這樣：像這樣

respond-to(xs) 
    col()

respond-to() 
    if arguments in breakpoints 
     @media (min-width: arguments) 
      {block} 
    else 
     error('Invalid breakpoint.')

和引用但這輸出什麼。

我不想遍歷每個數組項並輸出它們，我只想將用戶定義的鍵名與數組中的鍵名進行匹配，如果它存在於數組中，則將其單值輸出到聲明，否則錯誤，如上所示。

該代碼是合乎邏輯的，有什麼想法？

編輯＃1：嘗試列表轉換爲哈希和使用相同的拉陳述，沒有運氣

哈希：

breakpoints = { 'xs': 176px, 's': 480px, 'm ': 768px }

拉：

respond-to() 
    if arguments in breakpoints 
     @media (min-width: breakpoints[arguments]) 
     {block} 
    else 
     error('Invalid breakpoint.')

編輯＃ 2：找到類似於我想要做的事情，只是不想要那麼多的代碼。 CTRL˚F//定義緩存和別名here.

編輯＃3：發現一個NPM Library具有相同的使用

來源

2015-04-20 Kris

我不建議在問題一中提出第一行，要求我們不要低估它 - 最好這會讓人們自動認爲它值得降薪（加上你的問題似乎很好）。 – Marty

即使在問題值得回答的時候，在這裏也會遇到一些前幾次不愉快的經歷。 – Kris

爲什麼要提到Sass呢？ – cimmanon

arguments是傳遞參數的列表，所以你應該使用[0]拿到第一論據。或者你可以只說出這個論點。例如：

breakpoints = { 'xs': 176px, 's': 480px, 'm ': 768px } 

respond-to() // or respond-to(bp) and delete the second line 
    bp = arguments[0] 
    if bp in breakpoints 
    @media (min-width: breakpoints[bp]) 
     {block} 
    else 
    error('Invalid breakpoint.') 

+respond-to('xs') // the + sign is important because it's a block mixin call 
    body 
    color red

來源

2015-04-20 14:54:35 Panya

我將不得不重寫一些我的scss，但你的解決方案工作！與其他解決方案相比，代碼更少。謝謝！ – Kris

使用觸控筆對列表進行迭代

回答

相關問題