1.LESSCSS는 동적 스타일 언어로 CSS 전처리 언어의 일종으로 CSS와 유사한 구문을 사용하며 CSS에 변수, 상속 등 동적 언어의 특성을 부여합니다. 작업, 함수 등을 사용하여 CSS를 더 쉽게 작성하고 유지 관리할 수 있습니다.
LESSCSS는 브라우저, 데스크톱 클라이언트, 서버 등 다양한 언어와 환경에서 사용할 수 있습니다.
Koala Koala--컴파일 중에 생성된 CSS 폴더가 없으면 Koala가 자동으로 폴더를 생성합니다.
언어 설정 방법
컴파일 방법
-
Webstorm이 덜 컴파일을 지원하도록 허용:
....
// Less에만 표시
/**/ 컴파일하는 동안 컴파일됩니다. 좋은 CSS 파일은
변수
적은 작성 방법>
을 표시합니다. 컴파일 후 CSS에 표시되는 Mixing@ly_width:100px; .box { width:@ly_width; }
.box { width:100px; }
.border_radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width:3px;) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(); }
컴파일 후 CSS에 표시되는 내용은
.one { width: 100px; height: 200px; background-color: #008000; border: 3px solid #ff0000; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(1px); }
는 다음과 같이 작성됩니다.
.one { width: 100px; height: 200px; background-color: #008000; border: 1px solid #ff0000; }
컴파일 후 CSS에 표시되는 내용은
.border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }
매개변수와 혼합---기본값 사용(여러 매개변수 가능) 아래는 매개변수 1개를 예시로 전달합니다.)
@ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border; }
less
//定义上,下,左,右边框的样式 .border(top;@border_width:5px;@border_color:red){ border-top:@border_width solid @border_color; } .border(bottom;@border_width:5px;@border_color:red){ border-bottom:@border_width solid @border_color; } .border(left;@border_width:5px;@border_color:red){ border-left:@border_width solid @border_color; } .border(right;@border_width:5px;@border_color:red){ border-right:@border_width solid @border_color; } //如果想写通用的样式 可以在下面的代码中写 格式是固定的 .border(@_,@border_width:5px;@border_color:red){ border-color:yellow; } .border_use1 { //选择和if差不多 如果是left就调用上面对应的 .border(left); } .border_use2 { //选择和if差不多 如果是right就调用上面对应的 .border(right); }
.border_use1 { border-left:5px solid #ff0000; border-color:yellow; } .border_use2 { border-right:5px solid #ff0000; border-color:yellow; }
html 구조
@ly_width:100px; .one { width:@ly_widht + 100; }
.one { width:200px; }
<p class="one"> <p class="two"></p> </p>
less
@ly_width:100px; @ly_height:200px; @ly_color:red; .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .two { background-color: green; } }
.one { width: 100px; height: 200px; background-color: #ff0000; } .one .two { background-color: green; }
위 내용은 Less를 활용하는 방법 소개(변수, 혼합, 매칭, 연산, 중첩)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!