내가 보려고 만든 SCSS 정리

5o_hyun·2023년 1월 13일

scss

SASS vs SCSS

SASS SCSS는 쉽게 이해했을때는 버전?차이라고 생각했다.

SASS를 쓰지 않는 이유

SASS : 중괄호가 아닌 파이썬 같이 들여 쓰기를 사용
SCSS : CSS처럼 중괄호 { }와 세미콜론 ;을 사용

-> 기존 css랑 달라서 불편하다. 그래서 좀 더 비슷한 scss를 사용한다.

SCSS의 장점

1. 공식문법 : 공식 레퍼런스가 scss기준으로 기재됨
2. css호환성 : sass는 css와 호환되지 않는 부분이있는데 scss는 전부 호환가능
3. 많은 사용자 : 많은 사용자로 인한 많은 라이브러리가 scss로 존재

사용방법

SCSS 자체로 브라우저에 적용하는 것이 아니라, CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문에, 컴파일을 해서 일반 CSS의 문법으로 바꾸어 적용해야 한다.

컴파일방법

vscode에서 확장프로그램 Live Sass Compiler 설치
watching sass를 클릭하면 실시간으로 컴파일이 가능하다.

SCSS 문법

주석

// : 한 줄 주석은 모든 CSS 출력물에서 삭제
/* */ : 여러 줄 주석은 컴파일 후에도 남아있는다.

중첩

중첩을 사용하는 이유 : 최상위 선택자의 반복을 막기위해서

// ex-1 : 중첩가능 
nav {
  background-color: lightcoral;
  padding: 10px;
  height: 50px;
  ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    li {
      color: white;
      margin-right: 10px;
    }
  }
}
// ex-2 : 같은 네임스페이스 공유 
.background-img {
  width: 100%;
  height: auto;
  background: {
    image: url("./sample.jpg");
    position: center center;
    repeat: no-repeat;
  }
}
// ex-3 : & 상위선택자 참조 
.box {
  width: 300px;
  height: 300px;
  background-color: red;
  transition: all 1s;
  &:hover {
    background-color: blue;
  }
}
// ex-4 : @at-root : 중첩에서 벗어날 수 있다.
.one {
  color: red;
  .two {
    color: green;
    .three {
      color: blue;
      @at-root p {
        color: pink;
      }
    }
  }
}

변수

보통 타이포그래피, 폰트색상, 폰트사이즈, 글자 간격 등의 값을 변수로 정의해서 사용
값이 두 번 이상 반복된다면 미리 변수로 만든다.

변수는 유효범위가 있다.
선언된 {} 바깥이면 전역변수, 안이면 지역변수

$bgColor: red;
$font-h1: 28px;
$valid-sides: left, center, right;
$font-size: (
  "myh1": 45px,
  "myh2": 19px,
  "myh3": 16px,
);

h1 {
  $spanColor: blue; 
  color: $bgColor; // ex-1 : 변수로 사용가능
  font-size: map-get($font-size, "myh1") * 2; // ex-2 : map or list로 사용가능 , ex-4 : 연산 가능
  span {
    $spanColor: pink; // ex-3 : 재할당가능
    color: $spanColor; 
  }
}

p {
  //color: $spanColor; // 지역변수 떄문에 사용 불가
  text-align: nth($valid-sides, -2);  // ex-2 : map or list로 사용가능
}

재활용 @mixin

@mixin의 키워드를 @include 로 가져와서 사용

// ex-1 : 인수를 받을수있고, 기본값도 넣을수있다.
@mixin flexCenter($size: 30px) {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  li {
    margin-right: $size;
  }
  @content; // ex-2 : @content를 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있다.
}
.one {
  @include flexCenter(10px);
  background-color: lightgray;
}
.two {
  @include flexCenter(20px);
  background-color: pink;
}
.three {
  @include flexCenter {
    color: white; // ex-2 : 위에서 content쓴 후 , 개별적으로 추가하고 싶은 값을 넣어준다.
  }
  background-color: skyblue;
}

Extend

연관있는 요소들끼리 스타일코드가 같은 경우 사용한다.
mixin과 헷갈릴수있으나 두개는 완전히 다르다.

@mixin : 관계없는 선택자들이 서로 조금씩 다른 스타일을 적용시
@extend : 관계 있는 선택자들이 동일한 소스코드 적용시

% 로 선택자를 만들고 @extend를 사용해 불러온다. %는 컴파일되지않는다.
클래스보다는 % 사용하는것을 권장한다.

.profile-user {
  background-image: url("user.png");
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.comment-user {
  @extend .profile-user;
  border-width: 10px;
}
/* %로 하나 선언하고 extend로 확장하여 사용한다. %는 컴파일되지않는다. */
%base-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 10px;
}

.follow-button {
  @extend %base-button;
  background-color: #ffffff;
  color: #ff375f;
  border: 3px solid #ff375f;
}

.message-button {
  @extend %base-button;
  background-color: #ff375f;
  color: white;
}

조건문

if (조건){
	// 조건이 참일 때 실행될 구문
} @else if(조건){
	// else if 조건이 참일 때 실행될 구문
} @else{
	// 위에 모든 조건이 거짓일 때 실행될 구문
}

반복문

zero base 가 아님. 1부터 시작
보간할 때에는 자바스크립트와 달리 #{$i} 로 표현한다.

/* for반복문으로 각각 이미지 부여 */
@for $i from 1 through 5 {
  .photo-box:nth-child(#{$i}) {
    background-image: url("../assets/phoster#{$i}.png");
  }
}


/* each반복문은 list의 각각요소를 순회해서 스타일을 적용 */

$palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;

@each $color in $palette {
  $i: index($palette, $color); //index는 list의 내장함수
  .color-circle:nth-child(#{$i}) {
    background: $color;
  }
}

함수

계산을 해서 값을 반환하는 역할

/* 거듭제곱을 구하는 함수 */
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {  // 의미없는 변수선언 $_
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

/* 색상내장함수 */
$color1: red;
$color2: blue;

.colorBox {
  color: mix($color1, $color2); /* ex-1 : 컬러를 섞음 */
  background-color: lighten($color1, 20%); /* ex-2 : 밝게, 혹은 어둡게 */
  background-color: darken($color1, 20%);
  color: grayscale(#fff000); /* ex-3 : 회색으로 만들어줌 */
  color: invert(#fff000); /* ex-4 : 반전시킴 */
}