[SCSS] - 07. 변수

변수(1)

• 특수문자(-,_ 제외) , 숫자로 변수명 시작불가

👊 예제

<div class="btns">
        <button class="btn primary">Primary Button</button>
        <button class="btn secondary">Secondary Button</button>
        <button class="btn warning">Warning Button</button>
    </div>

.btns {
    .btn {
        border: none;
        text-transform: uppercase;
        font-size: 15px;
        padding: 10px 30px;
        border-radius: 3px;
        color: #fff;
    }

    .primary {
        background-color: royalblue;
    }

    .secondary {
        background-color: yellowgreen;
    }

    .warning {
        background-color: crimson;
    }
}

• 이렇게 각각의 버튼들에 색깔을 지정하고 프로젝트가 커지면서 버튼들이 증가하고 저렇게 primary 색들을 다 주게되고난 후, primary 색을 변경하려고 할때에 일일이 다 변경해주어야하는 단점이 있다.

/* Variables */
$primary-btn: royalblue;
$secondary-btn: yellowgreen;
$warning-btn : crimson;

/* Buttons */
.btns {
    .btn {
        border: none;
        text-transform: uppercase;
        font-size: 15px;
        padding: 10px 30px;
        border-radius: 3px;
        color: #fff;
    }

    .primary {
        background-color: $primary-btn;
    }

    .secondary {
        background-color: $secondary-btn;
    }

    .warning {
        background-color: $warning-btn;
    }
}

• 변수를 선언해서 그 변수에 색상코드를 다 넣어놓고 해당 변수를 쓴다면 색상 변경할시에 변수에 들어있는 값만 변경해주면 된다

🙆 RESULT

---

변수(2)

👊 예제

<section class="portfolio">
        <h1>Travel & Tour Agency</h1>
        <div class="portfolio-items">
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
            <div class="portfolio-item"></div>
        </div>
    </section>

• portfolio-items 밑에 여덟개의 div가 존재한다. div안에 backgroundimage를 추가할 예정이다.

$color-primary : #222;
$color-secondary: #333;
$bgc-item: #eee;
$portfolio-item-w: 300px;
$portfolio-item-h: 300px;
$portfolio-item-bdrs : 10px;
$portfolio-images-url : "images/";

• 사전에 정의한 변수들

.portfolio-item {
            border: 1px solid #000;
            width: $portfolio-item-w;
            height: $portfolio-item-h;
            border-radius: $portfolio-item-bdrs;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;

            &:nth-child(1) {
                background-image: url("../" + $portfolio-images-url+"blog-post-01.jpg");
            }
}

• 이렇게 item의 가로길이, 세로길이를 변수를 이용해 정의하고, background의 공통적인 속성(1~8)을 미리 정의한후, background-image만 nth-child를 이용해서 정해준다.

  background-image: url("../" + $portfolio-images-url+"blog-post-01.jpg");

• 이부분을 주목하면 $portfolio-images-url에 이미지 폴더 경로를 정의했기 때문에 string값으로 연결시켜준다.

🙆 RESULT

➕ 추가

portfolio-items {
        width: 1200px;
        display: grid;
        margin: auto;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
}

• display: flex와 다르게 grid는 선언후 grid-template-columns을 이용해서 몇등분할건지 정의해줘야한다.!

---

## 변수(3) - css 변수선언

// 전역변수
$crimson : crimson;
$black : #000;

.portfolio {
    color: $crimson;

    h1 {
        color: $black;
    }
}

• 보통 선언할때에는 전역변수로 선언한다.(맨위에 선언하거나 {} 밖에 선언하는 경우.

.portfolio {
    // 지역변수
    $crimson : crimson;
	$black : #000;
    color: $crimson;

    h1 {
        color: $black;
    }
}

.headline {
    color: $crimson;

    h2 {
        color: $black;
    }
}

• 이런경우 .headline에서 에러남 $crimson, $black은 알수없는 변수라고 에러나게됨. 지역변수니까!

CSS 변수선언방식

/* :root {
    --변수명: 값;
} */

:root {
    --primary-color: #222;
    --secondary-color : #444;
}

.primary {
    color: var(--primary-color);
}

• 선언 : --변수명 : 값;
• 사용 : var(변수명)