Sass(Scss) 더 알아보기

 

Sass 7-1 패턴

   - 7개의 폴더, 1개의 파일 이란 뜻으로, 7개의 폴더를 나눠 최종 산출물을 한 파일로 만든다는 뜻입니다.

   - 다른 프레임워크에서는 프레임워크에 맞춰 작업하기도 합니다.

   - 7 folder

      1) base/              : 가장 기본이 되는 스타일이 들어가있습니다.

      2) components/  : 버튼이나 드롭다운 등 각각의 스타일을 정의합니다.

      3) layout/            : header, footer, sidebar 등의 레이아웃 스타일을 관리합니다.

      4) pages/            : component와 layout을 묶어 페이지의 스타일을 관리합니다.

      5) themes/          : 다크모드 등의 테마를 관리합니다.

      6) abstracts/       : Sass 함수, 변수 등을 관리합니다.

      7) vendors/         : bootstrap, jquery 등의 외부 리소스를 담아두는 폴더입니다.

   - 파일명 앞에 언더바( _ )를 붙여 다른 파일에 import되어 사용된다는 표시를 해주는 것이 좋습니다.

 

 

 

@import 

@import './abstracts/variables.scss';
@import './base/reset.scss';
@import './component/buttons.scss';

   - 최종 산출물 파일에 다른 파일의 정보를 불러오는 작업입니다.

   - 하나의 파일에 모든 정보를 입력하면 이후 유지보수에서 어려움을 모든 코드를 찾아봐야하기 때문에,

      하나의 주제를 가진 파일들을 만든 뒤, 최종 파일에 import 하여 사용하게 됩니다.

 

 

 

Sass Variables

$h1-size: 5em;
$h1-color: red;
$h1-align: center;

h1{
    font-size: $h1-size;
    color: $h1-color;
    text-align: $h1-align;
}

   - 하나의 css 속성을 변수로 매칭시키는 것을 의미합니다.

   - 이후 css 스타일을 작성 할 때, 미리 작성한 변수를 입력하여 적용합니다.

   - 이후 해당 스타일을 일괄적으로 변경하게 될 경우가 생기면, 변수값만 변경하여 바꿔줄 수 있습니다.

   - 특정한 색상 등을 변수로 설정하여 색상 변경을 수월하게 적용할 수 있습니다.

 

 

 

@mixin

@mixin ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow; hidden;
}

p {
    width: 300px;
    @include ellipsis;
}


/* 추가 사용법 */
@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
    background-image: url($bg-url);
    background-repeat: no-repeat;
    background-position: $bg-position;
    background-size: $bg-size;
    background-color: $bg-color;
}

.bg{
    @include bg-img('./image/img.png', center, contain, white);
}

   - 여러 스타일을 하나로 묶는 방법입니다.

   - 변수를 입력 가능하게 만들어 커스텀할 수 있습니다. 이떄, 디폴트값을 입력할 수도 있습니다.

 

 

 

 

@function

@function half-opacity($color) {
    $color: rgba($color, .5);
    @return $color;
}

h1 {
    color: half-opacity(green);
}

   - 변수를 입력하여 원하는 값을 반환받는 함수입니다.

   - 기존에 css보다 스타일 관리법을 확장시킬 수 있습니다.