CSS에 변수와 함수를 넣어 쓸 수 있는 SCSS

백돼지·2023년 3월 10일
0
post-thumbnail

이번주 마지막 부트캠프 소그룹 회의에서 서로의 웹사이트를 발표하다가
팀원으로부터 SCSS에 대해서 알게 되었다.

SCSS란? : CSS의 확장 언어로, CSS에서 아쉬운 기능적인 부분들을 보완하고 변수와 함수, 연산자 등 다양한 기능을 활용 해 보다 더 편리하게 스타일을 적용할 수 있게 만들어 준다.

SCSS만의 차별화 된 추가 기능들

  • 변수(Variable) 할당
  • 중첩(Nesting) 구문
  • 모듈화(Modularity)
  • 믹스인(Mixins)
  • 확장&상속(Extend/Inheritance)
  • 연산자(Operators)

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효과-모음

profile
용호의 코딩블로그 22.11 코딩공부 시작 23.2 부트캠프 입소

0개의 댓글