이번주 마지막 부트캠프 소그룹 회의에서 서로의 웹사이트를 발표하다가
팀원으로부터 SCSS에 대해서 알게 되었다.
SCSS란? : CSS의 확장 언어로, CSS에서 아쉬운 기능적인 부분들을 보완하고 변수와 함수, 연산자 등 다양한 기능을 활용 해 보다 더 편리하게 스타일을 적용할 수 있게 만들어 준다.
SCSS만의 차별화 된 추가 기능들
CSS에 수많은 스타일 속성을 적어내려가다 보면 똑같은 속성을 쓸 때가 너무 많고
어디가 어딘지 구분하려면 무조건 클래스나 아이디 이름에 의존해야 하니까 가독성이 너무 떨어졌다.
(번외로, 강사님은 스타일 속성을 넣을때 예를 들어 yong이라는 id의 div태그에 스타일을 줄려면,)
div#yong{
box-sizing: border-box;
}이렇게 넣으면
#yong{
box-sizing: border-box;
}이렇게 그냥 아이디값만 넣었을 때 보다 훨씬 찾기가 쉬웠다.
그럼 SCSS는 CSS보다 얼마나 편리할까?
첫번째 예시로 변수를 사용했을 떄이다.
1. 변수 선언
$main-color: "red";
body{
background-color: $main-color;
}
자주쓰는 속성 값을 변수로 지정해서 변수만으로 속성을 지정해줄 수 있다.
2. 중첩 구문 (그룹화)
//css
nav ul{
background-color: "red"
}
nav li{
color: "white"
}
nav h4{
font-family : "noto-sans"
}
//scss
nav{
ul{
background-color: "red"
}
li{
color: "white"
}
h4{
font-family: "noto-sans"
}
}
CSS를 사용하다보면 부모 태그에 수많은 자식태그들에 클래스명을 넣어주고 똑같은 태그를 넣는
귀찮은 작업들이 이제 중첩을 통해 더욱 간단 + 코드 가독성이 높아졌다.
3. 모듈화
다른 SCSS파일에 있는 변수를 가져와서 사용할 수 있다.
사용하기 전에는 먼저 @use를 통해 임포트를 시켜줘야한다.(웹 폰트를 쓸떄 처럼)
사용하려면 {scss파일 명}.{변수 명}
//style.scss
$main-color : "red"
$main-font : "noto-sans"
body{
background-color: $main-color;
font-family: $main-font;
}
//newStyle.css
@use "style";
div{
color: style.$main-color;
}
4. 재사용성(믹스인)
함수처럼 파라미터를 받아서 직접 속성을 부여할 수 있다.
/* CSS */
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
/* SCSS */
//theme이라는 함수를 생성
@mixin theme($color: DarkGray) {
background: $color;
box-shadow: 0 0 1px rgba($color, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
끝으로 아래 링크는 css에서 hover효과를 줄 때 미리 설정 된 값들을 이용해서
편리하게 효과를 줄 수 있는 링크이다. 동기생이 공유를 해주었는데 꽤 편리한 것 같다.
https://cloud-library.tistory.com/entry/Hovercss를-이용한-hover효과-모음