덜 말썽에 대한 최근 초보자 요약

less는 CSS 기반의 확장 기술
.less는 파서(예: 코알라)를 통해 파일 형식을 CSS로 변환합니다.
@+변수 이름+값
구문
변수
LESS 개발자는 전역 스타일에 사용할 수 있는 변수를 사용자 정의할 수 있습니다. 변수를 사용하면 스타일을 더 쉽게 수정할 수 있습니다.
다음 코드에서 변수의 용도와 기능을 이해할 수 있습니다.
Listing 3 LESS file
@border-color: #b5bcc7;

.mythemes tableBorder{

border : 1px solid @border-color;
}
컴파일된 CSS 파일은 다음과 같습니다.
목록 4. CSS 파일
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
위 코드를 보면 VALUE(값) 수준에서 변수가 재사용되고, 동일한 값을 통합 관리용 변수로 정의할 수 있음을 알 수 있습니다.
이 기능은 테마를 정의하는 데 적합합니다. 배경색, 글꼴 색상, 테두리 속성 등 일반 스타일을 일률적으로 정의할 수 있으므로 테마마다 다른 변수 파일을 정의하면 됩니다. 물론 이 기능은 CSS RESET(스타일 시트 재설정)에도 적용됩니다. 웹 개발에서는 브라우저의 기본 스타일 동작을 보호해야 하고 브라우저의 기본 동작을 재정의하기 위해 스타일 시트를 재정의해야 하는 경우가 많습니다. 여기서 LESS 변수를 사용할 수 있습니다. 스타일 시트를 다른 프로젝트 간에 재사용할 수 있도록 필요에 따라 다른 프로젝트 스타일 시트의 변수를 다시 할당하면 됩니다.
LESS의 변수는 다른 프로그래밍 언어와 마찬가지로 값을 재사용할 수 있습니다. 또한 범위(변수 범위, 개발자는 이를 일반적으로 범위라고 부릅니다)라는 수명 주기가 있습니다. 변수를 검색하는 순서는 먼저 지역 정의에서 검색하고, 찾을 수 없으면 전역 정의까지 상위 정의를 검색하는 것입니다. 아래에서는 간단한 예를 통해 Scope를 설명합니다.
목록 5. LESS 파일
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 최근 정의한 변수 width 값은 30px
}
}
#leftDiv {
width : @width; // 위에서 정의한 변수 width 값은 20px 이어야 합니다

}

컴파일된 CSS 파일은 다음과 같습니다.
목록 6. CSS 파일
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
Mixins(Mixin)
Mixins(Mixin) 기능은 개발자에게 낯설지 않습니다. 많은 동적 언어가 다중 상속인 Mixins(Mixin) 기능을 지원합니다. LESS에서 혼합이란 현재 CLASS에 속성을 추가하는 것과 마찬가지로 정의된 또 다른 CLASS를 CLASS에 도입하는 것을 의미합니다.
LESS에서 Mixins의 사용을 간략하게 살펴보겠습니다.
목록 7. LESS 파일
// 스타일 선택기 정의
.roundedCorners(@radius:5px) {
-moz -border-radius: @radius;
-webkit-border-radius: @radius;
border-radius:
}
// 다른 스타일 선택기에서 #header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
컴파일된 CSS 파일은 다음과 같습니다.
목록 8. CSS 파일
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
위 코드에서 볼 수 있습니다. 일종의 중첩으로, 하나의 클래스를 다른 클래스에 포함할 수 있습니다. 간단히 말해서 Mixins는 실제로 규칙 수준 재사용입니다.
Mixins에는 Parametric Mixins(매개 변수 혼합)이라는 형식도 있으며 LESS도 이 기능을 지원합니다.
목록 9. LESS 파일
// 스타일 선택기 정의
.borderRadius(@radius) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius:
}
// 정의된 스타일 선택기 사용
#header {
.borderRadius(10px); // 스타일 선택기에 매개변수로 10px를 전달합니다.
}
.btn {
.borderRadius(3px);// // 3px을 전달합니다. 스타일 선택기에 대한 매개변수

}
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
经过编译生成的 CSS 文件如下：
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段

top

left

right

