[Flex] programming to write CSS-less applications (I)

See http://s.k-zone.cn/less1 for details
As a Flex Developer, I cannot avoid dealing with HTML, JavaScript, and CSS. 
If you use HTML + JavaScript, I generally use jquery. After all, jquery is a very good choice for Web developers like me.
But for CSS, it is not that convenient, and CSS can only be written at 1.1 points.

I accidentally discovered an interesting application: less.

So what isLess What about it?
In short: the programming method is to write CSS .

Example:
CSS Method:
# Header {color: # 4d926f ;}
H2 {color: # 4d926f ;}

Less Method:
@ Brand_color: # 4d926f;
# Header {color: @ brand_color ;}
H2 {color: @ brand_color ;}

Is it easy? So Less How to Use and install it?

UseLess Support for Ruby environments is required! This article does not cover how to install Ruby. Article For more information, see G :)
After Ruby is installed, lessc needs to be installed at: http://s.k-zone.cn/lessdown

Compilation Method: $ lessc style. Less style.css

Less With the following syntax, I roughly translate, the original in: http://s.k-zone.cn/less

Variable)
Describe variables for the same value in different places, define them in a uniform manner, and assign values to the desired values.

CSS Statement:
# Header {color: # 4d926f ;}
H2 {color: # 4d926f ;}

Less Statement:

@ Brand_color: # 4d926f;
# Header {color: @ brand_color ;}
H2 {color: @ brand_color ;}
Reference (mixins)
In a class, you can reference the name of another class as the attribute of this class. (Similar to variables, but variables defined by variables and attribute sets defined by mixins) CSS:

# Header {

-Moz-border-radius: 8px;-WebKit-border-radius: 8px; border-radius: 8px; }# footer {-moz-border-radius: 8px; -WebKit-border-radius: 8px; border-radius: 8px ;}LessStatement :. rounded_corners {-moz-border-radius: 8px;-WebKit-border-radius: 8px; border-radius: 8px;} # header {. rounded_corners;} # footer {. rounded_corners ;}

nested rules (nested rules)
put the same content together to avoid the CSS block being too long and difficult to read. CSS : # header {color: Red ;}# header A {font-weight: bold; text-Decoration: none;} less : # header {color: red; A {font-weight: bold; text-Decoration: None ;}

Expression (Operations)
You can set attributes through some simple calculations. CSS Syntax: # header {color: #333; border-left: 1px; border-Right: 2px; }# footer {color: #222 ;} Less Syntax: @ the-border: 1px; @ base-color: #111; # header {color: @ base-color * 3; border-left: @ the-border; border-Right: @ the-border * 2;} # footer {color: @ base-color ++ #111 ;} Note: @ the-border and @ base-color use the variables method.
Using the above four methods can greatly simplify your CSS Developed. Is it easy? SoLess It is not omnipotent. It also has some shortcomings. I will describe it in the next article. Less .