@include中的SCSS變量（Foundation 5）

使用Foundation 5並通過SCSS編寫語義網格/列標記。爲了簡單起見，我將每個WordPress頁面分爲div[role="page/index/404/single"]，並將@include grid-row()和@include grid-column()附加到相應的語義HTML標記。@include中的SCSS變量（Foundation 5）

我已經設計了一個簡單的SCSS數組來處理我的變量，但我有解析問題。

$columns: ('article': 9, 'aside': 3, 'full-width': 12, 'none': 0); 

// index.php 
div[role="index"] { 
    // row 
    main { 
     @include grid-row(); 
     // column 
     article { 
      @include grid-column(columns('article')); 
     } 
     // sidebar 
     aside { 
      @include grid-column(columns('aside')); 
     } 
    } 
}

我收到這個錯誤，我完全理解，但我怎麼做這個工作？我沒有想法。

column("article")/12 is not a unitless number for "percentage"

如果這個問題不能得到解決，讓我知道。在我的代碼中爲每個站點手動定義整數會很痛苦，但如果必須的話，我會處理它。

來源

2015-10-14 Alexander Graham

您需要使用以下語法才能訪問您的Sass數組（您在技術上使用Sass地圖）。

@include grid-column(#{map-get($columns, 'article')}); 
@include grid-column(#{map-get($columns, 'aside')});

來源

2015-10-14 17:47:26 kretzm

它分析我的整數，但拋出了同樣的錯誤：'（第32行：$號：「9/12」是不是爲「百分比」無量綱數）'。然而，這些信息幫助我理解了sass地圖:) –

嗯，看起來像Sass地圖中的值是一種字符串，函數需要一種數字。如果您可以找到一種方法將其轉換爲數字類型，則可以解決此問題。另一個解決方案是不使用Sass地圖，只使用變量。防爆。 '$文章：9;' 然後用 '@包括格列（$條）;' – kretzm

這就是我最終決定這樣做，但我很失望，我不能讓發燒友並使用一個SCSS變量數組... :)哦。 –

@include中的SCSS變量（Foundation 5）

回答

相關問題