[SCSS] SCSS

2018.08.02 

SASS?

CSS작성(생성)을 위한 작고 가벼운 언어이고, Sass와 SCSS가 있다.

Sass  : SCSS와 작성하는데 있어서 구조적 차이가 있고 작성이 번거롭고 복잡할 수 있다.

SCSS : 기존에 알던 CSS와 유사하게 작성할 수 있기 때문에 친근하게 느껴져 배우기가 쉽다.

이 둘은 같은 계열의 언어이지만 요즘은 SCSS를 많이 쓴다.

SCSS => Sass 컴파일러 => css 변환

Sass 컴파일러 방식

- VS Code + Live Sass Compiler

- Compiler1 Ruby Gem 이용

- Compiler2 Node.js NPM 이용

Live Sass Compier 까지 들음. 브라켓으로 어떻게 되지 않을까 했는데.. 컴파일은 VScode를 다운받아서 사용해야 할 것 같다

VScode를 깔고 간단한 셋팅 뒤 sass관련 확장 프로그램을 다운받는다.

sass, sass compiler, sass lint

- scss 파일을 생성하고, VScode 하단에 watch sass를 클릭하면 css파일로 컴파일된다. 

---

2018.08.06

SCSS 변수 만들기

$bk123-_

1. $영문으로 시작해야 한다.
2. 변수는 영어, 숫자, -, _ 만 가능하다. 
3. 값은 CSS값을 사용
4. 주석은 컴파일시 나타나지 않는다.

NESTING  (Tree 구조)

#box1{
    font-size: 30px;
    background-color: #ffcccc;
    border-radius: 20px;
    border: 3px solid #f00;
    box-shadow: 0 3px 11px 0 rgba(0,0,0,0.75);

    & > a{
        color:#a22;
        text-decoration: none;
    }

    a:hover{
        color:#000;
        text-decoration: underline
    }
}

(SCSS)

&은 자기 자신을 뜻한다.(상위요소)

#box1 {
  font-size: 30px;
  background-color: #ffcccc;
  border-radius: 20px;
  border: 3px solid #f00;
  -webkit-box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75);
          box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75);
}

#box1 > a {
  color: #a22;
  text-decoration: none;
}

#box1 a:hover {
  color: #000;
  text-decoration: underline;
}

(위의 SCSS를 컴파일 한 CSS)

---

20180809

mixin

함수 생성하듯이 만든 후에, 인클루드로 값을 넣는다...

@mixin fontSizeBgColor( $fontSize, $bgColor ) {

font-size: $fontSize;

background-color: $bgColor;

}

//mixin

@include fontSizeBgColor(40px, #ffcccc);

extend

함수 재사용에 용이하다.

%boxShape {

border-radius: 20px;

border: 3px solid #f00;

box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75);

}

@extend %boxShape;

mixin은 속성은 같은데 값이 다를때 extend는 완전히 같은 코드가 여러군데 쓰일 때 사용한다.

---

partial

코드들을 묶어서 별도의 파일에 저장한 뒤 사용하는 기능

// partial(부분적인)

// _mixin.scss 파일 불러오기

// scss 파일이 _로 시작되면 컴파일이 안된다.

@import "mixins";

@import "partial/style";

#test {

@include fontSizeBgColor();

@extend %boxShape;

}

---

if

@mixin textAndBgClolor ($textColor, $bgColor){

color:$textColor;

background-color: $bgColor;

}

//if

@mixin thema($mood) {

@if $mood == 'light' {

@include textAndBgClolor(#333, #ff0 );

}

@else if $mood == 'dark' {

@include textAndBgClolor(#fff, #000 );

}

@else {

@include textAndBgClolor(#f00, #aaa );

}

}

#box1{

@include thema('light');

}

#box2{

@include thema('dark');

}

#box3{

@include thema('');

}