Scss에서는 확장이라는 개념이있는 다른 프로그래밍 언어에서 사용되는 상속의 개념과 비슷하다.

 

Scss 상단에서 특정한 클래스를 만들어두고 아래쪽에서 그대로 가져와서 사용이 가능하다.

 

Scss는 많이 알면 알수록 확실히 편한부분이 눈에 띄는거 같다.

 

상속은 @extend selecter 방식으로 사용하면 된다.

 

// scss file

.sample {
  color: red;
  font-size: 3.5em;
  background: green;
  margin: auto;
}

.sample2 {
  color: blue;
  padding: 15px 0;
  margin: -15px 0;
}

.sample3 {
  @extend .sample;
  box-sizing: border-box;
  @extend .sample2;
}

 

위의 scss파일을 컴파일하게 되면 아래와같이 나타난다.

// css file

.sample, .sample3 {
  color: red;
  font-size: 3.5em;
  background: green;
  margin: auto;
}

.sample2, .sample3 {
  color: blue;
  padding: 15px 0;
  margin: -15px 0;
}

.sample3 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

'HTML > Scss' 카테고리의 다른 글

Scss #6_2. mixin & include  (0) 2020.04.08
Scss #6_1. mixin & include  (0) 2020.04.01
Scss #4. 선택자 (Seleter)  (0) 2020.03.30
Scss #2. 변수 (Variable)  (0) 2020.03.30
Scss #1. 네스팅 (Nesting)  (0) 2020.03.30