Clevercss2. Python inspirou o pré-processador CSS
Baixe Agora

Clevercss2. Classificação e resumo

Clevercss2. Tag

Css. linguagem de marcação pré-processador Sass. Pré-processador CSS.

Clevercss2. Descrição

Python inspirou CSS Pré-processador CSS Clevercss2 é uma pequena linguagem de marcação para CSS, inspirada por Python, que pode ser usada para construir uma folha de estilo de forma limpa e estruturada. Em muitos aspectos, é mais limpo e mais poderoso que o CSS2 é. A diferença mais óbvia para o CSS é a sintaxe: é baseada em indentação e não plana. Enquanto isso é obviamente contra o python zen, é ainda assim uma boa ideia para estilos estruturais.Nova adicional de sintaxe) (commit) `_this funciona como o norma CSS @Imports, mas espera um arquivo ccss, que é então analisado, permitindo que variáveis transversais (CSS literal) `(cometer) ` _Sometimes CleverCSS é um pouco esperto demais para seu próprio bem e você só quer passar algo diretamente para CSS. Por exemplo, funções que não são RGB () ou URL () precisam ser escapadas. Adicionado é um simples formato de string rodeado de novo backtick que será passado literalmente sem processamento adicional. Exemplo :: .gradient: fundo: `-Moz-linear-gradiente (...)` spritemaps` (confirmação) `_comonly em css, você ' terá uma imagem de todos os seus elementos da interface do usuário e usar o posicionamento de fundo para extrair uma parte dessa imagem. Clevercss ajuda você com isso, através da chamada `spritemap (fn) 'chamada. Por exemplo :: ui = spriteemap ('ui.sprites') algum_button = $ ui.sprite ('ste_button.png') Other_Button = $ ui.sprite ('outro_button.png') div.shing_button: fundo: $ ste_button div. Other_Button: Background: $ Other_Button Largura: $ Other_Button.Width () Altura: $ Other_Button.Height () Mix-ins !! Há atualmente apenas suporte mixin parcial - argumentos ainda não são implementados. Mas eles serão ... em breve. De qualquer forma, a sintaxe para uma macro é Pythonic :: def Macro: Cor: Red Border-Largura: 5px - 1px corpo: $ macrothis Sintaxe pode mudar, no entanto, b / c concebivelmente "Def Macro: Blah" Para o CSS "Def Macro {Blah}", então há alguma mágica inconsistente indo in.nutshellto ter uma ideia de como Clevercss funciona você pode ver um pequeno exemplo abaixo. Observe a sintaxe baseada em indentação e como você pode ninhar regras :: ul # Comentários, OL # Comentários: Margem: 0 Padding: 0 Li: Padding: 0.8em Margem: 0.8em 00.8em H3: Fonte: 1.2em P: PADDING: 0.3EM p.meta: alinhamento de texto: cor à direita: #dddof Claro que você pode fazer o mesmo no CSS, mas por causa de sua natureza plana, o código seria mais detalhado. A seguinte parte do código é a saída Clevercss do arquivo acima :: Ul # Comentários, OL # Comentários {Margem: 0; preenchimento: 0; } ul # Comentários Li, OL # Comentários Li {Padding: 0.4em; Margem: 0,8em 00.8EM; } ul # Comentários Li H3, OL # Comentários Li H3 {font-size: 1.2EM; } ul # Comentários Li P, OL # Comentários Li P {Padding: 0.3em; } ul # Comentários Li P.META, OL # Comentários Li P.Meta {Text-Align: Certo; Cor: #dddddd; } Mas isso é apenas um pequeno exemplo do que você pode fazer com Clevercss. Dê uma olhada na seguinte documentação de Clevercss para mais detalhes. Requisitos: · Pitão

Clevercss2. Software Relacionado