유용한 Sass(SCSS)

 

문법

문자보간

선택자나 속성은 일반 변수로 처리가 불가능합니다.

이를 처리하려면, #{var_name}을 사용하면 코드의 어디든지 변수 값을 넣을 수 있습니다.

// SCSS
$font-family: "Roboto";

@import url("/fonts/#{$font-family}");

.header {
  font-family: #{$font-family};
}

=== Compile ===

// CSS
@import url("/fonts/Roboto");

.header {
  font-family: Roboto;
}

 

위 코드는 .header 클래스에 Roboto 폰트를 적용하는 코드입니다. font-family 속성은 일반 변수로 처리할 수 없기 때문에, #{var_name}을 사용하여 변수 값을 넣어줍니다.

 

가변 인수

가변 인수는 매개변수가 불확실한 경우에 사용됩니다.

// SCSS
@mixin example($color, $size) {
  color: $color;
  font-size: $size;
}

.header {
  @include example("red", 20px);
}

=== Compile ===

// CSS
.header {
  color: red;
  font-size: 20px;
}

위 코드는 color와 size 두 개의 매개변수를 사용하는 example() 미분을 정의한 코드입니다.

 

Mixin 모음

이 글에서 mixin을 주로 크로스 브라우징을 할 때 사용합니다.

 

2020.11.01 - [Frontend development/Web development] - 크로스 브라우징이란?

크로스 브라우징이란?

 

translate

transform에서 사용되는 translate는 주로 가운데 정렬이 필요할 때 주로 사용됩니다.

// SCSS
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  transform: translate($x, $y);
}

// 사용 예제
div {
  position: absolute;
  top: 50%;
  left: 50%;
  @include translate(-50%, -50%);
}

=== Compile ===

// CSS
div {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

이런 식으로 사용하는 이유는 특정 브라우저에서 지원하지 않거나 하위 버전의 브라우저를 대응하기 위함입니다.

 

font-face

font-face는 폰트 설정될 때 사용됩니다. 폰트 개수가 증가될 때마다 font-face를 선언해 주다 보면 공간을 많이 차지하게 됩니다. 이러한 공간을 줄이기 위해 mixin으로 정리합시다.

// SCSS
@mixin font-face($name, $file, $weight: normal, $style: normal) {
  @font-face {
    font-family: "#{$name}";
    src: url('폰트 경로/#{$file}.woff') format('woff'),
         url('폰트 경로/#{$file}.ttf') format('truetype');
    font-weight: $weight;
    font-style: $style;
  }
}

// 사용 예제
@include font-face('설정할 폰트 이름', '폰트 파일 이름');

// 매개 변수에 기본값 설정 가능
@include font-face('설정할 폰트 이름', '폰트 파일 이름', bold);

=== Compile ===

// CSS
@font-face {
  font-family: "설정할 폰트 이름";
  src: url('폰트 경로/폰트 파일 이름.woff') format('woff'),
       url('폰트 경로/폰트 파일 이름.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "설정할 폰트 이름";
  src: url('폰트 경로/폰트 파일 이름.woff') format('woff'),
       url('폰트 경로/폰트 파일 이름.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

 

border-radius

border-radius는 대부분의 브라우저에서 작동하지만, IE8 이하에서는 작동하지 않습니다.

사진출처: CanIUse

이를 해결하려면, -ms-border-radius를 이용하면 됩니다.

// SCSS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 사용 예제
div {
  @include border-radius(5px);
}

=== Compile ===


// CSS
div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

 

브라우저별 CSS 핵

CSS 핵은 특정 브라우저에서만 CSS가 적용되게 하는 기법입니다.

하지만 CSS 핵은 진짜 특수한 경우에만 사용하는 것을 추천드립니다.

// SCSS
// IE6 ~ IE8
@media \0screen\,screen\9 {
  /* Enter your style code */
}

// IE9 ~ IE10
@include ie9_to_10 {
  /* IE9 ~ IE10에만 적용될 스타일 */
}

// IE10 이상
@include ie10_over {
  /* IE10 이상에만 적용될 스타일 */
}

// Safari
@include Safari {
  /* Safari에만 적용될 스타일 */
}

=== Compile ===

// CSS
/* IE6 ~ IE8 */
@media \0screen\,screen\9 {
  /* Enter your style code */
}

/* IE9 ~ IE10 */
@media screen and (min-width:0\0){
  /* IE9 ~ IE10에만 적용될 스타일 */
}

/* IE10 이상 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10 이상에만 적용될 스타일 */
}

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Safari에만 적용될 스타일 */
}

 

media query

mixin을 사용하여 media query를 작성할 수 있습니다. 반응형 웹 디자인에 사용됩니다.

// SCSS
@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

@include media(768px) {
  color: red;
};

=== Compile ===

// CSS
@media only screen and (max-width: 768px) {
  color: red;
}

 

함께 보면 좋은 글

협업하기 위한 CSS 컨벤션

협업하기 위한 CSS 컨벤션

Sass(SCSS) 문법

Sass(SCSS) 문법