CleverCSS is a small markup language for CSS, inspired by Python, using a simple and clean structure. It can be used to create a style sheet in a neat and structured way; CleverCSS is the most similar to CSS The obvious difference is the syntax, which is based on indentation and is not monotonous.
CleverCSS is a small Python-inspired markup language for CSS that can be used to create a stylesheet in a clean and structured way. In many ways it is cleaner and more powerful than CSS2.
The most obvious difference between CleverCSS and CSS is the syntax: it is based on indentation and is not monotonous. Although this is obviously against the rules of Python, it is still a good idea for organizing styles.
A small example:
ul#comments, ol#comments: margin: 0 padding: 0 li: padding: 0.4em margin: 0.8em 0 0.8em h3: font-size: 1.2em p: padding: 0.3em p.meta: text-align: right color: #ddd
However, you can also use attributes:
#main p: font-> family: Verdana, sans-serif size: 1.1em style: italic
Define constants:
background_color = #ccc #main: background-color: $background_color
Implicit Concatenation:
padding: $foo + 2 + 3 $foo - 2 // returns: padding: 15 8; if $foo is 10
Calculation:
// calculations with numbers / values 42px + 2 -> 44px 10px * 2 -> 20px 1cm + 1mm -> 11mm (1 + 2) * 3 -> 9 // string concatenation foo + bar -> foobar "blub blah" + "baz" -> 'blub blahbaz' // You can also calculate with numbers: #fff - #ccc -> #333333 cornflowerblue - coral -> #00169d // You can also add or subtract a number from it and it will do so for all three channels (red, green, blue): crimson - 20 -> #c80028
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of What is CleverCSS?. For more information, please follow other related articles on the PHP Chinese website!