[SASS - SCSS] 1-4. 확장 - 상속 내용 정리

5. 확장 / 상속

SASS에서는 확장과 상속을 통해 편리하고 비슷한 코드를 통합해 줄 수 있습니다. 

 

CSS의 속성은 위에서 아래로 적용됩니다. 동일한 속성값을 여러 번 변경하더라도, 결과값은 가장 마지막에 있는 값으로 적용됩니다. 

 

동일한 선택자의 속성값을 여러 번 변경하더라도 top-down 방식에 의해 가장 마지막에 있는 값의 영향을 받습니다. 그러므로 최종적으로 margin: 15px로 변경되는 것입니다.

확장과 상속을 이해하기 위해서는 SASS에 @extend 코드를 이용하면 됩니다.

 

.message 선택자를 이용하여 작은 박스를 만들 수 있는 CSS 코드를 작성하고, 3개의 동일한 작은 박스 success, error, popup을 추가하였습니다. 바로 확장코드인 @extend .message 선택자의 속성을 그대로 가져왔는데, 각 박스에 별도의 테두리 색상을 지정했습니다. 

 

각 박스에 padding값은 상-하 10px 부여되고, border 1px solid가 부여됩니다. 그리고 SASS 코드의 border-color는 각각 blue, red, pink로 부여되는 것을 확인할 수 있습니다. 

 

<nav> 태그 선택자의 속성을 별도로 분리해서 header, aside, article 영역에 @extend nav; 를 기재하였습니다. 여기에서 header - aside - article 속성 중에 동일한 부분도 있지만, 동일하지 않는 부분도 있습니다. 그 동일하지 않는 부분에는 각 영역마다 별도의 속성을 기재하였습니다.

 

이렇게 하게 되면 @extend nav;를 기재한 영역에는 동일하게 값이 적용됩니다. nav 선택자 속성에서 동일하게 적용되는 값을 변경하게 될 때 코드를 추가하거나 변경하게 되면 @extend nav;를 넣은 곳에는 동일하게 값이 변경하게 됩니다.

 

사이트가 커지고, 구조가 복잡하더라도 CSS 관리가 편해지기 때문에 숙지해야 합니다!