개요

시작전 프로젝트 세팅

  1. 터미널에서 npm init -y 입력.
  2. 터미널에서 npm install parcel-bundler -D 입력.
  3. 설치 후 package.json 세팅하기 (참고)
  4. 세팅 후 index.html, main.scss 생성
  5. 세팅이 완료되면 터미널에서 npm run dev 입력

주석

Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용합니다.


// 컴파일되지 않는 주석 : 배포하면 안나타남
/* 컴파일되는 주석 */ : 배포해도 나타남
        
        

데이터 종류

데이터 설명 예시
Numbers 숫자 1, .82, 20px, 2em...
Strings 문자 bold, relative, "/images/a.png", "dotum"
Colors 색상 표현 red, blue, #FFFF00, rgba(255,0,0,.5)
Booleans 논리 true, false
Nulls 아무것도 없음 null
Lists 공백이나 ,로 구분된 값의 목록 (apple, orange, banana), apple orange
Maps Lists와 유사하나 값이 Key: Value 형태 (apple: a, orange: o, banana: b)

$null : null;
$list: orange, royalblue, yellow;
$map: (
  o: orange,
  r: royalblue,
  y: yellow
);
        
      

@import - 가져오기


// 파일 확장자가 .css일 때
@import "hello.css"; 

// 다중 파일 불러오기
@import "./sub.scss", "./sub2.scss"; 

// 파일 이름이 http://로 시작하는 경우
@import "http://hello.com/hello"; 

// url()이 붙었을 경우
@import url(hello); 

// 미디어쿼리가 있는 경우
@import "hello" screen; 
        
      

중첩

상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있습니다.


.container {
  > ul { // > : 자식선택자
      li {
        font-size: 40px;
        .name {
          color: royalblue;
        }
        .age{
          color: orange;
        }
      }
  }
}
        
      

& - 부모 선택자 참조

중첩 안에서 &키워드는 상위(부모) 선택자를 참조하여 치환합니다.


// .list li:last-child
.list {
  color:ref;
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

// fs-small, fs-medium, fs-large
.fs {
  &-small {font-size: 12px;} // .fs-small
  &-medium {font-size: 14px;} // .fs-medium
  &-large {font-size: 16px;} // .fs-large
}
        
      

중첩된 속성

font-,margin-등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있습니다.


.box {
  font: {
    weight: bold; // font-weight: bold;
    size : 10px; // font-size: 10px;
    family: sans-serif; font-family: sans-serif;
  };
  margin: {
    top:10px; // margin-top:10px;
    left:20px // margin-left:20px;
  };
}
        
      

$ - 변수

변수 이름 앞에는 항상$를 붙입니다.


$변수이름: 속성값;
$sizeG : 200px; // 전역변수

.container {
  $size : 100px; // 지역변수
  position: fixed;
  top: $size;
  .item {
    width: $sizeG;
    height: $size;
    transform: translateX($size);
  }
}
        
      

연산자

산술 연산자

종류 설명
+ 더하기
- 뺴기
* 곱하기
/ 나누기
% 나머지

div {
  $size: 30px;
  width: 20px + 20px;
  width: 40px - 10px;
  width: 10px * 2;
  width: (30px / 2); // 나누기 사용방법 1
  width: ($size / 2); // 나누기 사용방법 2
  width: 20px % 7;
  width: calc(100% - 200px); // calc() 사용법
}
        

비교 연산자

종류 설명
== 동등
!= 부등
< 대소 / 보다 작은
> 대소 / 보다 큰
<= 대소 및 동등 / 보다 작거나 같은
>= 대소 및 동등 / 보다 크거나 같은

논리 연산자

종류 설명
and 그리고
or 또는
not qnwjd

재활용

@mixin

선언하기(@mixin) 와 사용하기(@include) 두 가지만 기억하면 됩니다.


@mixin centet {
  display: flex;
  justify-content: center;
  align-items: center;
  &::after {
    content: "!!";
  }
  span.icon {
    background-color: red;
  }
}
// 기본값을 지정해줄수 있음
@mixin box($size : 100px, $color: tomato) {
  width: $size;
  height: $size;
  background-color: $color;
}

.container {
  @include centet;
  width: 200px;
  height: 200px;
  background-color: orange;
  .item {
    width: 100px;
    height: 100px;
    background-color: royalblue;
  }
}

.box {
  @include box(200px , red);
  .item{
    @include box($color:green);
  }
}
        

@content


@mixin 믹스인이름() {
  스타일;
  @content;
}

@include 믹스인이름() {
  // 스타일 블록
  스타일;
}

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content;
}
.box {
  @include left-top {
    bottom: 0;
    margin: auto;
  }
}
        

함수

연산된(Computed) 특정 값을 @return 지시어를 통해 반환합니다.


// Functions
@function 함수이름($매개변수) {
  @return 값
}
함수이름(인수)

@function ratio($size, $ratio){
  @return $size * $ratio
}

.box {
  $width: 100px;
  width: $width;
  height: ratio($width, 9/16); // 16:9 비율
}
        

색상 내장 함수


background-color: mix($color, red); // 색상 섞기
background-color: lighten($color, 10%); // 밝은색
background-color: darken($color, 10%); // 어두운색
background-color: saturate($color, 40%); // 채도 up
background-color: desaturate($color, 40%); // 채도 down
background-color: grayscale($color); // 회색으로 전환
background-color: invert($color); // 색상 반전
background-color: rgba($color, .5); // 색상의 투명도를 변경합니다.
        

반복문

@for


@for $i from 1 through 10 {
  .box:nth-child(#{$i}) {
    width: 100px * $i;
  }
}
        

@each


@each $변수 in 데이터 {
  // 반복 내용
}

// list 
$list: orange, royalblue, yellow;
@each $c in $list {
  .box {
    color: $c;
  }
}

// map
$map: (
  o: orange,
  r: royalblue,
  y: yellow
);
@each $k, $v in $map {
  .box-#{$k} {
    color: $v;
  }
}