在声明css类或html div时使用变量

Question

我需要在我的html代码中创建不确定的div，它们彼此之间只有一个特征(例如大小)。

所以，我现在正在做的是使用许多css类，每个类都有我需要的每个div的大小，一个类包含我div的其余样式，声明为<div class="class1 class2"></div>。

我正在寻找一种方法，在我的css或html中合并一个变量，以避免很多类的声明，使得可以在代码中直接改变大小，作为一个例子:

CSS
html { ... } 
.name {
 ...
content: ...;
font: ...;
border: ...;
}
.name_($var) {
 ...
height: ($var);
width: ($var);
}
HTML    
<div class="name name_10"></div> //div 1 size is 10px 10px
<div class="name name_20"></div> //div 2 size is 20px 20px
<div class="name name_50"></div> //div 3 size is 50px 50px
<div class="name name_80"></div> //div 4 size is 80px 80px

这样，就可以有我想要的尽可能多的div，而不必为每个div创建一个类。是否有任何方法来实现这只通过css和html?如果没有，什么可以帮助我得到这个与jq或js?

提前谢谢你们，伙计们!

Answer 1

如果你真的只需要不同的大小，或其他简单的css差异，那么为所有生成的div创建一个主类，并在Javascript(或后端)中设置该类+具有不同属性的内联样式。

…以这样的HTML结尾:

<div class="name" style="height:10px"></div>
<div class="name" style="height:20px"></div>

这样你就可以在JS中(或后端)完成所有的工作，并且你的标记仍然相当简单。

使用常规的旧CSS，您无法做到这一点。如果你想开始学习像这样的CSS变量和函数(加上一些其他整洁的东西)，你应该看看SASS或LESS。

如果你觉得内联CSS和使用JS很舒服，你可以用jQuery来内联它。它不是很好，但能起到作用。:

<div class="name name_10"></div>
<div class="name name_20"></div>

jQuery:

$('.name').each(function(){  
    var $this = $(this),
         size = $this.attr('class').split('_')[1]; // Split the number from the class
    $this.css({
       'width' : size + 'px',
       'height' : size + 'px'
    });
});

虽然这可能有点过分，但您可以在此时手动内联它们。

你也可以试试这样难看的东西:

function addCSS(name, css) {
    var style = document.getElementById("css");
    style.innerHTML += (name + " {" + css + "}");
}
var size = 20;
addCSS(".div1", "background:red; font-size:" + size + "pt;");

<style id="css"></style>
<div class="div1">div</div>