清单 17. LESS 文件
#home{
색상 : 파란색;
너비: 600px;
높이 : 500px;
테두리:시작;
#top{
테두리:시작;
너비: 90%;
}
#center{
border:outset;
높이 : 300px;
너비: 90%;
#왼쪽{
테두리:시작;
플로트 : 왼쪽;
너비: 40%;
}
#right{
border:outset;
플로트 : 왼쪽;
너비: 40%;
}
}
}
经过编译生成的 CSS 文件如下：
清单 18. CSS 文件
#home {
color: blue;
너비: 600px;
높이: 500px;
테두리: 시작;
}
#home #top {
경계: 시작;
너비: 90%;
}
#home #center {
경계: 시작;
높이: 300px;
너비: 90%;
}
#home #center #left {
경계: 시작;
플로트: 왼쪽;
너비: 40%;
}
#home #center #right {
경계: 시작;
플로트: 왼쪽;
너비: 40%;
}
从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构 对应的，这样使我们的样式表书写更加简洁和更好的可读性19. LESS 文件
a {
색상: 빨간색;
텍스트 장식: 없음; 텍스트 장식: 밑줄;
}
}
经过编译生成的 CSS 文件如下：
清单 20. CSS 文件
a {
color: red;
텍스트 장식: 없음;
}
a:hover {
색상: 검정색;
텍스트 장식: 밑줄;
}
运算及函数
我们的 CSS 中充斥着大数值型的 value, 比如 color, padding, 等, 这些数值の间在某些情况下是有着一定잘됐네요,那么我们怎样利用 LESS 来组织我们这些数值の间的关系呢?我们来看这段代码：
清单 21 . 적은 문자
@init: #111111;
@transition: @init*2;
.switchColor {
색상: @transition;
}
经过编译生成的 CSS 文件如下：
清单 22. CSS 文件
.switchColor {
color: #222222;
}
상면적 사용이 적은 작업 。同时 LESS 还有一个专门针对 color 的操作提供一组函数.下면是 LESS 提供的针对颜color操work的函数列表：
밝게(@color, 10%); // @color보다 10% *밝은* 색상을 반환합니다.
darken(@color, 10%); // @color
saturate(@color, 10%)보다 10% *어두운* 색상을 반환합니다. // @color보다 10% *더* 채도가 높은 색상을 반환
desaturate(@color, 10%);// @color보다 10% *덜* 채도가 높은 색상 반환
fadein(@color, 10% ); // @color보다 10% *덜* 투명한 색상을 반환합니다.
fadeout(@color, 10%); // @color보다 10% *더* 투명한 색상을 반환합니다.
spin(@color, 10); // @color보다 색조가 10도 더 큰 색상을 반환합니다.
spin(@color, -10); // @color보다 10도 더 작은 색상을 반환합니다
PS: 上述代码引自 LESS CSS 官方网站，详情请见 http://lesscss.org/#-color-functions
使用这些函数와 JavaScript 中使用函数一样。
清单 23 LESS 文件
init: #f04615;
#body {
background-color: fadein(@init, 10%);
}
经过编译生成的 CSS 文件如下：
清单 24. CSS 文件
#body {
background-color: #f04615;
}
从上面的例子는 우리의 这组函数 Image 极了 JavaScript 中的函数, 它可以被调사용 및 传递参数입니다.提供颜color变换的功能，先把颜color转换HSL 색상은 此基础上进行操작성, LESS 还提供了获取颜color值的 method, 这里就不举例说明了.
더 적은适用于实现页face组件特性，比如组件切换时的渐入渐出.
댓글（注释）
适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有种方式：单行注释와多行注释，这与 JavaScript 中的注释方一样，저희는 中单行注释 (// 单行注释 ) 是不能显示에서 编译后的 CSS 中，所以如果你的注释是针对样式说明的请使는 더 많은 행注释을 사용합니다.
LESS VS SASS
유사한 프레임워크에는 SASS 및 LESS가 포함되며 둘 다 유사한 프로그래밍 언어를 사용하여 CSS를 작성하고 궁극적인 목표는 모두 편리합니다. CSS를 작성하고 유지하는 데 사용됩니다.
LESS와 SASS는 서로를 촉진하고 영향을 미칩니다. 이에 비해 LESS는 CSS 구문에 더 가깝습니다