SCSS

Dev_Sumni·2022년 4월 21일
0
post-thumbnail
  • scss/ sass 차이점
    Variables { } ;
    Mixins = +

  • 컴파일: sass에서 css로 변환되는 과정

주석

  • /* */
    // scss → css 로 변환할때 나타나지 않음

중첩

  • 꺽쇠괄호 > 자식 선택자

상위(부모) 선택자 참조

  • 엠퍼센드 &

중첩된 속성

.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};

변수

  • 달러사인 $
    ex) $size: 100px;
    선언된 범위에서 유효범위를 가짐

산술 연산

  • +, -, *, /, %

  • 단축속성에서 /를 사용하기 때문에 scss에서는 사용 불가능함
    scss에서 /(나누기)를 사용하려면

  1. ( )안에 기재하기
  2. $ 변수에 기재하기
  3. 다른 연산자와 같이 기재하기
  • 단위를 같게 사용하기, 단 calc 함수를 사용하면 다르게 사용 가능함

재활용

  • @mixin 재활용할 코드를 작성 (기본적인 css 스타일을 다루는 용도로 사용)
    @include 작성된 코드를 사용

  • 인수( )
    키워드 인수: 인수 순서와 상관없이 값을 기재하여 사용하는 인수

반복문

  • @for $i(ndex) from 1 through 10
    보간 처리 #{ $i}

함수

  • @function (일반적인 값을 어떻게 처리해야할지에 대한내용 명시)
    @return

색상 내장 함수

  • mix
    lighten
    darken
    saturate
    desaturate
    grayscale
    invert
    rgba

가져오기

  • @import "./sub", "./sub2";

데이터 종류

  • $ number
    $ string
    $ color
    $ boolean
    $ null
    $ list
    $ map

반복문

  • list 데이터 반복적으로 처리하기
    @each $c in $list { }
  • map 데이터 반복적으로 처리하기
    @each $key, $value in $map { }

재활용

  • @mixin 상황에 맞게 추가적인 내용 삽입 가능
    @content
profile
개발 일지 끄적 끄적,,

0개의 댓글