Question

這是我的Html。我把數據視爲190.

<ul> 
    <li class="lecture" data-views="190"></li> 
</ul> 

這是我的CSS代碼。我正試圖動態獲取數據屬性值。我怎樣才能得到這個數據視圖的寬度值。

$aaa:attr(data-views); 
ul li:before{ 
    content:$aaa; 
} 
[data-views='$aaa']{ 
font-size:40px; 
} 
ul li{ 
    width : $aaa; 
} 

Answer 1

你SCSS產生以下CSS：

ul li:before { 
    content: attr(data-views); 
} 

[data-views='$aaa'] { 
    font-size: 40px; 
} 

ul li { 
    width: attr(data-views); 
} 

這是完全有效的CSS，但有2個問題：

1. [data-views='$aaa']可能不是你想要的，[data-views]更有意義。這將選擇具有數據視圖屬性的元素（對..有影響）。
2. width: attr(data-views)是合法，但是unsupported by any browser at the moment。不幸的是，你無能爲力。

由於SASS（與所有其他預處理的CSS風格一樣）會生成標準CSS，因此只能執行CSS允許的任何操作。您不能讓預處理器「計算」CSS規則不存在（在編譯時）標​​記。