Bootstrap 프레임워크 - Less

문서 목록

1.변수(Variables)

2.연산(Operations)

3.혼합(Mixins)

4.네스트(Nesting)

5.Escaping

6.함수(Functions)

7.매핑(Maps)

Less(Leaner Style Sheets의 약어)는 뒤로 호환되는 CSS 확장 언어입니다.LESS는 CSS에 변수, 상속, 연산, 함수와 같은 동적 언어의 특성을 부여합니다.LESS는 클라이언트에서 실행할 수도 있고 (IE 6+, Webkit, Firefox 지원) Node를 빌릴 수도 있다.js 또는 Rhino가 서버에서 실행됩니다.Less와 CSS가 닮아 공부가 쉽기 때문이다.그리고 Less는 CSS 언어에 약간의 편리한 확장만 증가시켰다. 이것이 바로 Less가 이렇게 배우기 쉬운 원인 중의 하나이다.
브라우저 환경에서 Less:(링크 순서 참고) 사용

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" >script>

Node에서.js 환경에서 Less 사용:

npm install -g less
> lessc styles.less styles.css 

1. 변수(Variables)
@로 변수 선언하기(글로벌/로컬 변수로 구분)

//    
@width:100px;
@height:100px;
@borderColor: red;
.block{
//    ,          
  @bgcolor:#444;
//       
  width: @width;
  height: @height;
  border: solid 1px @borderColor;
  background-color:@bgcolor;
}

2. 연산(Operations)

연산자를 사용할 때 가능한 한 변수와 공백을 두어 빼기 기호가 정의되지 않은 (변수-)로 식별되는 경우를 피한다.

연결 연산자는 변수일 수도 있고 글자의 양일 수도 있다.

색을 연산할 때 rgb값의 대응하는 위치에 따라 255보다 크면 255로 기본값으로 한다.

@base:2;
@baseColor: blue;
@borderColor: red;
.menu{
  width: @width*@base;
  height: @height -2;
  border: solid 1px @borderColor+@baseColor;
}

3. 블렌드(Mixins)
하나의 속성을 하나의 규칙 집합에서 다른 규칙 집합으로 포함(또는 혼합)하는 방법(방법의 정의와 호출) 1)

.borderRadius{
  border-radius:10px ;
}
//    ：
//        ，          
.borderRadius();
.borderRadius;

2).인삼

//1.        
.borderRadius(@radius){
  border-radius:@radius ;
}
//    ：
//        ,     
.borderRadius(40px);

//2.       
.borderRadius(@radius:10px){
  border-radius:@radius ;
}
//    ：
//        ,          ，       
.borderRadius(50%);
.borderRadius();

4. 네스트(Nesting)

컴파일과 유지보수에 편리

아바타 형식 쓰기 (ulli) 유사

& 현재 선택기의 부급

표시

@ 규칙 플러그인과 거품: @ 규칙 (예: @media 또는 @supports) 은 선택기와 같은 방식으로 플러그인을 삽입할 수 있습니다. @규칙이 앞에 배치되고 동일한 규칙 세트에 있는 다른 요소의 상대적인 순서가 변경되지 않습니다.이것은 거품이라고 한다.

.menu{
  width: @width*@base;
   @media (min-width: 768px) {
     width: @width;
   }
  height: @height;
  border: solid 1px @borderColor+@baseColor;
  .baby{
    width: @width;
    height: @height;
    border: solid 1px @borderColor;
    margin: auto;
    position: relative;
    //  
    &:hover{
      background-color: darkblue;
    }
    //  
    &:after{
      position: absolute;
      content: '';
      border: solid 12px #6bcbfa;
    }
  }
}

5. 이스케이프(Escaping)
임의의 문자열을 속성이나 변수 값으로 사용할 수 있습니다."anything"또는 "anything"형식의 내용은 interpolation을 제외하고는 그대로 출력됩니다.

@media768:~"(max-width:768px)";
.zy{
  width: 200px;
  height: 300px;
  border: solid 1px @borderColor;
  margin: auto;
  @media @media768{
    width: 768px;
    background: red;
  }
}

6. 함수(Functions)
1).논리적 기능(Logical Functions)

iscolor(): 색깔이 맞는지 확인하고true/false로 돌아갑니다.

if() 논리적 판단: if( ,true,false)

@some:#dd1;
.iscolor{
  width: 100px;
  height: 100px;
  //    ，      ，        
  background-color: if(iscolor(@some),@some,black);
}

브리 값boolean(condition);condition: 브리 표현식

2).문자열이 있는 값에 사용되는 변환을 위한 문자열 함수(String Functions) escape 변환 문자열escape(string); 3).목록 기능(List Functions)

length(list); 반환 길이

range(start,end,step); 숫자 세트(start, step(프레임 수) 선택 가능)

each(list,rules); 스트리밍 방법

//each()       
//3   
//value       ，index         1  ，key   
each(range(5), {
.col-@{value} {
  width: @value * 5px;
  height: @value * 5px;
  border: solid 1px saddlebrown;
}});
//   
@arr:a,b,c,d,e;
each(@arr,{
.col-@{value} {
  width: @index * 5px;
  height: @index * 5px;
  border: solid 1px saddlebrown;
}
});
//   
@set:{one:red;two:blue;three: orange; four: pink; five: yellow; };
each(@set,{
  .col-@{key} {
    width: @index * 5px;
    height: @index * 5px;
    border: solid 1px saddlebrown;
  }
});

4).수학 함수(Math Functions)
ceil 위로 정렬 floor 아래로 정렬percentage 전환 백분율 round 반올림 sqrt 제곱 abs 절대값 인sin asin cos acos tan atan pi 3.141592653589793 pow 구멱min 최소값 인max 최대값
5).유형 방법(Type Functions)
숫자인지 검사하는 방법: isnumber, 반환값은true false로 문자열인지 검사: isstring, 반환값true false로 경로인지 검사: isurl, 반환값true flase로 픽셀 값을 검사합니다. ispixel 반환값true false는 em 단위의:isem, 반환값true false로% 단위인지 검사: ispercentage, 반환값true false로 검사
6).색상 함수
rgb () rgba () hsl (): 해시 값 hsl(90, 100%, 50%)색상 작업 함수:
lightness: 색상 밝기 설정lightness(hsl(90, 100%, 50%))라이트en: 색의 밝기를 줄인다lighten(hsl(90, 80%, 50%), 20%)darken: 색의 밝기를 가중시킨다darken(hsl(90, 80%, 50%), 20%)fadein: 색의 투명도를 낮춘fade: 불투명도rgba(241,70,50,0.1),80%mix를 설정한다. 앞의 두 가지는 색이고 균형점은 선택할 수 있다. 기본 50%tint: 색과 흰색을 혼합하고 균형점은 기본 50%shade: 색과 검은색을 혼합한다.균형점 기본 50% multiply: 두 색상 혼합, 어둡게 만들기screen: 두 색상 혼합, 밝게 만들기
7. 매핑(Maps)
이름 공간을 정의합니다. 봉인하는 역할을 합니다.

#space() {
  primary: blue;
  secondary: green;
  .btn {
    width: 100px;
    height: 100px;
    font-size: 13px;
  }
}
.bgcolor {
    width: 200px;
    height: 200px;
    background-color: #space[primary]; //          
    .btn {
      #space.btn(); //      
    }
  }