[SCSS] SCSS란 ? / SCSS 문법

CSS Preprocessor

; CSS 전처리기

- CSS의 불편함을 확장 기능으로 상쇄

ex) Sass, Less, Stylus

- 전처리기 ; CSS문법과 유사 & 선택자의 중첩이나 조건문,반복문,다양한 단위의 연산 등 표준 CSS보다 훨씬 많은 기능 제공

- 웹에서 직접 동작 x, 웹에서 동작 가능한 표준의 CSS로 컴파일

- Less ; 진입장벽이 비교적 낮지만 기능의 한계 존재

- Stylus ; 덜 유명하며 비교적 늦게 나왔기에 성숙도 떨어짐

- Sass(SCSS) ; 위 두 전처리기의 장점 가짐

SCSS ; Sass 3버전에서 새롭게 등장, Sass의 모든 기능을 지원하는 CSS의 상위집합

 

---

SCSS 문법

주석

1. /* 주석 */ ; 컴파일된 CSS에 존재 o

2. // 주석 ; 컴파일된 CSS에 존재 x

 

 

자식 선택자  >

변수 선언 / 사용 ; $

- 유효 범위 가짐(전역변수/지역변수)

- 지역변수에서 값 변경 시 전역으로 변경됨

상위 선택자 참조 ; $(그대로 가져옴) / &(다른 문자와 합칠 수 있음)

> h1{ }
$color1:blue;
$.active{ }, $:last-child{ }
&-small{ }

중첩된 속성

- 중괄호 닫힌 후 세미클론 사용

margin:{
    top:10px;
    left:5px;
    right:15px;
};

산술 연산

- 나누기는 소괄호로 묶어줘야함

- 서로 다른 단위의 연산을 하고싶다면 calc 사용

div{   
    height:200px*2;
    margin:(200px/2);
    width:calc(100%-200px);
}

MinIn ; 재활용

- @mixin 변수명($매게변수:기본값) ; 재활용할 변수 선언

- @include 변수명($인수) ; 변수 재활용

- @content ; 사용자가 상황에 맞게 추가적인 내용들을 작성하여 삽입 가능

@mixin center($size:100px,$color:tomato){
    width:$size;
    height:$size;
    background-color:$color;
    @content;
}
.container{
    @include center($color:green);	// 키워드 인수
    .item{
        @include center(200px,red){	// 중괄호 안은 $content 내용
        	bottom:0;
            right:0;
        }
    }
}

for문

- @for $i from a through b{ }

- 보간처리 ; #{$변수}

@for $i from 1 through 10 {
    .box:nth-child(#{$i}){  // 값을 적는 부분이기에 보간처리 ${ }
        width:100px * $i ;
    }
}

function

- @function 함수이름(매게변수){ @return 반환할 값 }

@function ratio($size,$ratio){
    @return $size * $ratio
}
.box{
    height:ratio($width,1/2);
}

색상 내장함수

- mix(색1,색2)

- lighten(색,x%) / darken(색,x%) / saturate(색,x%) ; 채도 높임 / desaturate(색,x%) / grayscale(색) ; 회색화

/ invert(색) ; 색 반전 / rgba(색,0~1) ; 투명화

.box{
  background-color: rgba(red,.5);
  &:hover{
    background-color: lighten(red,20%);
  }
}

데이터 종류

- number ; 1,100px,1em..

- string ; relative, "../images/a.png"

- color ; #FFFF00, rgba(0,0,0,.1)

- boolean ; ture, false

- null ; null

- @each를 이용한 list , map

$list: orange, royalblue, yellow;    // 배열
$map:(  // 객체
    o:orange,
    r:royalblue,
    y:yellow
);
@each $c in $list {     // list(배열)의 요소들이 하나씩 c$에 들어감
    .box{
        color:$c;
    }
}
@each $k, $v in $map {  // $k는 key, $v는 value. map에서 꺼내 하나씩 들어감
    .box-#{$k}{
        color:$v;
    }
}