Home > Web Front-end > CSS Tutorial > What is CleverCSS?

What is CleverCSS?

青灯夜游
Release: 2020-11-10 13:51:24
Original
2089 people have browsed it

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.

What is CleverCSS?

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
Copy after login

However, you can also use attributes:

#main p:
   font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic
Copy after login

Define constants:

background_color = #ccc
 
#main:
  background-color: $background_color
Copy after login

Implicit Concatenation:

padding: $foo + 2 + 3 $foo - 2
 
// returns: padding: 15 8; if $foo is 10
Copy after login

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
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template