[DAY - 65] SCSS

• css / SCSS / Sass
• css와 차이점
• SCSS 사용 방법
• SCSS 문법 예제

 

 

 

1) css / SCSS / Sass

기존에 html의 style을 변경하고자 할 때  css를 사용했다.

기본적인 컴퓨터 언어에 대한 이해도가 생긴 지금 react.js를 배우기 앞서 react에서 많이 활용할 수 있는 SCSS / Sass를 배웠다.

간단하게 배운 내용을 복기해 보면 css보다 좀 더 사용성이 좋고 편리하며, 부가적인 기능(함수, 연산자 등)을 쓸 수 있다는 점이 새로웠다.

 

2) css와 차이점

https://sass-lang.com/guide

Sass: Sass Basics

SCSS

Sass

 

위의 예시처럼 속성값에 변수로 지정해 놓은 값을 넣을 수 있다는 점과, 자식 요소의 style을 적용할 때 간단히 부모 요소의 속성 안에 작성하면 된다는 것이다.

 

 

3) SCSS 사용 방법

지금 사용중인 IDE는 VScode인데 css / SCSS / Sass를 변환해 주는 컴파일 확장이 있다.

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass 

Live Sass Compiler - Visual Studio Marketplace

 

설치를 해 준뒤 settings.json에 css가 생성되는 경로와 map파일이 생성되지 않는 설정을 추가해 주었다.

 

    "liveSassCompile.settings.formats": [
    

        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css",
            "savePathReplacementPairs": null
        }
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.useNewCompiler": false,

 

이제 scss폴더를 만들고 SCSS파일을 생성해 코드를 작성하면 css폴더에 같은 이름의 css파일이 만들어진다.

 

4) SCSS 예제

4-1) 기본

// SCSS
.con-box {
    width: 300px;
    padding: 20px;
    border: 1px solid #000;
    .box {
        background: pink;
        span {
            font-size: 25px;
            font-weight: 700;
        }
        p {
            background: hotpink;
            text-indent: 20px;
        }
    }
}

// CSS
.con-box {
  width: 300px;
  padding: 20px;
  border: 1px solid #000;
}
.con-box .box {
  background: pink;
}
.con-box .box span {
  font-size: 25px;
  font-weight: 700;
}
.con-box .box p {
  background: hotpink;
  text-indent: 20px;
}

 

위 코드처럼 SCSS에서 부모 요소의 속성 안에 자식의 속성을 지정하면 css 변환 시 자동으로 앞에 부모의 class나 태그가 붙게 된다.

 

4-2) 자식 요소

#header {
    width: 100%;
    .inner {
        width: 1200px; height: 150px; margin: auto; position: relative;
        h1 { position: absolute; left: 0; top: 50px; }
        .nav {
            position: absolute; right: 0; top: 65px; 
            .gnb {
                display: flex;
                 > li {
                    margin-left: 60px; 
                    >  a {
                            font-size: 20px; 
                        }
                }
            }
        }
    }
}


#header {
  width: 100%;
}
#header .inner {
  width: 1200px;
  height: 150px;
  margin: auto;
  position: relative;
}
#header .inner h1 {
  position: absolute;
  left: 0;
  top: 50px;
}
#header .inner .nav {
  position: absolute;
  right: 0;
  top: 65px;
}
#header .inner .nav .gnb {
  display: flex;
}
#header .inner .nav .gnb > li {
  margin-left: 60px;
}
#header .inner .nav .gnb > li > a {
  font-size: 20px;
}

 

4-3) 속기

    .box {
        width:300px; height: 100px; background: green;
        text-align: center; 
        margin:{
            top:20px;
            left:30px;
            bottom:20px;
            right: 50px;
        }
        padding:{
            top:20px;
            left:30px;
            bottom:20px;
            right: 50px;
        }
        
        
        
.wrap .box {
  width: 300px;
  height: 100px;
  background: green;
  text-align: center;
  margin-top: 20px;
  margin-left: 30px;
  margin-bottom: 20px;
  margin-right: 50px;
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 20px;
  padding-right: 50px;
}

 

공통 속성을 앞에 묶고 안에 세부 속성을 지정할 수 있다.

 

 

4-4) 선택자

.nav {
    width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    li {
        a {
            font-size: 25px;
            display: block;
            padding: 20px;
            background: tan;
            transition: 0.3s;
            &:hover {
                background: lightblue;
                padding: 30px;
            }
        }
        &:active {
            a {
                background: lightcoral;
                color: white;
                border: 1px solid #000;
            }
        }
    }
}



.nav {
  width: 1000px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.nav li a {
  font-size: 25px;
  display: block;
  padding: 20px;
  background: tan;
  transition: 0.3s;
}
.nav li a:hover {
  background: lightblue;
  padding: 30px;
}
.nav li:active a {
  background: lightcoral;
  color: white;
  border: 1px solid #000;
}

 

 

4-5) (-) 공통부분

.con-box {
    display: flex;
    margin: 30px;

    .box {
        height: 200px;
        line-height: 100%;
        text-align: center;

        &-small {
            width: 100px;
            background: lightcoral;
        }
        &-middle {
            width: 200px;
            background: lightblue;
        }
        &-big {
            width: 300px;
            background: lightgreen;
        }
    }
}



.con-box {
  display: flex;
  margin: 30px;
}
.con-box .box {
  height: 200px;
  line-height: 100%;
  text-align: center;
}
.con-box .box-small {
  width: 100px;
  background: lightcoral;
}
.con-box .box-middle {
  width: 200px;
  background: lightblue;
}
.con-box .box-big {
  width: 300px;
  background: lightgreen;
}

