Sass 입문

Sass란?

css를 효율적으로 설명하는 메커니즘.
네스트 구조로의 기술을 할 수 있고, 변수나 사칙 연산, 함수, 스타일의 계승등이 가능하다.

Sass에는 SCSS기법과 SASS기법이 있다.
후자는 개발자에게 불인기답게, 전자가 주류인것 같다.
scss 파일 → css 파일로 컴파일하여 이용한다.
이번에는 prepros라는 도구를 사용하여 컴파일한다.

설치

prepros 공식 : htps : // p p s. 이오/
prepros의 공식 사이트로 가서 아래 버튼을 클릭하십시오.



이어서, 다음 버튼을 클릭한다.


설치 프로그램을 시작하면 바탕 화면에 바로 가기가 만들어집니다.

작업 폴더에 다음과 같은 폴더 구성으로 폴더를 만듭니다.

directories_and_files

  root
    L js
    L css
        L style.css
    L scss
        L style.scss
    index.html

prepros를 시작합니다.

화면 왼쪽의 PROJECTS 아래에 루트 디렉토리를 드래그 앤 드롭합니다.



style.scss를 선택하고 AutoCompile을 선택하고 ProcessFile을 클릭합니다.

그리고는 vscode등으로 style.scss를 보존할 때마다 마음대로 컴파일되어 style.css가 생성된다.

사용해보기

중첩 구조

style.scss

// ネスト構造での記述
.box {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    p {
        font-size: 8px;
        margin: 10px;
        // hover時に何かさせたいとき
        a {
            text-decoration: none;
            // 入れ子の構造の中で&が使われたとき、その親要素のセレクタを指す。
            &:hover {
                font-weight: bold;
            }
        }
    }
}

변수 처리

style.scss

// 変数：データにつけるラベル
// Sassで扱えるデータ型（数値、文字列、真偽、色、リスト）
$baseFontSize: 12px;
.box {
    p {
        font-size: $baseFontSize;
    }
}

// 文字列を扱う
// #{}は変数を評価する
// 文字列内に埋め込むには#{}を使おう。
$imgDir: "../img/";
.box {
    background: url("#{$imgDir}test.jpg");
}

// カラーを扱う
$brandColor: rgba(255,0,0,0.9);
.box {
    p {
        color: $brandColor;
        // Sassには標準で用意されている関数がある。
        // Sass built-in functionとかで検索すると情報がヒットするので確認してください。
        // ここではlightenを使って明るさを変更します。
        color: lighten($brandColor, 30%);
    }
}

사칙 연산

style.scss

// 四則演算
$baseFontSize: 12px;
.box {
    p {
        font-size: $baseFontSize - 2;
    }
}

조건 분기

style.scss

// 条件分岐
// @if @else
// 比較演算子の種類
// == != <> <= >=
$debugMode: true;

.box {
    @if $debugMode == true {
        color: red;
    } @else {
        color: green;
    }
}

반복 처리

style.scss

// 繰り返し処理
// @for
// @while
@for $i from 10 through 14 {
    .fs#{$i} {font-size: 10px;
              font-weight: bold;}
}

$i: 10;
@while $i <= 14 {
    .fs#{$i} {font-size: #{$i}px;}
    $i: $i + 1;
}

목록 취급

style.scss

// リスト操作
$animals: cat, dog, tiger;
@each $animal in $animals {
    .#{$animal}-icon {background: url("#{$animal}.png");}
}

함수 처리

style.scss

// グローバル変数は_gloabals.scss
// ファンクションは_functions.scss
// というようにファイルを分けると管理しやすい。
// 読み込みは
// @import "gloabal";
// のように、アンダーバーと拡張子を省いたファイル名で指定する。
$totalWidth: 940px;
$columnCount: 5;

@function getColumnWidth($width, $count) {
    // 計算処理
    $padding: 10px;
    $columnWidth: floor($width - ($padding * ($count - 1)) / $count);
    @debug $columnWidth;
    @return $totalWidth;
}

.grid {
    float: left;
    width: getColumnWidth($totalWidth, $columnCount);
}

mixin 사용

여러 설정을 함께 정의 할 수 있습니다.
인수를 건네주어 값에 반영시킬 수가 있다.

style.scss

@mixin round {
    border-radius: 4px;
}

.box {
    @include round;
}

// mixinに引数を渡す。
@mixin round($arg:4px) {
    border-radius: $arg;
}

.box {
    @include round(10px);
}

extend 사용

설정을 상속할 수 있다.

style.scss

.msg {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    color: white;
}

.errorMsg {
    @extend .msg;
    background: red;
}

.warningMsg {
    @extend .msg;
    background: orange;
}

mixin과 extend 정보

사용해 보면 mixin과 extend는 사용 개소가 늘어나면 영향 범위를 관리하는 것이 힘들었습니다.
어떠한 기준으로 영향 범위를 알기 쉽게 한 후에 사용하지 않으면, css 파탄의 원인이 될지도 모른다고 생각했습니다.