[HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자

Web/HTML5 & CSS3

by 클리엘 클리엘 2020. 1. 20. 15:03

1. 변수

@ 문자를 사용하면 특정 값을 담아두는 변수를 사용할 수 있습니다.

@color : red;
@size : 12px;

div {
  background-color: @color;
}

span {
  font-size: @size;
}

2. 연산

정수형 데이터에 대해 사칙연산이 가능합니다.

@color : red;
@size : 12px;
@size2 : 10px;

div {
  background-color: @color;
}

span {
  font-size: @size + @size2;
}

3. 선택자

less는 {} 블록 안에 {} 블록을 포함시키는 방법으로 내부 블록에서 &선택자를 사용하면 자기 자신을 의미하게 됩니다.

@color : red;
@size : 12px;

div {
  background-color: @color;
}

a {
  &:hover {
    color: red;
  }
}

CLIEL LAB