> 웹 프론트엔드 > CSS 튜토리얼 > CleverCSS란 무엇인가요?

CleverCSS란 무엇인가요?

青灯夜游
풀어 주다: 2020-11-10 13:51:24
원래의
2073명이 탐색했습니다.

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"         -> '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
로그인 후 복사

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

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

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