为什么CSS本身不支持变量和层次结构？

我是UI开发的新手，但是我对CSS的工作方式感到不舒服。

我的用例是我想div在页面上的特定内部应用某些特定的样式。

CSS尝试：

div.class1 {
    font: normal 12px arial, helvetica, sans-serif;
    font-color: #f30;
}
div.class1 div.class2 {
    border: 1px solid #f30;
}

较少尝试：

@red: #f30;
@font-family: arial, helvetica, sans-serif;
div.class1 {
    font: normal 12px @font-family;
    font-color: @red;
    div.class2 {
        border: 1px solid @red;
    }

该CSS版本可诱发错误的，因为它迫使你重复#f30及div.class2每次尝试实现层次结构和可变的再利用时间。

我的问题：

• 为什么CSS使事情变得困难？
• LESS没什么特别的-只是做出了明显的改进并转换为CSS？
• CSS希望激发用户什么，因为它促进了这种冗余的编码风格？

我坚信CSS应该是LESS。绝对地，我忽略了一些为什么CSS会这样做的明显优势。我以为这是一个遗留问题，但是当我没有尝试使用CSS3解决这个问题时，我感到很惊讶。

请帮助我了解如何处理CSS？

CSS并非故意使事情变得更困难，它的设计目标是要简单得多，变量和层次结构并不是唯一的缺点。LESS和Sass专为解决这些缺点而存在，在本机支持任何一种功能之前，您都应坚持使用它们。

也就是说，W3C的CSS工作组正在研究CSS变量和CSS层次结构的草案：

• CSS变量模块级别1
• CSS层次结构模块级别3

绝对没有办法告诉任何草案什么时候准备好实施，或者主要浏览器将在多长时间采用它们。我只能说CSS变量草稿已接近采用，您已经可以在Chrome，Safari和Firefox中测试驱动器CSS变量，但是请记住，所有这三种浏览器的支持都被认为是实验性的，并且可能会发生变化。有关更多详细信息，请阅读在MDN上使用CSS变量。