如何將CSS變量值分配給scss變量或表達式

我試圖在CSS/scss中構建自己的小型可縮放網格。到目前爲止，我發現了這個決定：如何將CSS變量值分配給scss變量或表達式

:root { 
    --page-width: 1170px; 
    --gutter: 15px; 
    --columns: 12; 
} 

.wrapper { 
    max-width: var(--page-width); 
    margin-right: auto; 
    margin-left: auto; 
    padding-left: var(--gutter); 
    padding-right: var(--gutter); 
} 

.row { 
    margin-left: calc(-1 * var(--gutter)); 
    margin-right: calc(-1 * var(--gutter)); 
} 

.col { 
    display: block; 
    margin-left: var(--gutter); 
    margin-right: var(--gutter); 
}

然後我試圖使用SCSS縮短列類說明（在同一時間讓我改變在整個代碼一個位置列數 - 在CSS變量--columns）像這樣

@for $n from 1 through var(--columns) { 
    .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); } 
}

但它沒有工作。有趣的細節是，當我改變從@for $n from 1 throughvar(--columns)``到@for $n from 1 through12@for聲明它編譯好。在@for內部編譯CSS-Variable沒有問題。 .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); }很好地編譯成需要的一系列類。

如果我使用scss變量$columns而不是CSS變量，那麼我需要將我的grid.scss文件導入到項目的所有其他scss文件中。

這是我在StackOverflow上的第一個問題，所以讓我知道是否需要其他細節。

來源

2017-07-16 Andrii.Gaidai

的可能的複製[如何在CSS變量強制整數？]（https://stackoverflow.com/questions/44524527/how-to-force-integer-in-css-variable） –

Saurabh Gour，實際上，是的。你提出的問題涵蓋了我的問題。但我永遠不會在它的當前標題「如何在CSS變量中強制整數」下找到它。 –

我幾乎按下了'這解決了我的問題！'按鈕，但是然後我閱讀了解釋消息。它說：「這將標記你的問題是重複的，指導未來的讀者原來的問題，並防止在這裏發佈進一步的答案。」我不介意將我的問題標記爲一般重複的問題。但在這個具體的例子中，我認爲'如何在CSS變量中強制整數'不是重點，也不是主要主題。我的問題會保持可見嗎？還是會隱藏？重定向將如何發生？ –

CSS和SCSS變量是兩個完全不同的東西（請參閱this pen）

爲了使它工作，你需要一個靜態變量SCSS編譯

// static (SCSS) variables used produce CSS output 
$page-width: 1170px; 
$gutter : 15px 
$columns: 12; 

// dynamic (CSS) variables used at run-time 
:root { 
    --page-width: $page-width; 
    --gutter : $gutter; 
    --columns: $columns; 
} 

// the for loop is aimed at producing CSS output 
// ... why you need the static variable 
@for $n from 1 through $columns { 

    // the content becomes CSS output 
    // ... why you can use dynamic variables 
    .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); } 

}

來源

2017-07-16 11:45:46

Jacob E，非常感謝。你的解決方案爲我工作。另外，我查看了你的筆，這給了我更多的理解。 –

您需要對變量使用插值（例如＃{$ var}），以便Sass將其視爲CSS屬性。沒有它，你只是在執行變量賦值。

@mixin w_fluid($property_name, $w_element, $w_parent:16) { #{$property_name}: percentage(($w_element/$w_parent)); }

來源

2017-07-16 08:43:05

如何將CSS變量值分配給scss變量或表達式

回答

相關問題