Maison > interface Web > tutoriel CSS > Qu'est-ce que CleverCSS ?

Qu'est-ce que CleverCSS ?

青灯夜游
Libérer: 2020-11-10 13:51:24
original
2091 Les gens l'ont consulté

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
Copier après la connexion

Cependant, vous pouvez également utiliser des attributs :

#main p:
   font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic
Copier après la connexion

pour définir des constantes :

background_color = #ccc
 
#main:
  background-color: $background_color
Copier après la connexion

Implicitement Concaténation :

padding: $foo + 2 + 3 $foo - 2
 
// returns: padding: 15 8; if $foo is 10
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal