본문 바로가기
CSS/SASS

SASS 코드 종류 1 (중첩, 변수, 가져오기, 연산자)

Jooninim 2018. 7. 21. 18:42

1. 코드의 종류


중첩

 &

상위 선택자 선택
@at-root

중첩 벗어나기


속성 중첩하기

@extend

확장하기

변수

 $

변수 설정
{}

변수 유효범위 설정


변수 재설정
!global

전역 변수 설정
!default

초깃값 설정
#{}

문자사이에 변수넣기

가져오기

 @import

가져오기
,

여러 파일 가져오기
Partials

파일 분할

연산

 +

더하기
-

빼기
*

곱하기
/

나누기
%

나머지


2. 코드 예시문


1. 중첩

 

중첩 - {}

※ {} 안에 태그를 불러올수 있다.

1
2
3
4
5
6
7
8
9
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
    }
  }
}
cs
1
2
3
4
5
6
7
8
9
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
cs

 

상위 태그 선택 - &

※ 상위태그를 선택한다.

1
2
3
4
5
6
7
8
9
10
11
12
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
cs
1
2
3
4
5
6
7
8
9
10
11
12
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
header ul li:last-child {
  margin-right: 0;
}
cs


중첩 벗어나기 - @at-root

※ 태그로 부터 벗어난다.

1
2
3
4
5
6
7
8
9
10
11
12
13
header {
  $l: left;
  width: 100%;
  ul {
    width: 50%;
    li {
      float: $l;
    }
  }
  @at-root .float {
    float: $l;
  }
}
cs
1
2
3
4
5
6
7
8
9
10
11
12
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
.float {
  float: left;
}
cs

속성 중첩하기 - 속성: {} 
※ {}안에 이어 붙일수있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      margin: {
        top: 10px;
        left: 10px;
      };
    }
  }
}
cs
1
2
3
4
5
6
7
8
9
10
11
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
cs


확장하기 - @extend 선택자

※ 선택자의 속성을 불러온다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.default {
  padding: 10px;
  margin: 10px;
}
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @extend .default;
    }
  }
}
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
.default, header ul li {
  padding: 10px;
  margin: 10px;
}
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
cs

 

2. 변수


변수 설정 - $변수명

※ 변수를 정의한다.

1
2
3
4
5
6
7
8
9
10
11
12
header {
  $w1: 100%;
  $w2: 50%;
  $l: left;
  width: $w1;
  ul {
    width: $w2;
    li {
      float: $l;
    }
  }
}
cs
1
2
3
4
5
6
7
8
9
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
cs


변수 범위 설정

※ 자바스크립트의 지역변수와 전역변수를 생각하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
header {
  $l: left;
  width: 100%;
  ul {
    width: 50%;
    li {
      float: $l;
    }
  }
}
.float {
  float: $l;
}
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
//ERROR
.float {
  float: ;
}
cs


변수 재설정

※ 중복명의 변수를 설정하여 재정의한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
header {
  $l: left;
  width: 100%;
  ul {
    width: 50%;
    li {
      float: $l;
    }
  }
}
.float {
  $l: left;
  float: left;
}
cs
1
2
3
4
5
6
7
8
9
10
11
12
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
.float {
  float: left;
}
cs


전역 변수 설정 - !global

※ 전역변수로 설정해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
header {
  $l: left !global;
  width: 100%;
  ul {
    width: 50%;
    li {
      float: $l;
    }
  }
}
.float {
  float: $l;
}
cs
1
2
3
4
5
6
7
8
9
10
11
12
header {
  width: 100%;
}
header ul {
  width: 50%;
}
header ul li {
  float: left;
}
.float {
  float: left;
}
cs


이전값 설정 - !default

※ 이전값으로 되돌린다.

1
2
3
4
5
6
7
8
9
10
11
header {
  $w: 100%;
  width: $w;
  ul {
    $w: 50% !default;
    width: $w;
    li {
      float: left;
    }
  }
}
cs
1
2
3
4
5
6
7
8
9
header {
  width: 100%;
}
header ul {
  width: 100%;
}
header ul li {
  float: left;
}
cs


문자사이에 변수넣기 - #{}

※ 문자열 사이에 변수를 넣기위에 #{} 안에 넣는다.

1
2
$u: "coding-teardown";
@import url("http://#{$u}.tistory.com/");
cs
1
@import url("http://coding-teardown.tistory.com/");
cs

 

3. 가져오기


가져오기 - @import

1
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
cs

 

여러 파일 가져오기 - ,

1
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic'), url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo');
cs


파일 분할

scss파일을 가져올때 파일명에 _를 붙여 가져오면 한 css파일로 가져온다.


4. 연산

1
2
3
4
5
6
7
8
9
10
11
12
div {
  $num: 100px;
  width: 20px + 20px;
  height: 40px - 10px;
  font-size: 10px * 2;
  padding: 10%;
  margin: {
    top: $num / 2;
    left : (100px / 2);
    right: 25px + 50px / 2;
  }
}
cs
1
2
3
4
5
6
7
8
9
div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
  padding: 10%;
}
cs


'CSS > SASS' 카테고리의 다른 글

build tool gulp  (0) 2018.09.19
SASS 코드 종류 2 (재활용, 함수, 연산자, 조건문, 반복문, 내장함수)  (0) 2018.07.23
SASS의 정의, 사용방법  (0) 2018.07.20

'CSS/SASS' Related Articles

티스토리툴바