기존 css에서

class="box box1"  

class="box box2"

.box { } 처럼 공통부분을 처리하듯이 - 하이픈을 사용해 똑같이 처리할 수 있다.

 

4-6) 변수

$red : red;
$green : green;
$blue : blue;
$fz30 : 30px;
$w1200 : 1200px;

header {
    width: $w1200;
    background: $green;
    border: 1px solid $red;
    #nav {
        display: flex;
        li {
            margin-right: 20px;
            a{
                font-size: $fz30;
                &:hover {
                    color: $blue;
                }
            }
        }
    }
}



header {
  width: 1200px;
  background: green;
  border: 1px solid red;
}
header #nav {
  display: flex;
}
header #nav li {
  margin-right: 20px;
}
header #nav li a {
  font-size: 30px;
}
header #nav li a:hover {
  color: blue;
}

 script에서 변수를 지정하고 값을 할당하듯이 SCSS에도 똑같이 적용이 가능하다.

 

4-7) 지역변수를 전역변수로

$color : tomato;
body {
    font-size: 50px;
}
span {
    color: $color;
}
h1 {
    $color : skyblue !global;
    color: $color;
}
p {
    color: $color;
}

h1에서 $color의 값을 skyblue로 변경한 후 !global을 작성해 주었기 때문에 그 이후부턴 $color의 값이 skyblue가 된다.

 

4-8) 연산자

.con-box {
    background: lightgray;
    padding: 20px;
    div {
        background: lightpink;
        margin-bottom: 15px;
        line-height: 50px;
        &.box1 {
            width: 100px + 100px;
        }
        &.box2 {
            width: 200px - 100px;
        }
        &.box3 {
            width: 15px * 10;
        }
        &.box4 {
            width: (500px / 5);
        }
    }
}



.con-box {
  background: lightgray;
  padding: 20px;
}
.con-box div {
  background: lightpink;
  margin-bottom: 15px;
  line-height: 50px;
}
.con-box div.box1 {
  width: 200px;
}
.con-box div.box2 {
  width: 100px;
}
.con-box div.box3 {
  width: 150px;
}
.con-box div.box4 {
  width: 100px;
}

SCSS에선 연산자 사용이 가능하다.

단 나누기의 경우 다른 연산자와 같이 사용하지 않는 경우 소괄호 ( ) 를 반드시 사용해 주어야 한다.

 

4-9) 함수 @mixin / @include

@mixin make {
    width: 400px;
    margin: 100px;
    border: 1px solid #000;
    text-align: center;
    line-height: 100px;
    font-size: 25px;
    
    span {
        font-weight: 700;
        font-size: 40px;
        background: lightgreen;
        margin: 0 15px;
    }
}

h1 {
    @include make();
}
p {
    @include make();
}



h1 {
  width: 400px;
  margin: 100px;
  border: 1px solid #000;
  text-align: center;
  line-height: 100px;
  font-size: 25px;
}
h1 span {
  font-weight: 700;
  font-size: 40px;
  background: lightgreen;
  margin: 0 15px;
}

p {
  width: 400px;
  margin: 100px;
  border: 1px solid #000;
  text-align: center;
  line-height: 100px;
  font-size: 25px;
}
p span {
  font-weight: 700;
  font-size: 40px;
  background: lightgreen;
  margin: 0 15px;
}

 

@mixin을 사용해 함수를 만들 수 있다. 함수를 호출할 땐 @include를 사용하면 된다.

만약 h1태그와 p태그 안에 자식 요소로 span이 있다면 make 함수에서 작성한 style이 적용된다.

또한 아래 코드와 같이 매개변수를 사용하는 함수도 가능하다.

 

@mixin make($w, $br, $color) {
    border: 1px solid #000;
    width: $w;
    border-radius: $br;
    background: $color;
    text-align: center;
    margin-right: 15px;
}

ul {
    display: flex;
    margin: 30px;
    li {
        @include make(300px, 10px, tan)
    }
}

 

4-10) 상속 @extend

.box1 {
    border: 1px solid #000;
    width: 300px;
    line-height: 80px;
    font-size: 20px;
    margin: 30px auto;
}

.box2 {
    @extend .box1;
    text-align: center;
    background: tan;
}

.box3 {
    @extend .box2;
    background: lightcoral;
    
}



.box1, .box2, .box3 {
  border: 1px solid #000;
  width: 300px;
  line-height: 80px;
  font-size: 20px;
  margin: 30px auto;
}

.box2, .box3 {
  text-align: center;
  background: tan;
}

.box3 {
  background: lightcoral;
}

@extend를 사용하면 style의 속성과 값을 상속받을 수 있다.

 

4-11) 삼항연산자 if

$w : 1000;

.con-box {
    background: if($w > 600, pink, green);
}



.con-box {
  background: pink;
}

 

if를 사용하지만 javascript의 if와 다른 기능인 삼항연산자 기능을 한다.

fi( 조건문  , true 실행문 , false 실행문)

 

4-12) if문 @if

$w  : 1000px;

div {
    width: 200px;
    border: 1px solid #000;
    @if ($w >= 600) {
        width: $w;
        background: tan;
    } @else {
        width: 100%;
        background: lightblue;
    }
}



div {
  width: 200px;
  border: 1px solid #000;
  width: 1000px;
  background: tan;
}

SCSS의 if문은 @if로 작성하며 나머지 문법은 javascript의 if문과 비슷하다.