Why is that variables and hierarchy is not supported in css by default?

[AYAN]

I am somewhat new to UI development, but I am very much uncomfortable with how CSS actually works.My use-case : [ Attempted with css & less ]I wanted to apply some specific styles inside a particular \[code\]div\[/code\] on a page.css attempt :\[code\]div.class1 { font: normal 12px arial, helvetica, sans-serif; font-color: #f30;}div.class1 div.class2 { border: 1px solid #f30;}\[/code\]less attempt :\[code\]@red: #f30;@font-family: arial, helvetica, sans-serif;div.class1 { font: normal 12px @font-family; font-color: @red; div.class2 { border: 1px solid @red; }\[/code\]

• Now, writing css can induce bugs since it forces you to repeat \[code\]#f30\[/code\] & \[code\]div.class2\[/code\] everytime you try to achieve hierarchy and variable re-use.

My Question :

• Why is that css makes things difficult ?
• less does nothing special - just makes obvious improvements and translates to css ?
• What is that css wants to motivate in users because of which it promotes such a redundant coding style ?

I strongly believe css should be what less is. Definitely I am overlooking some obvious advantage of why things are done that way in css.I thought it was a legacy problem, but I was surprised when I saw no attempts to solve this with css3.Please help me understand how should I approach css ?