Maison  >  Article  >  interface Web  >  Qu’est-ce que CleverCSS ?

Qu’est-ce que CleverCSS ?

青灯夜游
青灯夜游original
2020-11-10 13:51:242054parcourir

CleverCSS est un petit langage de balisage pour CSS, inspiré de Python, utilisant une structure simple et propre. Il peut être utilisé pour créer une feuille de style de manière soignée et structurée. CleverCSS est le plus similaire au CSS. la différence évidente réside dans la syntaxe, qui est basée sur l'indentation et n'est pas monotone.

Qu’est-ce que CleverCSS ?

CleverCSS est un petit langage de balisage pour CSS inspiré de Python qui peut être utilisé pour créer une feuille de style de manière propre et structurée. À bien des égards, il est plus propre et plus puissant que CSS2.

La différence la plus évidente entre CleverCSS et CSS est la syntaxe : elle est basée sur l'indentation et n'est pas monotone. Bien que cela soit évidemment contraire aux règles de Python, cela reste une bonne idée pour organiser les styles.

Un petit exemple :

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

Cependant, vous pouvez également utiliser des attributs :

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

pour définir des constantes :

background_color = #ccc
 
#main:
  background-color: $background_color

Implicitement Concaténation :

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

Calcul :

// 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

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn