Sass 사용하기 - 변수, 색상 관련 함수

 

 

 

 

1. 변수

: 스타일을 작성할 때 코드를 반복적으로 사용하는 경우가 있다. 예를 들어 대표적으로 컬러가 될 수 있겠다. 
그 외에도 배경색, 너비, 폰트, 서체 등이 있을 수 있다. sass에서는 이러한 반복적인 코드를 변수에 담아 반복적인 코드를 쓰지않고 줄일 수 있도록 도와준다. 변수 설정을 하면 수정을 할 때도 간편할 것이다. 변수 하나만 바꾸면 되니까.

사실 css 에서도 컬러 변수를 사용 할 수 있다.

:root { 
    var-main-color: #333;  //변수설정
}
.main h3 { 
   color: var(main-color);  //원하는 변수 사용 
}

 

학원에서 배웠을 때 이렇게 배웠기 때문에 당연히 실무에서도 쓸 수 있겠지 생각했으나, 이러한 css 변수 설정은 최신 버전의 웹킷에만 한정되기 때문에 익플에서 확인하는 순간 하얀색 배경만 나와서 엄청 당황했던 적이 있었다.
실무에서 사용하기 힘든 css 변수사용을 sass 에서는 실무에서도 편하게 쓸 수 있다고 한다.

 

sass는 변수를 사용할 때 '$'를 사용한다.

 

 

간단하게 보면 이런식으로 쓸 수 있지않을까?
(이렇게 쓰는것 말고, 좀더 고차원적으로 쓰는것은 뒤 공부를 하고 나서 고치도록 하겠다.)

 

$ 를 붙이고 변수이름을 설정하고 원하는 색상값을 넣었다. 
그리고 원하는 곳에 사용해 보았다. 

 

결과는 다음과 같이 잘 나온다.

 

저렇게 변수로 쓴 sass 코드는 다음과 같이 css 파일로 출력된다. 
단순히 색상 뿐만 아니라, 서체도 가능할 것이고, 폰트 사이즈, 너비도 가능할 것이다.

 

 

 

2. 색상 관련  함수

: sass 에는 다양한 내장함수가 있다고한다. 계산이나 문자열 숫자 등등..

한번에 다 정리하는게 좋을 수 도있지만 사실 나는 하나씩 직접 써보고 내가 실제로 활용을 필요해서 해봐야 머리에 남기 때문에, 
가장 자주 쓸것 같은 색상함수들을 몇개정리 해보고자 한다.
후에 다른 계산이나 문자열 함수등을 쓰게될때 추가적으로 그것들은 따로 정리하겠다.

 

# RGB Functions

rgb($red, $green, $blue)	RGB값으로 색상을 만든다. 0~255값 사이의 값을 입력하거나 %로 입력한다.	rgb(173, 64, 56) 이면  컬러는 #ad4038 이 나온다.
rgb($red, $green, $blue, $alpha)	RGB값으로 색상 + 알파값을 적용한 색상을 만든다. 알파값은 0(투명)~1 (불투명) 사이의 값을 입력한다.	rgba(173, 64, 56, 0.5) 식으로 입력한다.
mix($color1, $color2, [$weight])	두가지의 색을 섞는다. [$weight]는 첫번째 색의 비율을 말하며 기본값은 50%이다.	mix(#ea4c89, #ffffff, 70) 식으로 입력하며 $color-main: #ea4c89; $color-text: white; .btn{     background: mix($color-main, $color-text, 50);     color: white; } 이런식으로도 사용 가능하다.
red($color)	색에서 R 채널 값을 리턴한다.	red(#ad4038) 이면 173을 리턴한다.
green($color)	색에서 G 채널 값을 리턴한다.	green(#ad4038) 이면 64를 리턴한다.
blue($color)	색에서 B 채널 값을 리턴한다.	blue(#ad4038) 이면 56을 리턴한다.

 

# HSL Functions

hsl($hue, $saturation, $lightness)	HSL 값(색조, 채도, 명도)으로 색상을 만든다. hue는 0~360 사이의 값을 입력한다. saturation과  lightness는 0~100% 사이의 값을 입력한다.	hsl(4, 51, 45) 이면 컬러는 #ad4038이 나온다.
hsl($hue, $saturation, $lightness, $alpha)	HSL값으로 색상 + 알파값을 적용한 색상을 만든다.	hsl(4, 51, 45, 0.8) 식으로 입력한다.
hue($color)	색에서 색조 값을 리턴한다.  색조값은 0deg~360deg사이의 값이다.	hue(#ad4038) 이면 4.10246deg를 리턴한다.
saturation($color)	색에서 채도 값을 리턴한다.  채도 값은 0~100% 사이의 값이다.	saturation(#ad4038) 이면 51.091%를 리턴한다.
lightness($color)	색에서 명도 값을 리턴한다. 명도 값은 0~100% 사이의 값이다.	lightness(#ad4038) 이면 44.90196%를 리턴한다.
adjust-hue($color, $degrees)	HSL의 색조 값을 변경한다.	adjust-hue(#ad4038, 20)를 입력하면 컬러는 #ad6738이 나온다.
lighten($color, $amount)	색을 밝게 변경한다.  mount 값은 %이다. (예를들어 30% 밝게)	lighten(#ad4038, 20)를 입력하면 컬러는 20%밝아진  #d37e78이 나온다.
darken($color, $amount)	색을 어둡게 변경한다.	darken(#ad4038, 20)를 입력하면 컬러는 20%어두워진 #60231f이 나온다.
saturate($color, $amount)	색의 채도를 높게 변경한다.	saturate(#ad4038, 20)를 입력하면 컬러는 20% 채도가 높아진  #c42c21이 나온다.
desaturate($color, $amount)	색의 채도를 낮게 변경한다.	desaturate(#ad4038, 20)를 입력하면 컬러는 20% 채도가 낮아진  #96544f가 나온다.
grayscale($color)	색을 회색(#737373)으로 만든다.
complement($color)	색의 보색을 찾는다.	complement(#ad4038)를 입력하면 컬러는 보색인 #38a5ad이 나온다.
invert($color)	색을 반전한다.	invert(#ad4038)를 입력하면 컬러는 반전된 #52bfc7이 나온다.

 

# Opacity Function

rgba($color, $alpha)	색의 알파값을 변경한다.
opacify($color, $amount),  fade-in($color, $amount)	색의 불투명도를 높여 불투명하게 만든다. (opacity가 아니라 opacify 이다.  자꾸 에러 나서 뭐지 하고 보니까 opacify 였다..! 습관적으로 잘못 적은것;)	opacify(rgba(0,0,0,0.2), 0.2)를 입력하면 결과값은 rgba(0,0,0,0.4)로 불투명도가 높아진다.
transparentize($color, $amount), fade-out($color, $amount)	색의 불투명도를 낮추어 투명하게 만든다.	fade-out(rgba(0,0,0,0.6), 0.2)를 입력하면 결과값은 rgba(0,0,0,0.4)로 불투명도가 낮아진다.

 

정리하면서도 이 함수는 도대체 어디다가 쓰지?? 왜 쓰지? 싶은 것들이 있었다.
아무래도 그 부분들은 좀더 찾아서 왜 쓰는지 어떻게 쓰는지를 찾아봐야할 것 같다.

 

이 외에도 엄청나게 많은 함수가 있다.

나는 그중 몇개, 많이들 쓰는 것이라 알려진 것을 정리한 것 뿐이다.

더 많은 함수는 https://sass-lang.com/documentation/Sass/Script/Functions.html 이곳에서 확인 할 수 있다.

또한, https://www.tutorialsteacher.com/sass/sass-color-functions 이곳에서는 직접 컬러가 변하는 것을 볼 수 있기 때문에
이곳을 참고하는것도 좋을것 같다.