CSS 屬性值來自 class name

Question

class name 可以給CSS傳參數嗎？ 例如：

.mrg-t-X {
   margin-top: Xpx;
}

<span class="mrg-t-10">Test</span>

在此示例中，X 應為 10。

Answer 1

不，不是。 我們最接近的是attr()函數，但它只適用於content屬性：

 figure::before { content: attr(data-before) ', '; } figure::after { content: attr(data-after) '!'; }

 <figure data-before="Hello" data-after="world"></figure>

也許有一天它會被擴展，以便我們可以在其他地方使用它，但目前這是不可能的。

目前，我確定您知道如果您希望能夠使用.mrg-tX類，您需要為您希望允許的每個X定義單獨的樣式規則：

.mrg-t-1 { ... }
.mrg-t-2 { ... }
.mrg-t-3 { ... }
...

Answer 2

現在，您可以在樣式屬性中使用CSS 變量，而不是生成特定的類：

自定義屬性（有時稱為 CSS 變量或級聯變量）是由 CSS 作者定義的實體，其中包含要在整個文檔中重復使用的特定值。 它們使用自定義屬性符號（例如， --main-color: black; ）設置並使用var()函數訪問（例如， color: var(--main-color); ）。

復雜的網站有大量的 CSS，通常有很多重復的值。 例如，可能在數百個不同的地方使用相同的顏色，如果該顏色需要更改，則需要進行全局搜索和替換。 自定義屬性允許將值存儲在一個地方，然后在其他多個地方引用。 另一個好處是語義標識符。 例如， --main-text-color比#00ff00更容易理解，特別是如果在其他上下文中也使用相同的顏色。

自定義屬性受級聯影響並從其父級繼承其值。

例子

 span { display: block; margin-top: var(--mt); } html { background: repeating-linear-gradient(to bottom, transparent, 10px, lightgrey 10px, lightgrey 20px);} /* see 10px steps */

 <span style="--mt:50px">one</span> <span style="--mt:85px">two</span> <span style="--mt:110px;">three</span>

Answer 3

也許您正在尋找 SCSS 或 LESS。 它有 mixins、變量等，它會自動編譯真正的和長的 css。 它是為此目的而編寫的，並且編寫的 css 越來越少，結果相同。

http://sass-lang.com/guide

http://lesscss.org/

 @size: 10px;
 .class { font-size: @size;  }

祝你好運！

Answer 4

不，您的代碼是錯誤的，但您可以在標簽內編寫 css

*<span style="margin-top:Xpx;">*

Answer 5

僅使用 CSS 無法直接傳遞參數，但您不是第一個提出問題的人 - 查看此問題， 該問題查看 CSS 和 JavaScript 選項，這也可能對屬性選擇有所幫助。

這只會在您查看margin-top的幾個變量時有所幫助，但我不知道您在什么上下文中使用它。根據您使用它的目的，可能有更好的方法。

最簡單的方法可能只是將樣式內聯添加到您的 span <span style="margin-top:10px">但我盡量遠離內聯 CSS！