Less와 Sass 프레임워크를 사용하는 방법은 무엇입니까?

PHP中文网
풀어 주다: 2017-06-21 14:28:56
원래의
2155명이 탐색했습니다.

1. 적은 구문

 1. 변수 선언:

  @변수 이름: 변수 값; 다중 상속(믹스):

기존 클래스를 자체 멤버로 호출
1 @newHeight:20px;
로그인 후 복사

  4. 매개변수:

1 .box {2     width: @newHeight;3     height: @newHeight;    
4 }
로그인 후 복사

  5. 중첩:

(중첩은 CSS에 존재할 수 없음)
1 .box1 {2     .box;3 }
로그인 후 복사

1 .newBox(@newWidth) {2     height: @newWidth;3 }4 .box2 {5     .newBox(20px);6 }
로그인 후 복사

2. Sass는 중괄호 {}를 생략합니다. 대표하는 CSS 명령문 끝의 범위와 세미콜론은 대신 들여쓰기와 줄바꿈을 사용합니다. ;

 Scss도 Sass의 한 형태이며, 변수는 다음을 사용하여 선언됩니다. $; 일반적으로 scss를 사용하며, ".scss"로 끝나는 파일을 사용합니다.

 1. 변수 선언 및 호출:
1 .box1 {2     height: 200px;3     width: 100px;4     .box2 {5         height: 200px;6         width: 50px;7     }8 }
로그인 후 복사

 2. 속성 중첩:

 1 /*以下两种格式的代码实现的是同一种效果*/ 2 a { 3     &:hover { 4         color: red; 5     } 6 } 7  8 a:hover { 9     color: red;10 }
로그인 후 복사

 3. 혼합 매크로:

1 /*声明*/2 $newWeight: 30px;3 /*调用*/4 .box {5     width: $newWeight;6 }
로그인 후 복사
 4. 상속:

 1 /*将box1的border设置为1px solid red的边框*/ 2 .box1 { 3     wiodth: $newWeight; 4     border: { 5         top: 1px solid red; 6         right: 1px solid red; 7         bottom: 1px solid red; 8         left: 1px solid red; 9     }10 }
로그인 후 복사
 5. 자리 표시자:

 1 /*声明不带参数的混合宏*/ 2 @mixin newName { 3     width: 50px; 4 } 5 /*调用不带参数的混合宏*/ 6 .box { 7     @include newName; 8 } 9 /*声明带参数的混合宏*/10 @mixin newName($newColor) {11     background-color: $newColor;12 }13 /*调用带参数的混合宏*/14 .box2 {15     @include newNmae(red);16 }
로그인 후 복사
  자리 표시자로 선언된 클래스가 호출되지 않은 경우 자리 표시자 클래스는 컴파일된 ".css" 파일에 존재하지 않습니다.

위 내용은 Less와 Sass 프레임워크를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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