CleverCSS란 무엇인가요?-CSS 튜토리얼-php.cn

CleverCSS란 무엇인가요?

青灯夜游

풀어 주다： 2020-11-10 13:51:24

원래의

2090명이 탐색했습니다.

CleverCSS는 Python에서 영감을 받아 깔끔하고 구조화된 방식으로 스타일 시트를 만드는 데 사용할 수 있는 작은 CSS용 마크업 언어입니다. 들여쓰기를 기반으로 하며 단조롭지 않습니다.

CleverCSS란 무엇인가요?

CleverCSS는 Python에서 영감을 받은 작은 CSS용 마크업 언어로, 깔끔하고 구조화된 방식으로 스타일시트를 만드는 데 사용할 수 있습니다. 여러 면에서 CSS2보다 더 깔끔하고 강력합니다.

CleverCSS와 CSS의 가장 분명한 차이점은 구문입니다. 들여쓰기를 기반으로 하며 단조롭지 않습니다. 이는 분명히 Python의 규칙에 위배되지만 스타일을 구성하는 데는 여전히 좋은 아이디어입니다.

작은 예:

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

로그인 후 복사

그러나 속성을 사용할 수도 있습니다:

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

로그인 후 복사

상수 정의:

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

로그인 후 복사

암시적 연결:

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

로그인 후 복사

계산:

// 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"         -> &#39;blub blahbaz&#39;
 
// 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

로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면 다음 사이트를 방문하세요. 프로그래밍 가르침! !

위 내용은 CleverCSS란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!