CSS類的名稱空間/前綴，在Javascript和（S）之間共享CSS

我在寫一個涉及DOM CSS樣式的可重用JavaScript片段（jQuery插件）。既然它應該可以被任何人使用，我想避免它的CSS類名和文檔上其他現有類之間的衝突。這就是爲什麼我使用名稱空間字符串作爲其所有類名的前綴（例如，如果我的前綴是prfx-，類grid將變爲prfx-grid）。爲了尊重DRY，並使其易於更改，我只想聲明我的前綴一次，並從CSS電子表格（可能使用Sass）和Javascript代碼訪問它。如果可能的話，我還想繼續使用2個文件（我的.js和我的.css）。CSS類的名稱空間/前綴，在Javascript和（S）之間共享CSS

有沒有辦法聲明這樣的前綴/名稱空間常量，以便它可以從（S）CSS和Javascript訪問？

來源

2012-05-30 Emmanuel Joubaud

我不知道一個容易方式只有一個地方定義它。但它很簡單，只能在兩個地方定義：一次在JavaScript中，一次在SASS中。在JavaScript中，你可以使用全局變量（或不過其他存儲您的常量值），並在上海社會科學院，你可以這樣定義前綴：

$prefix: 'prfx-'; 

.#{$prefix}grid { 
    /* compiles to .prfx-grid */ 
} 

.#{$prefix}other { 
    /* and so on */ 
}

它可能不是像你一樣跨越具有單一的定義無論是JavaScript還是CSS，但在兩個地方進行更改肯定比全局查找替換要好。從理論上講，你可能會向SASS添加一個Ruby擴展，它會從Javascript代碼可以通過AJAX訪問的文件中讀取前綴值，但在我看來，這樣的系統不值得額外付出努力設置並正常工作。

來源

2012-05-31 13:30:40 hopper

您可以定義一個僞元素並使用CSS的content屬性將您的SCSS前綴傳輸給JavaScript。我在這個例子中使用<body>但它可以是任何僞元素：

$prefix: 'myPrefix'; 

body::after { 
    // Value must be quoted, so we use 
    // string interpolation to print variable 
    content: '#{$prefix}'; 
}

然後JavaScript可以尋找這個文本在運行時使用它作爲一個前綴：

// pseudos can't be selected like normal DOM elements due to 
// browser specs, but you can grab computed styles and remove 
// the quotes yourself. 
var prefix = window.getComputedStyle(document.body, '::after').getPropertyValue('content').replace(/"/g,''); 
// result: 'myPrefix'

的計算的取風格導致迴流/佈局/繪畫，但如果你只是這樣做了一次，它不是世界末日。

來源

2018-01-18 10:34:37

CSS類的名稱空間/前綴，在Javascript和（S）之間共享CSS

回答

相關問題