위의 명령을 실행하면 style.css 파일이 자동으로 생성 됩니다. LESS 파일을 변경할 때마다 위의 명령을 실행해야합니다.cmd그러면 style.css 파일이 업데이트됩니다.
있는 style.css 위의 명령을 실행할 때 파일에 다음 코드를해야합니다 -
style.css
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
산출
이제 위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.
위의 HTML 코드를 hello.htm 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.
기술
한 클래스의 속성을 다른 클래스에 사용할 수 있도록 허용하고 클래스 이름을 속성으로 포함하는 CSS 속성 그룹입니다. LESS에서는 class 또는 id 선택기를 사용하여 CSS 스타일과 동일한 방식으로 mixin을 선언 할 수 있습니다. 여러 값을 저장할 수 있으며 필요할 때마다 코드에서 재사용 할 수 있습니다.
예
다음 예제는 LESS 파일에서 중첩 된 규칙의 사용을 보여줍니다.
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class = "myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
이제 위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
산출
위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.
위의 HTML 코드를 functions.html 파일.
브라우저에서이 HTML 파일을 열면 다음과 같은 출력이 표시됩니다.
기술
네임 스페이스는 공통 이름으로 믹스 인을 그룹화하는 데 사용됩니다. 네임 스페이스를 사용하면 이름 충돌을 피하고 외부에서 믹스 인 그룹을 캡슐화 할 수 있습니다.
예
다음 예제는 LESS 파일에서 네임 스페이스와 접근 자의 사용을 보여줍니다-
<html>
<head>
<title>Less Namespaces and Accessors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Namespaces and Accessors</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
style.css
.myclass {
font-size: 20px;
color: green;
}
산출
위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.
위의 HTML 코드를 scope.html 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.
기술
주석은 사용자가 코드를 명확하고 이해할 수 있도록합니다. 코드에서 블록 스타일과 인라인 주석을 모두 사용할 수 있지만 LESS 코드를 컴파일하면 CSS 파일에 한 줄 주석이 나타나지 않습니다.
예
다음 예제는 LESS 파일의 주석 사용을 보여줍니다.
<html>
<head>
<title>Less Comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Comments</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
</body>
</html>
이제 style.less 파일을 작성 하십시오.
style.less
/* It displays the
green color! */
.myclass {
color: green;
}
// It displays the blue color
.myclass1 {
color: red;
}
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
이제 위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
산출
위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.
위의 HTML 코드를 comments.html 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.
기술
LESS 또는 CSS 파일의 내용을 가져 오는 데 사용됩니다.
예
다음 예제는 LESS 파일에서 가져 오기의 사용을 보여줍니다-
<html>
<head>
<title>Less Importing</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Importing</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
<p class = "myclass2">LESS supports creating cleaner,
cross-browser friendly CSS faster and easier.</p>
</body>
</html>
그만큼 &:extend(selector) 구문은 규칙 세트의 본문 안에 넣을 수 있습니다.
삼
중첩 된 선택기 확장
중첩 선택기는 확장 선택기를 사용하여 일치합니다 .
4
확장을 사용한 정확한 일치
기본적으로, extend 선택자 간의 정확한 일치를 찾습니다.
5
n 번째 식
n 번째 표현식의 형태는 extend에서 중요합니다. 그렇지 않으면 선택자를 다르게 취급합니다.
6
"모두"확장
키워드 all 이 마침내 확인되면extend 인수 후 LESS는 해당 선택자를 다른 선택 자의 일부로 일치시킵니다.
7
확장을 사용한 선택기 보간
그만큼 extend 보간 된 선택기에 연결할 수 있습니다.
8
@media 내부 범위 지정 / 확장
Extend는 동일한 미디어 선언 내에있는 선택자와 만 일치합니다.
9
중복 감지
선택 자의 중복을 감지 할 수 없습니다.
다음은 확장 사용 사례 유형입니다.
Sr. 아니.
유형 및 설명
1
클래식 사용 사례
LESS에 기본 클래스를 추가하는 것을 방지하기 위해 클래식 사용 사례가 사용됩니다.
2
CSS 크기 줄이기
확장은 사용하려는 속성까지 선택기를 이동하는 데 사용됩니다. 이는 CSS 생성 코드를 줄이는 데 도움이됩니다.
삼
스타일 결합 / 고급 믹스 인
extend를 사용하면 특정 선택기의 동일한 스타일을 다른 선택기로 결합 할 수 있습니다.
믹스 인은 프로그래밍 언어의 함수와 유사합니다. 믹스 인은 한 클래스의 속성을 다른 클래스에 사용할 수 있도록하고 클래스 이름을 속성으로 포함하는 CSS 속성 그룹입니다. LESS에서는 클래스 또는 ID 선택기를 사용하여 CSS 스타일과 동일한 방식으로 믹스 인을 선언 할 수 있습니다. 여러 값을 저장할 수 있으며 필요할 때마다 코드에서 재사용 할 수 있습니다.
다음 표는 LESS 믹스 인의 사용 을 자세히 보여줍니다 .
Sr. 아니.
Mixins 사용법 및 설명
1
Mixin을 출력하지 않음
믹스 인은 단순히 괄호를 뒤에 배치하여 출력에서 사라지도록 만들 수 있습니다.
2
Mixins의 선택기
믹스 인은 속성뿐만 아니라 선택 자도 포함 할 수 있습니다.
삼
네임 스페이스
네임 스페이스는 공통 이름으로 믹스 인을 그룹화하는 데 사용됩니다.
4
보호 된 네임 스페이스
가드가 네임 스페이스에 적용되면 가드 조건이 참을 반환 할 때만 정의 된 믹스 인이 사용됩니다.
5
! important 키워드
! 중요한 키워드는 특정 속성을 재정의하는 데 사용됩니다.
예
다음 예제 는 LESS 파일에서 믹스 인의 사용을 보여줍니다 -
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class = "p1">LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<p class = "p3">LESS is cross browser friendly.</p>
</body>
</html>
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
산출
위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.
위의 HTML 코드를 passing_ruleset.htm 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.
범위 지정
분리 된 규칙 세트의 모든 변수와 믹스 인은 규칙 세트가 호출되거나 정의 된 모든 곳에서 사용할 수 있습니다. 그렇지 않으면 기본적으로 호출자와 정의 범위를 모두 사용할 수 있습니다. 선언 범위는 두 범위가 동일한 믹스 인 또는 변수를 포함 할 때 우선 순위를 갖습니다. 분리 된 규칙 세트 본문은 선언 범위에 정의됩니다. 분리 된 규칙 세트가 한 변수에서 다른 변수로 복사 된 후에는 범위가 변경되지 않습니다.
다음 표는 범위의 모든 유형을 나열합니다-
Sr. 아니.
유형 및 설명
1
정의 및 발신자 범위 가시성
변수와 믹스 인은 분리 된 규칙 세트 내에 정의됩니다.
2
참조는 분리 된 규칙 집합 범위를 수정하지 않습니다.
참조를 제공하는 것만으로 규칙 세트는 새 범위에 액세스하지 않습니다.
삼
잠금 해제하면 분리 된 규칙 세트 범위가 수정됩니다.
분리 된 규칙 세트는 범위로 가져 와서 액세스 할 수 있습니다.
기술
그만큼 @import지시문은 코드에서 파일을 가져 오는 데 사용됩니다. LESS 코드를 다른 파일에 분산시키고 코드 구조를 쉽게 유지할 수 있습니다. 코드의 아무 곳에 나 @import 문을 넣을 수 있습니다 .
예를 들어 다음을 사용하여 파일을 가져올 수 있습니다. @import키워드로 @import "file_name.less" .
파일 확장자
다음 과 같은 다른 파일 확장자에 따라 @import 문을 사용할 수 있습니다.
.css 확장자를 사용하는 경우 CSS로 간주되고 @import 문은 그대로 유지됩니다.
다른 확장자가 포함 된 경우 LESS로 간주되어 가져옵니다.
LESS 확장자가 없으면 가져온 LESS 파일로 추가 및 포함됩니다.
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
예
다음 예제는 SCSS 파일에서 변수의 사용을 보여줍니다-
<!doctype html>
<head>
<title>Import Directives</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class = "myline">Welcome to Tutorialspoint...</p>
</body>
</html>
이 장에서 우리는 Import Options적게. LESS는@import 스타일 시트가 LESS 및 CSS 스타일 시트를 모두 가져올 수 있도록하는 문입니다.
다음 표에는 import 문에서 구현 될 가져 오기 지시문이 나열되어 있습니다.
Sr. 아니.
가져 오기 옵션 및 설명
1
참고
LESS 파일을 참조로만 사용하며 출력하지 않습니다.
2
인라인
처리하지 않고 CSS를 출력에 복사 할 수 있습니다.
삼
적게
파일 확장자에 관계없이 가져온 파일을 일반 LESS 파일로 취급합니다.
4
CSS
파일 확장자에 관계없이 가져온 파일을 일반 CSS 파일로 취급합니다.
5
한번
파일을 한 번만 가져옵니다.
6
배수
파일을 여러 번 가져옵니다.
7
선택 과목
가져올 파일을 찾을 수없는 경우에도 계속 컴파일됩니다.
두 개 이상의 키워드를 사용할 수 있습니다. @import 그러나 키워드를 구분하려면 쉼표를 사용해야합니다.
예를 들어-
@import (less, optional) "custom.css";
기술
표현식의 간단한 값이나 인수 수를 일치 시키려면 가드를 사용할 수 있습니다. mixin 선언과 연결되며 mixin에 연결된 조건을 포함합니다. 각 믹스 인에는 쉼표로 구분 된 하나 이상의 가드가 있습니다. 가드는 괄호로 묶어야합니다. LESS는 대신 보호 된 믹스 인을 사용합니다.if/else 일치하는 믹스 인을 지정하는 계산을 수행합니다.
다음 표는 설명과 함께 다양한 유형의 mixin 가드를 설명합니다.
Sr. 아니.
유형 및 설명
1
가드 비교 연산자
비교 연산자 (=)를 사용하여 숫자, 문자열, 식별자 등을 비교할 수 있습니다.
2
논리 연산자 보호
및 키워드를 사용하여 가드가있는 논리 연산자를 해결할 수 있습니다 .
삼
유형 검사 기능
믹스 인 일치에 대한 값 유형을 결정하는 내장 함수가 포함되어 있습니다.
4
조건부 믹스
LESS는 기본 기능을 사용하여 mixin을 다른 믹싱 매치와 일치시킵니다.
예
다음 예제는 LESS 파일에서 mixin 가드의 사용을 보여줍니다-
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Mixin Guards</h2>
<p class = "class1">Hello World...</p>
<p class = "class2">Welcome to Tutorialspoint...</p>
</body>
</html>
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
style.css
.style {
background-color: blue;
color: white;
}
산출
위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.
위의 HTML 코드를 css_guard.htm 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.
이 장에서 우리는 LESS에서 루프가 어떻게 작동하는지 이해할 것입니다. Loops 문을 사용하면 문 또는 문 그룹을 여러 번 실행할 수 있습니다. 재귀 적 mixin이 결합되면 다양한 반복 / 루프 구조가 생성 될 수 있습니다.Guard Expressions 과 Pattern Matching.
예
다음 예제는 LESS 파일에서 루프의 사용을 보여줍니다-
loop_example.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
다음으로 style.less 파일을 만듭니다 .
style.less
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 할 수 있습니다.
lessc style.less style.css
위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
위의 예에서 & 선택자를 참조 a.
산출
위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.
위의 HTML 코드를 parent_selector1.htm 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.
부모 선택기의 기본값이 아닌 다른 방법으로 중첩 된 규칙의 선택기를 결합 할 때 운영자는, 같은 많은 용도를 가지고있다. 또 다른 일반적인 사용&클래스 이름을 반복적으로 생성하는 것입니다. 자세한 내용은 여기를 클릭하십시오 .
기타 기능은 다른 종류의 기능 그룹으로 구성됩니다.
다음 표는 기타 기능의 모든 유형을 나열합니다-
Sr. 아니.
기능 및 설명
1
색깔
색상을 나타내는 문자열입니다.
2
이미지 크기
파일에서 이미지의 치수를 검사하는 데 사용됩니다.
삼
이미지-너비
파일에서 이미지의 너비를 검사합니다.
4
이미지-높이
파일에서 이미지의 높이를 검사합니다.
5
변하게 하다
숫자는 한 단위에서 다른 단위로 변환됩니다.
6
데이터-uri
데이터 URI는 웹 페이지에서 리소스를 인라인으로 가져 오는 URI (Uniform Resource Identifier) 스키마입니다.
7
기본
기본 함수는 가드 조건 내에서 사용할 수 있고 다른 믹스 인과 일치하지 않는 경우에만 true를 반환합니다.
8
단위
기본 함수는 가드 조건 내에서 사용할 수 있고 다른 믹스 인과 일치하지 않는 경우에만 true를 반환합니다.
9
get-단위
get-단위 함수는 인수가 숫자 및 단위와 함께 존재하는 단위를 반환합니다.
10
svg-구배
svg-gradient는 한 색상을 다른 색상으로 전환하는 것입니다. 동일한 요소에 많은 색상을 추가 할 수 있습니다.
기술
Less는 아래 나열된 일부 문자열 함수를 지원합니다.
escape
e
% 형식
replace
다음 표는 설명과 함께 위의 문자열 함수를 설명합니다.
Sr. 아니.
유형 및 설명
예
1
Escape
특수 문자에 대한 URL 인코딩을 사용하여 문자열 또는 정보를 인코딩합니다. 다음과 같은 일부 문자를 인코딩 할 수 없습니다., , / , ? , @ , & , + , ~ , ! , $ , ' 인코딩 할 수있는 일부 문자 \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ 과 =.
escape("Hello!! welcome to Tutorialspoint!")
이스케이프 된 문자열을 다음과 같이 출력합니다.
Hello%21%21%20welcome%20to%20Tutorialspoint%21
2
e
문자열을 매개 변수로 사용하고 따옴표없이 정보를 반환하는 문자열 함수입니다. ~ "일부 콘텐츠" 이스케이프 된 값과 숫자를 매개 변수로 사용하는 CSS 이스케이프입니다 .
LESS는 다양한 방식으로 색상을 변경하고 조작 할 수있는 유용한 색상 기능을 제공합니다. LESS는 아래 표와 같이 일부 색상 정의 기능을 지원합니다.
Sr. 아니.
기능 및 설명
예
1
rgb
빨간색, 녹색 및 파란색 값에서 색상을 만듭니다. 그것은 다음과 같은 매개 변수가 있습니다-
red − 0 ~ 255 사이의 정수 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
green − 0 ~ 255 사이의 정수 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
blue − 0 ~ 255 사이의 정수 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
rgb(220,20,60)
rgb 값으로 색상을 다음과 같이 변환합니다.
#dc143c
2
rgba
빨강, 녹색, 파랑 및 알파 값에서 색상을 결정합니다. 다음과 같은 매개 변수가 있습니다.
red − 0 ~ 255 사이의 정수 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
green − 0 ~ 255 사이의 정수 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
blue − 0 ~ 255 사이의 정수 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
alpha − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
rgba(220,20,60, 0.5)
rgba 값을 가진 색상 객체를 다음과 같이 변환합니다.
rgba(220, 20, 60, 0.5)
삼
argb
색상의 16 진수 표현을 정의합니다. #AARRGGBB체재. 다음 매개 변수를 사용합니다-
color − 색상 개체를 지정합니다.
argb(rgba(176,23,31,0.5))
argb 색상을 다음과 같이 반환합니다.
#80b0171f
4
hsl
색조, 채도 및 밝기 값에서 색상을 생성합니다. 그것은 다음과 같은 매개 변수가 있습니다-
hue −도를 나타내는 0-360 사이의 정수를 포함합니다.
saturation − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
lightness − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
hsl(120,100%, 50%)
HSL 값을 사용하여 색상 객체를 반환합니다.
#00ff00
5
hsla
색조, 채도, 밝기 및 알파 값에서 색상을 생성합니다. 다음과 같은 매개 변수가 있습니다.
hue −도를 나타내는 0-360 사이의 정수를 포함합니다.
saturation − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
lightness − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
alpha − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
hsla(0,100%,50%,0.5)
HSLA 값을 사용하여 색상 객체를 지정합니다.
rgba(255, 0, 0, 0.5);
6
hsv
색조, 채도 및 값 값에서 색상을 생성합니다. 그것은 다음 매개 변수를 포함합니다-
hue −도를 나타내는 0-360 사이의 정수를 포함합니다.
saturation − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
value − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
hsv(80,90%,70%)
hsv 값을 가진 색상 객체를 다음과 같이 변환합니다.
#7db312
7
hsva
색조, 채도, 값 및 알파 값에서 색상을 생성합니다. 다음 매개 변수를 사용합니다-
hue −도를 나타내는 0-360 사이의 정수를 포함합니다.
saturation − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
value − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
alpha − 0 ~ 1 사이의 숫자 또는 0 ~ 100 % 사이의 백분율을 포함합니다.
hsva(80,90%,70%,0.6)
hsva 값으로 색상 객체를 다음과 같이 지정합니다.
rgba(125, 179, 18, 0.6)
이 장에서는 LESS에서 컬러 채널 기능의 중요성을 이해합니다. LESS는 채널에 대한 값을 설정하는 내장 기능을 거의 지원하지 않습니다. 채널은 색상 정의에 따라 값을 설정합니다. HSL 색상에는 색조, 채도 및 밝기 채널이 있고 RGB 색상에는 빨강, 녹색 및 파랑 채널이 있습니다. 다음 표는 모든 색상 채널 기능을 나열합니다.
Sr. 아니.
기능 및 설명
예
1
hue
HSL 색 공간에서 색조 채널은 색 개체에서 추출됩니다.
background: hue(hsl(75, 90%, 30%));
아래와 같이 CSS로 컴파일됩니다.
background: 75;
2
saturation
HSL 색상 공간에서 채도 채널은 색상 개체에서 추출됩니다.
background: saturation(hsl(75, 90%, 30%));
아래와 같이 CSS로 컴파일됩니다.
background: 90%;
삼
lightness
HSL 색상 공간에서 밝기 채널은 색상 객체에서 추출됩니다.
background: lightness(hsl(75, 90%, 30%));
아래와 같이 CSS로 컴파일됩니다.
background: 30%;
4
hsvhue
HSV 색 공간에서 색조 채널은 색 개체에서 추출됩니다.
background: hsvhue(hsv(75, 90%, 30%));
아래와 같이 CSS로 컴파일됩니다.
background: 75;
5
hsvsaturation
HSL 색상 공간에서 채도 채널은 색상 개체에서 추출됩니다.
background: hsvsaturation(hsv(75, 90%, 30%));
아래와 같이 CSS로 컴파일됩니다.
background: 90%;
6
hsvvalue
HSL 색상 공간에서 값 채널은 색상 객체에서 추출됩니다.
background: hsvvalue(hsv(75, 90%, 30%));
아래와 같이 CSS로 컴파일됩니다.
background: 30%;
7
red
빨간색 채널은 색상 개체에서 추출됩니다.
background: red(rgb(5, 15, 25));
아래와 같이 CSS로 컴파일됩니다.
background: 5;
8
green
녹색 채널이 색상 개체에서 추출됩니다.
background: green(rgb(5, 15, 25));
아래와 같이 CSS로 컴파일됩니다.
background: 15;
9
blue
파란색 채널이 색상 개체에서 추출됩니다.
background: blue(rgb(5, 15, 25));
아래와 같이 CSS로 컴파일됩니다.
background: 25;
10
alpha
알파 채널은 색상 객체에서 추출됩니다.
background: alpha(rgba(5, 15, 25, 1.5));
아래와 같이 CSS로 컴파일됩니다.
background: 2;
11
luma
루마 값은 색상 객체에서 계산됩니다.
background: luma(rgb(50, 250, 150));
아래와 같이 CSS로 컴파일됩니다.
background: 71.2513323%;
12
luminance
루마 값은 감마 보정없이 계산됩니다.
background: luminance(rgb(50, 250, 150));
아래와 같이 CSS로 컴파일됩니다.
background: 78.53333333%;
기술
LESS는 다양한 방식으로 색상을 변경 및 조작하고 동일한 단위에서 매개 변수를 가져 오는 여러 유용한 작동 기능을 제공합니다. LESS는 아래 표와 같이 일부 색상 연산 기능을 지원합니다.
Sr. 아니.
지침 및 설명
1
가득한
요소에서 색상의 강도 또는 채도를 변경합니다.
2
채도를 낮추다
요소에서 색상의 강도 또는 채도를 감소시킵니다.
삼
가볍게 하다
요소의 색상 밝기를 증가시킵니다.
4
어둡게 하다
요소에서 색상의 강도 또는 채도를 변경합니다.
5
점점 뚜렷해지다
선택한 요소의 불투명도를 높입니다.
6
사라지다
선택한 요소의 불투명도를 줄입니다.
7
바래다
선택한 요소의 색상 투명도를 설정하는 데 사용됩니다.
8
회전
선택한 요소의 색상 각도를 회전하는 데 사용됩니다.
9
혼합
불투명도와 함께 두 가지 색상을 혼합합니다.
10
색조
색상의 비율을 줄이면 색상이 흰색과 혼합됩니다.
11
그늘
색상의 비율을 줄이면 색상이 검은 색과 혼합됩니다.
12
그레이 스케일
선택한 요소의 색상에서 채도를 버립니다.
13
대조
요소의 색상 대비를 설정합니다.
이 장에서 우리는 Color Blending Functions적게. 이들은 Photoshop, Fireworks 또는 GIMP와 같은 이미지 편집기에서 사용되는 유사한 작업으로 CSS 색상을 이미지와 일치시킵니다.
다음 표는 LESS에서 사용되는 색상 혼합 기능을 보여줍니다.
Sr. 아니.
기능 및 설명
1
곱하다
두 가지 색상을 곱하고 결과 색상을 반환합니다.
2
화면
두 가지 색상을 취하고 더 밝은 색상을 반환합니다. 곱하기 기능 과 반대로 작동 합니다.
삼
위에 까는 것
곱하기 와 화면 의 효과를 결합하여 결과를 생성 합니다.
4
부드러운 빛
오버레이 와 유사하게 작동 하지만 색상의 일부만 사용하여 다른 색상을 부드럽게 강조합니다.
5
하드 라이트
오버레이 와 유사하게 작동 하지만 색상의 역할이 반대입니다.
6
차
첫 번째 입력 색상에서 두 번째 입력 색상을 뺍니다.
7
제외
차이 기능 과 유사 하지만 대비가 낮습니다.
8
평균
채널당 (RGB) 기준으로 두 입력 색상의 평균을 계산합니다.
9
부정
두 번째 색상에서 첫 번째 색상을 빼는 차이 함수와 반대로 작동합니다 .
명령 줄을 사용하여 .less 파일을 .css로 컴파일 할 수 있습니다 .
전역 적으로 사용하기 위해 lessc 설치
다음 명령은 lessc를 전역 적으로 사용할 수 있도록 npm (node package manager)과 함께 lessc를 설치하는 데 사용됩니다.
npm install less -g
패키지 이름 뒤에 특정 버전을 추가 할 수도 있습니다. 예를 들면npm install [email protected] -g
노드 개발을위한 설치
다음 명령은 프로젝트 폴더에 최신 버전의 lessc 를 설치하는 데 사용됩니다 .
npm i less -save-dev
또한 프로젝트 package.json의 devDependencies에 추가됩니다.
lessc의 베타 릴리스
베타로 태그됩니다. lessc 구조가 게시 됨 npm여기에서 새로운 기능은 주기적으로 개발됩니다. less -v 는 현재 버전을 가져 오는 데 사용됩니다.
lessc의 게시되지 않은 개발 버전 설치
공개되지 않은 lessc 버전을 설치할 때 commit-ish를 지정해야하며 git URL을 종속성으로 식별하기위한 지침을 따라야합니다. 이렇게하면 프로젝트에 올바른 버전의 leesc를 사용하고 있는지 확인할 수 있습니다.
서버 측 및 명령 줄 사용
bin/lessc저장소에 바이너리를 포함합니다. * nix의 Windows, OS X 및 nodejs에서 작동합니다.
위에서 언급 한대로 url 또는 dumpLineNumbers 옵션에 ! dumpLineNumbers : mediaquery 옵션을 추가 할 수 있습니다 . mediaquery의 옵션 (덜 생성 된 CSS 스타일의 원래 LESS 파일 이름과 라인 번호를 표시합니다.) FireLESS 사용할 수 있습니다
옵션
less.js 스크립트 파일을로드하기 전에 글로벌 less 개체 에서 옵션을 설정해야 합니다.
async− 부울 타입입니다. 가져온 파일은 옵션 async 여부에 관계없이 요청됩니다. 기본적으로는 false입니다.
dumpLineNumbers− 스트링 타입입니다. 출력 css 파일에서 dumpLineNumbers가 설정되면 소스 행 정보가 추가됩니다. 특정 규칙을 디버깅하는 데 도움이됩니다.
env− 스트링 타입입니다. 환경은 개발 또는 프로덕션에서 실행될 수 있습니다. 문서 URL이 다음으로 시작하면 개발이 자동으로 설정됩니다.file:// 또는 로컬 컴퓨터에 있습니다.
errorReporting − 컴파일 실패시 오류보고 방식을 설정할 수 있습니다.
fileAsync− 부울 타입입니다. 페이지에 파일 프로토콜이있는 경우 비동기 적으로 가져올 지 여부를 요청할 수 있습니다.
functions − 객체 유형입니다.
logLevel− 숫자 유형입니다. 자바 스크립트 콘솔에 로깅 수준을 표시합니다.
2 : 정보 및 오류
1 : 오류
0 : 없음
poll− 시계 모드에서 시간은 폴링 사이에 밀리 초 단위로 표시됩니다. 정수 유형입니다. 기본적으로 1000으로 설정됩니다.
relativeUrls− URL이 상대적으로 조정됩니다. 기본적으로이 옵션은 false로 설정됩니다. 이는 URL이 이미 파일이 적은 항목에 상대적임을 의미합니다. 부울 유형입니다.
globalVars− 코드에 전역 변수 목록을 삽입합니다. 문자열 유형 변수는 따옴표로 묶어야합니다.
modifyVars− 글로벌 변수 옵션과 다릅니다. 적은 파일의 끝에서 선언을 이동합니다.
rootpath − 모든 URL 리소스의 시작 부분에 경로를 설정합니다.
useFileCache− 세션 당 파일 캐시 사용. 적은 파일의 캐시는 모든 적은 파일이 다시 검색되지 않는 modifyVars를 호출하는 데 사용됩니다.
LESS는 브라우저 간 친화적입니다. Google Chrome, Mozilla Firefox, Safari 및 Internet Explorer와 같은 최신 브라우저를 지원하며 CSS 요소를 재사용하고 동일한 의미로 LESS 코드를 작성할 수 있습니다. 클라이언트 측에서 LESS를 사용하고 JavaScript를 표시하는 동안 다음과 같은 외형적인 문제를 방지하기 위해 성능 영향에주의해야합니다.
철자 오류,
색상 변경,
Texture
Look
링크 등
웹 사이트의 성능 수준을 향상시키기 위해 서버 측에서 LESS 파일을 컴파일하십시오.
PhantomJS는 Function.prototype.bind 함수를 구현하지 않으므로 PhantomJS 에서 실행 하려면 es5 shim JavaScript 엔진을 사용해야합니다. 사용자는 변수를 조정하여 테마에 영향을 미치고 프로덕션에서 클라이언트 측 LESS를 사용하여 실시간으로 표시 할 수 있습니다.
이전 브라우저에서 LESS를 실행하려면 LESS가 지원하는 JavaScript 기능을 추가 하는 es-5 shim JavaScript 엔진 을 사용하십시오 . 브라우저에서 지원해야하는 JSON.parse 를 사용하여 스크립트 또는 링크 태그의 속성을 사용할 수 있습니다 .
이 장에서는 사이트의 기능을 확장하기 위해 플러그인을 업로드하는 방법을 이해합니다. 플러그인을 사용하여 작업을 더 쉽게 할 수 있습니다.
명령 줄
명령 줄을 사용하여 플러그인을 설치하려면 먼저 lessc 플러그인을 설치해야합니다. 플러그인은 처음에 less-plugin 을 사용하여 설치할 수 있습니다 . 다음 명령 줄은 clean-css 플러그인을 설치하는 데 도움이됩니다.
옵션 를 반환하는 선택적 인수입니다promise 콜백을 지정하지 않고 promise콜백을 지정할 때. 문자열로 읽어 파일을 표시하고 주 파일의 파일 이름 필드를 설정할 수 있습니다.
sourceMap의 옵션은 다음과 같은 설정 sourcemap 옵션에 있습니다 sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles 및 sourceMapFileInline . 여기서 고려해야 할 점은 less.js 에서는 sourceMap 옵션을 사용할 수 없다는 것입니다.
위에 정의 된 기능은 선택 사항입니다. 오류가 표시되면 오류를callback 또는 promise에 존재 less.render .
이 장에서는 LESS에서 온라인 컴파일러의 중요성을 이해합니다. 온라인 컴파일러는 적은 코드를 CSS 코드로 컴파일하는 데 사용됩니다. 온라인 컴파일러 도구는 CSS 코드 생성에 쉽게 도움이됩니다. 다음은 사용 가능한 온라인 덜 컴파일러입니다-
winless.org/online-less-compiler
lesstester.com
dopefly.com/less-converte
lessphp.gpeasy.com/demo
leafo.net/lessphp/editor
estFiddle
지원이 적은 온라인 웹 IDE / 플레이 그라운드
다음은 Less 지원으로 사용 가능한 온라인 웹 IDE입니다.
Sr. 아니.
온라인 웹 IDE 및 설명
1
CSSDeck 연구소
HTML, CSS, JS 코드를 포함하는 테스트 케이스를 쉽게 만들 수있는 곳입니다.
2
CodePen
이것은 프론트 엔드 웹을위한 놀이터입니다.
삼
피들 샐러드
환경에 기존 코드를 추가 할 수있는 곳입니다.
4
JS 빈
이것은 자바 스크립트와 CSS 코드에 도움이됩니다.
5
jsFiddle
이것은 온라인 웹 편집기입니다.
이 장에서 우리는 LESS 의 GUI 를 이해할 것 입니다. 플랫폼에 대해 다른 LESS 도구를 사용할 수 있습니다. 들어 명령 행 사용 및 도구이 클릭 링크를 .
다음 표에는 크로스 플랫폼을 지원하는 GUI 컴파일러가 나열되어 있습니다.
Sr. 아니.
도구 및 설명
1
크런치 2!
Windows, Mac 및 Linux 와 같은 플랫폼을 지원합니다 . 통합 컴파일 기능이있는 편집기를 제공합니다.
2
Mixture
디자이너와 개발자가 사용하는 신속한 프로토 타이핑 및 정적 사이트 생성 도구입니다. 빠르고 효율적이며 편집기와 잘 작동합니다. 멋진 도구와 모범 사례 모음을 함께 제공합니다.
삼
단순함
최소한의 LESS 컴파일러입니다. 드래그, 드롭 및 컴파일 기능을 제공합니다. SimpLESS는 SimpLESS 의 고유 한 기능인 접두사를 사용 하여 CSS 접두사를 지원합니다 . Titanium 플랫폼을 기반으로합니다.
4
코알라
LESS, SASS 및 CoffeeScript를 컴파일하는 데 사용됩니다. 컴파일 오류 알림 지원 및 컴파일 옵션 지원과 같은 기능을 제공합니다.
다음 표에는 Windows 플랫폼을 지원하는 GUI 컴파일러가 나열되어 있습니다.
Sr. 아니.
도구 및 설명
1
프리프로
LESS, SASS, Compass, Stylus, Jade 등을 컴파일하는 도구입니다.
2
WinLess
처음에는 LESS.app의 복제본이었고 몇 가지 설정이 있으며 더 많은 기능을 완벽하게 접근합니다. 명령 줄 인수로 시작하는 것을 지원합니다.
다음 표에는 OS X 플랫폼을 지원하는 GUI 컴파일러가 나열되어 있습니다.
Sr. 아니.
도구 및 설명
1
CodeKit
t는 LESS.app의 후속 제품이며 SASS, Jade, Markdown 등과 같은 다른 많은 처리 언어 중에서 LESS를 지원합니다.
2
LiveReload
CSS를 편집하고 이미지를 즉시 변경합니다. SASS, LESS, CoffeeScript 등이 잘 작동합니다.
다음 표에는 OS X 플랫폼을 지원하는 GUI 컴파일러가 나열되어 있습니다.
Sr. 아니.
도구 및 설명
1
Plessc
lessc의 GUI 프론트 엔드입니다. 로그 뷰어, 자동 컴파일, 선택한 편집기 및 소스 맵 지원으로 LESS 파일 열기와 같은 기능이 있습니다.
이 장에서는 LESS에서 편집기 와 플러그인 의 중요성을 이해할 것 입니다. 편집기는 사용자가 텍스트를 편집 할 수있는 시스템 또는 프로그램입니다. 플러그인은 사이트의 기능을 확장하는 데 사용되는 소프트웨어입니다.
이제 LESS를위한 편집기와 IDE에 대해 논의하겠습니다.
Sr. 아니.
편집자 및 IDE 및 설명
1
결정적 시기!
Windows, Mac 및 Linux 와 같은 크로스 플랫폼을 지원합니다 . 통합 컴파일 기능이있는 편집기를 제공합니다.
2
Mindscape 웹 워크 벤치
CoffeeScript, SASS, Compass 및 LESS 편집을 제공하고 Visual Studio에서 최신 웹 개발을 쉽게 만듭니다.
삼
NetBeans
오픈 소스 Java 기반 IDE입니다. 이는 데스크톱, 모바일 및 웹 애플리케이션은 물론 HTML, JavaScript 및 CSS를 포함하는 HTML5 애플리케이션의 빠른 개발에 도움이됩니다.
4
TextMate
It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system.
5
Vim
The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS.
6
Emacs
It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save.
7
jetBrains WebStorm and PhpStorm
WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks.
8
Brackets
It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers.
9
CodeLobster
It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP.
10
KineticWing IDE
It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast.
11
nodeMirror
It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries.
12
HTML-Kit Tools
This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor.
숭고한 텍스트 2 및 3
숭고한 텍스트는 다음 표에 나와있는 LESS에 대해 서로 다른 옵션을 제공합니다 -
Sr. 아니.
옵션 및 설명
1
덜 숭고
숭고한 텍스트에 대한 LESS 구문은 스 니펫과 함께 .less 파일에 대한 구문 강조 표시를 제공합니다 .
2
Sublime-Less-to-CSS
저장할 때 .less 파일을 CSS 로 컴파일하는 숭고한 텍스트 2 및 3 플러그인 . 그것은 필요합니다lessc PATH에 설치되었습니다.
삼
덜 숭고한
적은 빌드 시스템 숭고한 텍스트 2 LESS 파일을 두 빌드 시스템을 제공, 모두 축소 된 비 축소 된.
4
SublimeOnSaveBuild
저장을 클릭 할 때 빌드를 트리거하는 sublime text 2 용 간단한 플러그인입니다 . LESS, Compass 및 기타와 같은 전처리 기와 잘 작동합니다.
식
Eclipse 에는 다음 표에 나열된 LESS 용 플러그인이 두 개 있습니다.
Sr. 아니.
플러그인 및 설명
1
Eclipse Less 플러그인
Eclipse IDE를 확장함으로써이 플러그인은 LESS 스타일 시트를 편집하고 컴파일하는 데 유용한 기능을 제공합니다.
2
Transpiler 플러그인
이 Eclipse 플러그인은 LESS, SASS, CoffeeScript 등과 같은 파일을 자동으로 트랜스 파일합니다.
비주얼 스튜디오
Visual Studio 에는 LESS에 대해 다음과 같은 다른 옵션이 있습니다.
Sr. 아니.
옵션 및 설명
1
CSS가 적다
이 확장은 CSS 언어 서비스로 LESS 파일을 열 수있게합니다.
2
Web Essentials 2012
이 확장을 사용하면 일반적인 작업을 훨씬 쉽게 수행하고 웹 개발자 용 Visual Studio에 유용한 기능을 추가 할 수 있습니다.
삼
웹 에센셜 2013
특정 언어 또는 편집기에만 국한되지 않는 많은 새로운 기능으로 Visual Studio를 확장합니다.
4
웹 도구 2013
이것은 ASP.NET과 관련된 개발 작업에 도움이됩니다.
드림위버
Dreamweaver로 작업하는 동안 다음 사항을 고려해야 합니다.
웹 디자이너와 개발자가 응용 프로그램과 웹 사이트를 만드는 데 사용하는 Adobe 응용 프로그램입니다.
브라우저, 장치 및 태블릿을 포함한 여러 플랫폼에서 작동 할 수 있습니다.
웹 디자이너는 Dreamweaver를 사용하여 웹 사이트 프로토 타입을 만듭니다.
DMXzone Less CSS Compiler 는 Dreamweaver에서 직접 모든 LESS CSS 기능을 제공합니다.
메모장 ++ 6.x
Notepad ++에서 작업하는 동안 다음 사항을 고려해야 합니다.
Notepad ++는 탭 편집을 지원하는 무료 텍스트 편집기 및 소스 코드 편집기입니다. 즉, 단일 창에서 여러 개의 열린 파일로 작업 할 수 있습니다.
LESS for Notepad ++는 .less 파일에 대한 구문 강조 또는 색상 표시를 제공하는 xml 파일입니다. 자세한 정보를 보려면이 링크를 클릭하십시오 .
Notepad ++를 설치하려면이 링크를 클릭하십시오 .
Node.js 컴파일러
다음은 LESS에 사용되는 Node.js 컴파일러입니다.
투덜 거림없는
Grunt는 Node 태스크 러너입니다. LESS 파일에 변경 사항을 커밋 할 때마다 스타일 시트를 컴파일합니다.
조립하지 않고
assemble-less는 LESS 파일을 CSS로 컴파일하기위한 강력한 grunt 플러그인입니다. 적은 작업은 LESS 번들, UI 구성 요소, 압축 된 스타일 시트 또는 테마를 정의하기 위해 JSON 및 Lo-대시 (밑줄) 템플릿을 가져옵니다.
꿀꺽 거리다
Gulp 용 LESS 플러그인입니다. gulp-minify-css 는 CSS를 축소하는 데 사용됩니다. gulp-sourcemaps 는 sourcemaps 라이브러리를 생성하는 데 사용됩니다.
휴게
LESS를 기반으로 구축되고 CSS 코드를 최적화하는 데 도움이되는 오픈 소스 도구입니다. CSS 코드를 오류없이 깨끗하고 관리하기 쉽게 유지합니다.
자동없는
그것은이다 .less의 파일 감시자. 여기에는 종속성 추적 및 크로스 플랫폼 알림이 포함됩니다.
Less.js 용 미들웨어 연결
LESS 파일의 연결 JS 프레임 워크에 대한 처리를 허용하는 데 사용됩니다. 요청시 소스 파일을 컴파일하고 다음 요청을 위해 컴파일 된 데이터를 캐시합니다.
기타 기술
다음은 LESS 코드를 컴파일하는 데 도움이되는 몇 가지 다른 기술입니다.
Wro4j 러너 CLI
wro4j-runner.jar를 다운로드 하고 다음 명령을 사용하여 CSS에서 LESS 코드를 컴파일 할 수 있습니다.