SCSS

CSS 전처리기 (CSS Preprocessor)

• 전처리기에는 SCSS,Sass,Less,Stylus 등이 있다
• CSS 문법과 유사하지만 선택자의 중첩, 조건문, 반복문 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성 가능
• 웹에서는 CSS만 동작하기 때문에 SCSS를 웹에서 동작 가능한 CSS로 컴파일(Compile)해줘야 한다.

SCSS 컴파일 미리보기 사이트
https://www.sassmeister.com/

주석

SCSS에서는 CSS에서 사용하는 주석방식 외에도
// 같은 JS에서 사용하는 주석 방식도 사용 가능하다

• 주의점 // 로 주석 처리할 시 CSS로 컴파일 하면 내용이 사라진다

scss
.container {
  h1 {
    color : royalblue;
    // font-size:60px; JS에서 사용하는 주석 방식
    /* background-color : orange */ 일반 CSS에서 사용하는 주석 방식. 컴파일시 나타나지 않는다
  }
}

css로 컴파일시
.container h1 {
  color:royalblue;
  /* background-color : orange */
}

중첩(Nesting)

scss //
.container {
  ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  }
}

- css //
.container ul li {
  font-size: 40px;
}
.container ul li .name {
  color: royalblue;
}
.container ul li .age {
  color: orange;
}

상위 선택자 참조 - &

&기호가 붙어 있는것은 상위 선택자를 참조하고 있다
즉, 상위 선택자가 &기호가 있는 곳으로 치환된다다는 개념

- scss //
.btn {
  position: absolute;
  &.actiove {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}
/* prettier-ignore */
- css 
.btn {
  position: absolute;
}
.btn.actiove {
  color: red;
}

.list li:last-child {
  margin-right: 0;
}

중첩된 속성

반복되는 속성 네임스페이스를 선택자처럼 사용할 수 있다
콜론(:) 기호로 구분해줘야 하며 세미콜론(;)으로 마무리 해준다

네임스페이스란 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말한다

- scss //
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  }
  margin: {
    top: 10px;
    left: 20px;
  }
  padding: {
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  }
}

css //
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 30px;
}

변수(Variables)

• 선언된 위치에 따라 유효범위가 있다
• 재할당이 가능하다
• 재할당된 코드 아래쪽으로는 재할당된 값으로 사용이 된다.

scss //
.container {
  $size: 200px;
  position: fixed;
  top: $size;
  .item {
    $size: 100px;
    width: $size;
    height: $size;
    transform: translateX($size);
  }
  .left {
    width: $size;
  }
}

css //
.container {
  position: fixed;
  top: 200px;
}
.container .item {
  width: 100px;
  height: 100px;
  transform: translateX(100px);
}
.container .left {
  width: 100px;
}

산술 연산

• 나누기 연산
  1. 나누기연산 할때는 ()로 감싸주거나,
  2. 다른 연산자와 같이 사용하거나,
  3. 변수를 사용하는 방법으로 나누기 연산을 사용해야 한다.
• 산술 연산할때는 기본적 단위가 동일해야 한다
  • width: 100% - 200px (X)
  • 또는, calc()함수를 사용한다
    • width: calc(100% - 200px) (o)

scss //
div {
  width: 20px + 20px;
  height: 40px - 10px;
  font-size: 10px * 2;
  margin: 30px / 2;
  padding: 20px % 7;
}
css //
div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 30px/2; // 나누기 연산자는 동작하지 않는다
  padding: 6px;
}

재활용(Mixins)

mixin으로 설정한 재활용 코드를
include로 불러와 재활용 할 수 있다

scss //
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  @include center;
  .item {
    @include center;
  }
}
.box {
  @include center;
}

css //
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

mixin으로 설정한 값을 바꿀 수 있다

• 매개변수로 변수를 넣는다
• 변경될 값에 변수를 지정 한다
• include로 불러올때 인수에 원하는 값을 적어 넣는다
• JS 함수 실행과 유사하다

매개변수의 변수부분에 기본값을 지정해 줄수 있다.

• include로 불러 올때 아무 값도 지정하지 않으면 지정해뒀던 기본값으로 컴파일 된다
• 쉼표(,) 로 여러가지 매개변수를 지정해줄수 있다
• 키워드 인수
  • 인수가 여러개 일때 값을 일일이 다 지정하는게 아닌
    매개변수 이름을 사용하여 해당 값만 지정해줄 수 있다

scss //
@mixin box($size:100px , $color:tomato) {
  width: $size;
  height: $size;
  background-color: $color;
}
.container {
  @include box(200px, red);
  .item {
    @include box($color: green);
  }
}
.box {
  @include box;
}
css //
.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: green;
}
.box {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

재활용 @content

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content;
}
.container {
  width: 100px;
  height: 100px;
  @include left-top;
}
.box {
  width: 200px;
  height: 300px;
  @include left-top {
    // 이 부분에 작성한 코드가 @content로 들어간다
    bottom: 0;
    right: 0;
    margin: auto;
  }
}

반복문

• 제로(0)베이스가 아닌 1부터 시작한다
• JS와 달리 문자보간은 #{}로 한다

scss //
@for $i from 1 through 10 {
  .box:nth-child(#{$i}) {
    // 선택자는 값이 아니기에 보간해야함
    width: 100px * $i; // 실제 값을 적는 부분이기 때문에 보간안함
  }
}

css //
.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

... //

.box:nth-child(9) {
  width: 900px;
}
.box:nth-child(10) {
  width: 1000px;
}

반복문 @each

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // 배열 형태
$map: (
  // Object형이기 대문에 키,밸류 값이 있다
  o: orange,
  r: royalblue,
  y: yellow
);
@each $i in $list {
  .box {
    color: $i; // 총 3개의 박스가 만들어지고 각 박스의 color는 list의 아이템값으로 채워진다
  }
}
@each $k, $v in $map {
  // key ,value로 받아온다
  .box-#{$k} {
    // 총 3개의 박스가 key값이 붙여진 이름으로 만들어진다
    color: $v; // value 값인 색상으로 채워진다
  }
}

함수

JS와 함수와 유사하다
실제 값을 연산을해서 반환된 값을 사용한다

scss//
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@function ratio($size, $ratio) {
  @return $size * $ratio;
}
.box {
  $width: 100px;
  width: $width;
  height: ratio($width, 1/2);
  @include center;
}

css//
.box {
  width: 100px;
  height: 56.25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

색상 내장 함수

함수	효과
mix(color1,color2)	color1과 color2를 mix
lighten(color1,퍼센트)	color1을 퍼센트만큼 밝게
darken(color1,퍼센트)	color1을 퍼센트만큼 어둡게
saturate(color1,퍼센트)	color1을 퍼센트만큼 채도 UP
desaturate(color1,퍼센트)	color1을 퍼센트만큼 채도 DOWN
grayscale(color1)	color1을 gray로 바꾼다
invert(color1)	color1을 반전
rgba(color1,.5)	color1을 .5 만큼 투명하게

가져오기

• url() 안에 쓰지 않아도 된다
• 확장자를 쓰지 않아도 된다
• 쉼표(,)로 여러개를 불러올 수 있다

main.scss //
@import "./sub.scss", "./sub2"

$color:royalblue;
.container {
  h1{
    color:$color;
  }
}