將值從HTML傳遞到SCSS

我是SCSS的新手，不確定如何使用它。我曾在SO和其他地方環顧四周尋找解決方案，但無法解決問題。將值從HTML傳遞到SCSS

我正在開發一個顯示手機列表的應用程序。我通過調用REST API來獲取這個列表（以JSON的形式）。所有手機都有相同類型的信息顯示，如姓名，型號，價格，可用數量。

請注意，我的問題與Access HTML attribute value in SASS不相似。該鏈接討論計算父元素的子元素數量。在我的情況下，我想根據我的JSON對象的某個屬性的值來獲取樣式表代碼（顏色，字體大小，字體寬度）。

我所試圖做的是：

顯示這些手機在自己的DIV /卡取決於手機的類型與個體的顏色。「電話類型」是一個整數值。

顯示不同字體大小的名稱，價格，可用數量。

我在SCSS瞭解@mixin，他們可以接受參數。我想我可以用這個來傳遞我的手機類型整數/數值。

我看到的所有例子都是通過傳入參數值，從另一個SCSS文件調用@mixin。

這是將參數值傳遞給的唯一方法@mixin？

這將是巨大的，如果有人能告訴我，如果有從HTML傳遞的參數值（在我的情況下手機類型）到SCSS@mixin的方式。

任何幫助，高度讚賞。

謝謝。

來源

2017-04-10 Gauzy

好吧，這就是我猜的你問對不對？

我想在我的JSON對象的屬性之一的值取決於樣式代碼（顏色，字體大小，字體寬度）。

這是不可能的，因爲這個想法是，SCSS文件被處理並轉換成靜態CSS文件，然後加載到頁面上。所以考慮到這一點，你可以做的是這個。

假設您有一些可以根據手機類型值而改變的HTML，您可以在HTML中使用這些HTML。

HTML

<div class="phone-type-1"> 
    12345 
</div> 

<div class="phone-type-2"> 
    12345 
</div> 

<div class="phone-type-3"> 
    12345 
</div>

CSS

.phone-type-1 { 
    color: red; 
} 

.phone-type-2 { 
    color: green; 
} 

.phone-type-3 { 
    color: blue; 
}

你可以使用一個mixin這個CSS，但你並不需要。以上就足夠了，就像你需要它一樣。你可以在這裏通過learn more about Mixins解釋他們是如何工作的。

在CSS中的一些事情有點繁瑣寫，特別是與CSS3 和許多供應商前綴存在。一個mixin讓你可以在你的網站中重複使用CSS聲明的組合。你甚至可以通過值來讓你的mixin更加靈活。 mixin的良好用途用於供應商前綴。以下是 border-radius的示例。

作爲一個額外的珍聞，mixin的工作就像這樣。

@mixin text($colour, $size) { 
    color: $colour; 
    font-size: $size; 
} 

.class { 
    @include text(yellow, 14px); 
}

當然，當編譯成CSS文件時，我們所得到的就是這個。

.class { 
    color: yellow; 
    font-size: 14px; 
}

來源

2017-04-10 20:57:25

謝謝Daniel James的詳細回覆，非常感謝。我的意圖是創建一個可重用的代碼塊（而不是像電話類型那樣多的CSS類，我最終會使用:)使用** SCSS **和** @ mixin **，我可以通過它一個參數並可能使用'@if else'來獲得所需的結果。猜猜，我還沒有正確理解SCSS。我還在某處讀到，我們可以在**之前使用'attr（）'函數，並從HTML元素傳入屬性以處理該元素。你對這種方法有什麼看法？再次感謝您的幫助，非常感謝！ – Gauzy

不用擔心。看看這個答案[如何在Sass中使用if語句]（http://stackoverflow.com/a/12410079/7236046）。你可以在CSS中使用HTML屬性，但是CSS將是靜態的，不變的輸出，所以你可以基於[屬性]（https://developer.mozilla.org/en/docs/Web/CSS/attr）進行樣式設置，但是您仍然需要按原樣寫出所有CSS規則。 –

將值從HTML傳遞到SCSS

回答

相關問題