[패스트캠퍼스] 웹퍼블리싱 강의 - 4주차 학습내용

[내일배움카드] x [패스트캠퍼스] - 4주차 학습내용

 

[Sass를 활용한 효율적인 CSS관리]

css로 연맹하던 나,이제 scss를 피할 수가 없다.이번 강의부터는 scss를 배우게 되었다.sass와 scss는 약간의 차이가 존재한다.이번 강의에서는 scss 위주로 배우게 된다.

 

[SCSS 연결방법]
1. scss폴더를 만든다.

2. scss폴더 안에 style.scss 파일을 만들어준다.

3. vscode(작업 에디터)에서 터미널을 연다.

4. 'sass --watch scss/style.scss css/style.css' 를 입력

: scss폴더에서 scss.scss 파일을 찾아서 css폴더 내 style.css로 만들어줘

 

라고 설정하면 간단하게 끝-!

 

scss 사용 시 css와 마찬가지로 @charset "UTR-8"; 지정.

 

css와 마찬가지로 scss도 스타일 파일을 따로 관리한다.그래서 reset이나 common 파일도 다 style.scss에 import 시켜야하는데,만약 _reset.scss 파일을 import 하고싶다면 @import "reset"; 를 선언하면 된다.

 

변수를 지정할 때는 & 로 함수를 선언하여 그 속에 값을 넣으면 된다.

예를 들어 body에 backgound 색상을 넣고 싶다면,

변수 선언 >> $bgBody : #eee

body {background : $bgBody}

 

 

하단 예시 ↓

@charset "UTR-8";

@import "reset";

@import "_mixin";

$bgBody: #eee;

$bgItem: #fff;

$bgButton: gray;

$interval: .1s;

body {

  background: $bgBody;

}

.wrap {

  display: flex;

  justify-content: center;

  width: 100%;

  padding: 100px 0;

  border: 2px solid #ddd;

  perspective: 600px;

  .item {

    width: 300px;

    margin: 50px;

    padding: 30px;

    background: $bgItem;

    border-radius: 10px;

    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);

    h2 {

      margin-bottom: 15px;

      font-family: "arial";

      font-size: 30px;

      @if $bgItem == #fff {color: #333;}

      @else {color: #fff;}

  }

    p {

      margin-bottom: 20px;

      font-family: "arial";

      font-size: 14px;

      line-height: 1.3;

      @if $bgItem == #fff {color: #333;}

      @else {color: #fff;}

    }

  }

}

 

 

scss를 활용하여 레이아웃 생성.

hover시 active되는 효과도 추가 ++

Chapter 1. Sass 기본문법