LESSCSS란 무엇입니까? 사용하는 방법?

零下一度

풀어 주다： 2017-07-26 11:17:07

원래의

1504명이 탐색했습니다.

LESSCSS란

LESSCSS는 CSS 전처리 언어의 일종인 동적 스타일 언어로 CSS와 유사한 구문을 사용하며 CSS에 변수, 상속, 연산, 함수 등 동적 언어의 특성을 부여합니다. 등을 사용하면 CSS를 더 쉽게 작성하고 유지 관리할 수 있습니다.

LESSCSS는 브라우저, 데스크톱 클라이언트, 서버 등 다양한 언어와 환경에서 사용할 수 있습니다.

언어 기능의 빠른 미리보기:

변수:

변수를 사용하면 일련의 공통 스타일을 개별적으로 정의한 다음 필요할 때 호출할 수 있습니다. 따라서 전역 스타일을 조정할 때 코드 몇 줄만 수정하면 됩니다.

LESS 소스 코드:

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

로그인 후 복사

컴파일된 CSS:

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

로그인 후 복사

Mixins

Mixins는 정의된 클래스 A를 다른 클래스 B에 쉽게 도입할 수 있으므로 클래스 B 구현이 클래스 A의 모든 속성을 상속하는 것이 간단해집니다. . 함수를 사용하는 것처럼 매개변수를 사용하여 호출할 수도 있습니다.

LESS 소스 코드:

.rounded-corners (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

로그인 후 복사

컴파일된 CSS:

#header {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
    border-radius: 5px;
}
#footer {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;
    border-radius: 10px;
}

로그인 후 복사

Nesting

상속을 달성하기 위해 하나의 선택기에 다른 선택기를 중첩할 수 있으므로 코드 양이 크게 줄어듭니다.

LESS 소스 코드:

Nesting

한 선택기를 다른 선택기 내에 중첩하여 상속을 달성할 수 있으며, 이는 코드 양을 크게 줄이고 코드를 더 명확하게 보이게 합니다.

LESS 소스 코드:

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

로그인 후 복사

컴파일된 CSS:

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

로그인 후 복사

함수 및 연산

연산은 속성 값과 색상에 대한 연산을 수행할 수 있습니다. 속성 값 간의 복잡한 관계를 구현합니다. LESS의 함수는 JavaScript 코드에 매핑되어 원하는 경우 속성 값을 조작할 수 있습니다.

LESS 소스 코드:

the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

로그인 후 복사

컴파일된 CSS:

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

로그인 후 복사

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