【Sass】SCSS기법 치트 시트

코딩배우기

【Sass】SCSS기법 치트 시트

탁이 2022. 9. 27. 14:15

이번에는 SCSS를 사용할 때 참조할 수 있도록 치트 시트를 정리 소개하도록 하겠습니다.

Sass란?

"Syntactically Awesome StyleSheet"의 약자로, CSS를 효율적으로 기술할 수 있도록 설계·개발된 Ruby제의 CSS메타언어

Sass 공식 사이트

SCSS 기법이란?

SCSS 기법이란 Sass 쓰는 방법 중 하나로 Sass에는 SCSS 기법과 SASS 기법이 있으며, SCSS 기법이 CSS와 호환성이 있기 때문에 사용되는 경우가 많다. 확장자는 .scss한다.

중첩 구조

중첩 구조 (HTML과 같은 형태)에 설명

div{
  p{
    color: red;
  }
}

상위 선택기 참조

상위 선택기의 이름을 참조하고 설명

a{
  &:hover{
    color: red;
  }
}

네임스페이스 중첩

CSS에서 네임 스페이스로 기술하는 것 (font-family 등)을 중첩 구조로 기술

div{
  font:{
    family: sans-serif;
  }
}

변수

자주 사용하는 값을 변수로 정리

$color: red;
p{
  color: $color;
}

배열 변수

자주 사용하는 값을 배열 변수로 정리

$color: red, green, blue;
p{
  color: nth($color, 1);
}
$margin: (sp: 10px, pc: 20px);
p{
  margin: map-get($margin, pc);
}

그룹 변수

자주 사용하는 스타일 정리

@mixin max-screen($screen-size) {
  @media screen and (max-width: $screen-size) {
    @content;
  }
}
p{
  @include max-screen(560px){
    font-size: 14px;
  }
}

상속

가져오기

분할된 SCSS 파일 가져오기

@import "basic";

상속

다른 곳에서 사용한 스타일 상속

.item{
  color: red;
}
.item2{
  @extend .item;
}

문법

조건 분기

조건에 따라 스타일 변경

$position: left;
.item{
  @if $position == 'left'{
    position: absolute;
    left: 0;
  }@else{
    position: relative;
  }
}

반복

스타일 반복

@for $i from 1 through 3{
  .item-#{$i}{
    font-size: 10px * $i;
  }
}

반복 (배열 변수)

배열 변수를 사용한 반복

$colors: red, green, blue;
@each $color in $colors{
  .item-#{$color}{
    color: $color;
  }
}

연산・색

연산

스타일 내에서 연산

p{
  font-size: 30px / 1.5;
}

텍스트의 조합

스타일 내에서 문자열 조인

$hello: 'Hello';
$world: 'World';
p::before{
  content: $hello + $world;
}

밝기 조정

기본 색상의 밝기를 조정

$color: red;
h1{
  color: lighten($color, 40%);
}
p{
  color: darken($color, 40%);
}

채도 조정

기본 색상 채도 조정

$color: red;
h1{
  color: saturate($color, 40%);
}
p{
  color: desaturate($color, 40%);
}

투명도 조정

기본 색상의 투명도 조정

$color: red;
p{
  color: rgba($color, .8);
}

색조 조정

기본 색상의 색조 조정

$color: red;
h1{
  color: adjust-hue($color, 30deg);
}

색상 보색 및 반전

베이스 색상의 보색 또는 반전

$color: red;
h1{
  color: complement($color);
}
p{
  color: invert($color);
}

색을 섞다

베이스 색상(2개)을 혼합

$color1: yellow;
$color2: red;
h1{
  color: mix($color1, $color2, 50%);
}

기타

코멘트 아웃

따옴표 붙이기

문자열 따옴표("") 붙여넣기

$number: "10";
h1::before{
  content: quote(Hello World);
}
p{
  margin: unquote($number) + px;
}

큰 텍스트 및 작은 텍스트

문자열의 대문자 or 소문자화

$text1: "hello";
$text2: "HELLO";
h1::before{
  content: to-upper-case($text1);
}
p::before{
  content: to-lower-case($text2);
}

절대값을 반환

숫자의 절대값을 반환

h1{
  font-size: abs(-18px);
}

반올림 반환

숫자 반올림 반환

h1{
  font-size: ceil(15.4px);
}

자르기 반환

숫자 자르기 반환

h1{
  font-size: floor(17.5px);
}

반올림을 반환

숫자의 반올림을 반환합니다.

h1{
  font-size: round(18.3px);
}
p{
  font-size: round(12.5px);
}

저작자표시 비영리 변경금지

현재글【Sass】SCSS기법 치트 시트

탁이로그