Less - link: 링크 태그 - less-js: 스크립트 태그 - Import: - 변수 선언: - c

15145c91d83-055e73e8.md

Less

link: 링크 태그

<link rel="stylesheet/less" type="text/css" href="styles.less" />

less-js: 스크립트 태그

<script src="less.js" type="text/javascript"></script>

Import:

@import "ui-variables";

변수 선언:

@contentWidth: 950px;
@fontFamily: "San Francisco", Arial, sans-serif;
@fontSize: 1.7em;
@codeFont: "Consolas", Arial, sans-serif;

color-fuction: 색상 관련 내장 함수

lighten(color, 10%):                // 색상을 밝게 만든다.
darken(color, 10%):                 // 색상을 어둡게 만든다.
saturate(color, 10%):               // 색이 두드러지게 만든다.
desaturate(color, 10%):             // 색이 두드러지지 않게 만든다.
fadein(color, 10%):                 // 색상을 투명하지 않게 만든다.
fadeout(color, 10%):                // 색상을 투명하게 만든다.
fade(color, 50%):                   // 색상을 반투명하게 만든다.
spin(color, 10):                    // 색상 속성을 변경한다.
mix(color1, color2, [weight: 50%]): // 색상을 섞는다.

color-property-function: 색상 속성 추출 내장 함수

hue(color):         // 색상의 Hue 속성을 추출한다.
saturation(color):  // 색상의 Saturation 속성을 추출한다.
lighteness(color):  // 색상의 Lightness 속성을 추출한다.
alpha(color):       // 색상의 Alpha 속성을 추출한다.

math-function: 수학 함수

round(숫자):      // 숫자를 반올림한다.
ceil(숫자):       // 숫자를 올림한다.
floor(숫자):      // 숫자를 내림한다.
percentage(숫자): // 숫자를 퍼센트 단위로 변경한다.

mixin: 믹스인

.linearGradient(@start, @end) when (iscolor(@start)) and (iscolor(@end)) {
    background: @start;
    background: -moz-linear-gradient(top, @start 0%, @end 100%);
    background: -webkit-linear-gradient(top, @start 0%, @end 100%);
    background: -o-linear-gradient(top, @start 0%, @end 100%);
    background: -ms-linear-gradient(top, @start 0%, @end 100%);
    background: linear-gradient(top, @start 0%, @end 100%);
}

when:

.max(@a, @b) when(@a >= @b) {
    width: @a;
}

.max(@a, @b) when(@a < @b) {
    width: @b;
}

.min(@a, @b) when(@a >= @b) {
    width: @b;
}

.min(@a, @b) when(@a < @b) {
    width: @a;
}

data-type: 자료형

iscolor(var):       // 변수가 색상 타입인지 확인한다.
isnumber(var):      // 변수가 숫자 타입인지 확인.
isstring(var):      // 변수가 문자열 타입인지 확인.
iskeyword(var):     // 변수가 키워드인지 확인.
isurl(var):         // 변수가 url 타입인지 확인.
ispixel(var):       // 변수가 픽셀 타입인지 확인.
ispercentage(var):  // 변수가 퍼센트 타입인지 확인.
isem(var):          // 변수가 배수 타입인지 확인.

parent-selectors &: 부모 선택자

a {
  color: blue;
  &:hover {
    color: green;
  }
}

note-info.json

{"noteId":"15145c91d83-055e73e8","main":"15145c91d83-055e73e8.md","title":"Less - link: 링크 태그 - less-js: 스크립트 태그 - Import: - 변수 선언: - color-fuction: 색상 관련 내장 함수 - color-property-function: 색상 속성 추출 내장 함수 - math-function: 수학 함수 - mixin: 믹스인 - when: - data-type: 자료형 - parent-selectors &: 부모 선택자"}