반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 Sass의 @mixin, @extend, @import 에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

@mixin

 

mixin(믹스인)은 함수와 비슷한 동작을 하는 문법이며 CSS 스타일 시트에서 반복적으로 재사용할 CSS 스타일 그룹 선언을 정의하는 기능을 합니다.

단순하게 CSS 그룹으로 정의하여 적용할 수 있지만 인수를 활용하게 되면,

반복되는 CSS 속성을 한 개의 mixin(믹스인) 정의를 가지고 다양한 CSS 스타일을 만들어 낼 수 있습니다.

  • ✔ 정의하기 : @mixin 믹스인 이름 { CSS 스타일 } 
  • ✔ 호출하기 : @include 믹스인 이름

 

 

믹스인 기본 문법

@mixin을 정의해 만든 CSS 스타일을 @include 이용하여 참조해서 재사용할 수 있습니다.

@mixin, @include 옆에 사용되는 이름은 selector가 아닌 함수 이름처럼 mixin 이름입니다. 

//@mixin - 스타일 정의
@mixin 믹스인 이름 {
	//CSS 스타일 내용
}

//@include - 믹스인 호출
@include 믹스인 이름

 

SASS '@mixin, @include 기본 정의' 문법 코드 입니다. 
//믹스인 정의
@mixin tit_text {
    position: relative;
    padding-left: 10px;
    font: {
        size: 30px;
        weight: bold;
    }
    color:#000;

    &::before {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 2px;
        margin-top: -2px;
        background-color: #ccc;
        content: '';
    }

    span.icon-check {
        display:inline-block;
        width: 10px;
        height:10px;
        background: url('../img/icon-check.png');
    }
}

//믹스인 호출
h1 {
    @include tit_text;
}

 

CSS '@mixin, @include 기본 정의' 컴파일 결과 코드 입니다. 
h1 {
  position: relative;
  padding-left: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
h1::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  margin-top: -2px;
  background-color: #ccc;
  content: '';
}
h1 span.icon-check {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../img/icon-check.png");
}

 

 

인수(Arguments)

mixin은 함수처럼 인수를 가질 수 있습니다.

그렇기 때문에 하나의 mixin을 정의해도 다양한 결과를 만들어 낼 수 있습니다.

사용방법은 믹스인에서 매개변수를 지정해주고 include로 인수를 사용하면 됩니다. 

'매개변수'란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용됩니다.

제공되는 여러 데이터들을 '전달인수' 라고 부릅니다.

//정의하기
@mixin 믹스인 이름($매개변수) {
	//CSS 스타일 내용	
}

//호출하기
@include 믹스인 이름(인수);

 

SASS '@mixin 인수 기본값이 없을 경우' 문법 코드 입니다. 
@mixin border-line($width, $style) {
    border: $width $style #000;
}

.border-box1 {@include border-line(2px, solid);}
.border-box2 {@include border-line(4px, dotted);}

 

CSS '@mixin 인수 기본값이 없을 경우' 컴파일 결과 코드 입니다. 
.border-box1 {
  border: 2px solid #000;
}

.border-box2 {
  border: 4px dotted #000;
}

 

SASS '@mixin 인수 기본값을 설정할 경우' 문법 코드 입니다. 
@mixin border-line($width: 2px, $style: dotted) {
    border: $width $style #000;
}

.border-box1 {@include border-line;}
.border-box2 {@include border-line(6px);}

 

CSS '@mixin 인수 기본값을 설정할 경우' 컴파일 결과 코드 입니다. 
.border-box1 {
  border: 2px dotted #000;
}

.border-box2 {
  border: 6px dotted #000;
}

 

SASS '@mixin 키워드 인수' 문법 코드 입니다. 
@mixin border-line($width: 2px, $style: dotted, $color: #000) {
    border: $width $style $color;
}

.border-box1 {@include border-line($width: 1px, $color: coral);}

 

CSS '@mixin 키워드 인수' 컴파일 결과 코드 입니다. 
.border-box1 {
  border: 1px dotted coral;
}

 

 

 

 

 

@extend

 

CSS 스타일을 정의하다 보면, 클래스 선택자의 모든 스타일은 동일하게 가져야 하지만 부분적으로 다른 경우가 발생합니다.

그럴 때 다중 클래스를 사용하거나 CSS 공통으로 사용하는 속성을 모아서 선언했을 것입니다. 

이럴 경우 @extend 를 사용하면 편리합니다.

그러나 @extend는 CSS 미디어쿼리 내에서 실행되지 않습니다.

그렇기에 반응형웹이나 모바일 웹퍼블리싱 작업 시에는 사용하지 않는 것이 좋습니다.

Sass Guideline 에서도 @extend는 사용을 권장하지 않습니다.

기본 문법은 아래와 같습니다.

@extend 선택자

 

SASS '@extend' 문법 코드 입니다. 
.btn {
    padding: 10 15px;
    font: {
        size: 15px;
        weight: bold;
    }
    background-color: coral;
}

.ico {
    @extend .btn;
    background-color: #000;
}

 

CSS '@extend' 컴파일 결과 코드 입니다. 
.btn, .ico {
  padding: 10 15px;
  font-size: 15px;
  font-weight: bold;
  background-color: coral;
}

.ico {
  background-color: #000;
}

 

 

 

 

 

@import(불러오기)

 

@import 문법을 사용하면 외부에 모듈화 해서 분리해 놓은 Sass 파일을 불러와 병합하여 CSS로 컴파일할 수 있습니다.

또한 불러와 병합한 파일에 정의된 모든 변수 또는 믹스인을 주 파일에서 사용할 수 있습니다.

CSS @import는 사용할 때마다 http 호출을 매번 하기때문에 속도 저하를 가져올 수 있지만,

Sass @import는 CSS로 컴파일하여 바로 처리하기 때문에 http 호출이 필요하지 않아 속도 저하 문제를 발생시키지 않습니다.

기본 문법은 아래와 같습니다.

@import '파일경로/파일명'
@import 'font.scss'
@import 'font' //scss 파일 확장자명 생략가능

 

 

@import  실무에서 유용하게 사용하는 Tip

첫 번째, 변수와 @mixin은 따로 모듈화 분리하여 Sass 파일로 만들어서 @import 합니다.

이때 파일명 앞에 '_' 를 붙이면 CSS로 컴파일될 때 '_' 로 시작하는 파일명의 파일은 컴파일되지 않습니다.

예를 들어 _mixin.scss, _header.scss 파일명을 만들고, 주 파일에서 @import 하면 2개(_mixin.scss, _header.scss)의 파일 내용은 주 파일에 적용되지만 _mixin.scss, _header.scss 파일은 css로 컴파일 되지 않기 때문에 관리하기가 편리합니다.

 

두 번째, 하나의 @import로 여러 파일을 불러올 수 있습니다.

파일은 ',' 로 구분합니다.

@import '_mixin', 'header';

 

 

세 번째, 파일 확장자를 지정할 필요가 없습니다.

Sass에서는 당연히 파일명.scss 를 불러온다고 가정하기 때문입니다.

그러나 CSS 파일을 불러와야 할 경우에는 확장자명을 꼭 지정해 주어야 합니다.

 

 

 

 

 

마치며...

 

Sass는 현재의 포스팅을 마지막으로 기능과 사용법에 대해 모두 설명드렸습니다.

틈틈이 작성하여 3주 동안 6편의 내용으로 포스팅했습니다.

웹퍼블리싱 마크업 프로젝트를 마무리한 것 마냥 시원섭섭하네요!!ㅎㅎ

제가 작성한 Sass 관련 6편의 포스팅 내용을 정독하셨다면, 앞으로 Sass를 사용하시는데 큰 문제가 없을 것이라 생각됩니다.

진짜 뿌듯함과 시원섭섭함이 교차하네요!!

다음번에도 좋은 주제의 내용을 새로 가지고, 포스팅하도록 하겠습니다.

감사합니다.

 

 

반응형

'Utility Knowhow' 카테고리의 다른 글

[SourceTree]소스트리(GIT GUI) 설치방법 - 1편  (0) 2022.06.01
Visual Studio Code(VS Code) - Live Server 모바일에서 웹퍼블리싱 실시간 확인하기  (0) 2022.04.25
[SassㆍSCSS] SASS 문법 5편 - @each, @while  (0) 2021.11.08
[SassㆍSCSS] SASS 문법 4편 - 조건문(@if), 반복문(@for)  (0) 2021.11.04
[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default  (0) 2021.11.01
반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 @each, @while 에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

@each

 

@each 는 List 와 Map 데이터를 반복할 때 사용합니다.

자바스크립트 for in 반복문과 비슷합니다.

 

 

List

하나의 데이터를 저장하기 위해 변수를 사용하는데, 여러 개의 데이터를 저장할 때에는 list  또는 뒤이어 설명할  map 이라는 형식으로 저장합니다.

예를 들어 'apple, banana, mango, orange' 총 4개의 과일을 변수에 저장해서 사용하려고 할 경우,

단순하게 각각의 변수에 저장할 수 있겠지만, 아래 예제와 같이 데이터들을 연관된 것끼리 모아서 하나의 변수에 저장함으로써 편하게 관리할 수 있습니다.

// @each 문법에 하나의 변수만 사용할 때 문법
@each $변수 in 리스트 또는 맵 데이터 {
	//반복 내용
}

 

SASS '@each list data 반복문' 문법 코드 입니다. 
//List Data
$fruits : (apple, banana, mango, orange);

.list_fruits {
    @each $fruit in $fruits {
        li.#{$fruit} {
            background: url('../img/#{fruit}.png');
        }
    }
}

 

CSS '@each list data 반복' 컴파일 결과 코드 입니다. 
.list_fruits li.apple {
  background: url("../img/fruit.png");
}
.list_fruits li.banana {
  background: url("../img/fruit.png");
}
.list_fruits li.mango {
  background: url("../img/fruit.png");
}
.list_fruits li.orange {
  background: url("../img/fruit.png");
}

 

SASS '@each 반복문에 두 개 이상의 변수 사용' 문법 코드 입니다. 
.list-fruits {
    @each $fruit in apple, banana, mango, orange {
        li.#{$fruit} {
            background: url('../img/#{fruit}.png');
        }
    }
}

//리스트를 변수로 저장해서 사용 가능
$fruits : apple, banana, mango, orange;
.list_fruits {
    @each $fruit in $fruits {
        li.#{$fruit} {
            background: url('../img/#{fruit}.png');
        }
    }
}

 

CSS '@each 반복문에 두 개 이상의 변수 사용' 컴파일 결과 코드 입니다. 
.list-fruits li.apple {
  background: url("../img/fruit.png");
}
.list-fruits li.banana {
  background: url("../img/fruit.png");
}
.list-fruits li.mango {
  background: url("../img/fruit.png");
}
.list-fruits li.orange {
  background: url("../img/fruit.png");
}

.list_fruits li.apple {
  background: url("../img/fruit.png");
}
.list_fruits li.banana {
  background: url("../img/fruit.png");
}
.list_fruits li.mango {
  background: url("../img/fruit.png");
}
.list_fruits li.orange {
  background: url("../img/fruit.png");
}

 

SASS '@each index 값이 필요할 경우 내장 함수' 문법 코드 입니다. 
//List Data
$fruits : (apple, banana, mango, orange);
.list_fruits {
    @each $fruit in $fruits {
        $i : index($fruits, $fruit);
        li:nth-child(#{$i}) {
            left: 100px * $i;
        }
    }
}

 

CSS '@each index 값이 필요할 경우 내장 함수' 컴파일 결과 코드 입니다. 
.list_fruits li:nth-child(1) {
  left: 100px;
}
.list_fruits li:nth-child(2) {
  left: 200px;
}
.list_fruits li:nth-child(3) {
  left: 300px;
}
.list_fruits li:nth-child(4) {
  left: 400px;
}

 

 

Map

사용목적과 방법은 list와 유사합니다.

특징은 각 값마다 매칭 된 키가 있기 때문에 동적으로 접근할 수 있습니다.

또한 CSS에 없는 Sass의 고유 문법이며, 많은 양의 데이터를 컨트롤하기 위해서 반드시 필요합니다.

 

SASS '@each Map Data' 문법 코드 입니다. 
// Map Data
$coffees : (mild: americano, soft: latte, strong: espresso, sweet: mocha);

@each $state, $menu in $coffees {
    #{$state}-icon {
        background: url('../img/#{$menu}.png');
    }
}

 

CSS '@each Map Data' 컴파일 결과 코드 입니다. 
mild-icon {
  background: url("../img/americano.png");
}

soft-icon {
  background: url("../img/latte.png");
}

strong-icon {
  background: url("../img/espresso.png");
}

sweet-icon {
  background: url("../img/mocha.png");
}

 

 

 

 

 

@while

 

@while 은 조건이 false 를 반환할 때까지 내용을 반복합니다.

자바스크립트 while 문과 유사하여, 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있습니다.

그렇기에 사용을 권장하지 않습니다.

@while 조건 {
	//반복 내용
}

 

SASS '@while' 문법 코드 입니다. 
$i : 6;

@while $i > 0 {
    .list-#{$i} {
        width: 2px * $i;
    }
    $i : $i - 2;
}

 

CSS '@while' 컴파일 결과 코드 입니다. 
.list-6 {
  width: 12px;
}

.list-4 {
  width: 8px;
}

.list-2 {
  width: 4px;
}

 

 

 

 

 

마치며...

 

드디어 SassScript 마무리로 @each, @while 에 대하여 포스팅하였습니다.

@each, @while 문법도 자바스크립트 each문과 while문과 비슷하기에 이해하기 어렵지는 않았을 것입니다.

그동안 SassScript 인 if함수, @if, @for, @each, @while 다루어 보았습니다.

웹퍼블리싱 작업 시 상황에 맞게 효율적으로 쓰게 된다면 아주 유용한 문법들입니다.

다음은 Sass  @mixin과 @extend에 대하여 알아보겠습니다.

감사합니다.

 

 

반응형

'Utility Knowhow' 카테고리의 다른 글

Visual Studio Code(VS Code) - Live Server 모바일에서 웹퍼블리싱 실시간 확인하기  (0) 2022.04.25
[SassㆍSCSS] SASS 문법 6편 - @mixin, @extend, @import  (0) 2021.11.10
[SassㆍSCSS] SASS 문법 4편 - 조건문(@if), 반복문(@for)  (0) 2021.11.04
[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default  (0) 2021.11.01
[SassㆍSCSS] SASS 문법 2편 - 주석, 연산자  (0) 2021.10.28
반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 조건문(@if), 반복문(@for)에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

if(함수)

 

조건의 값(true, false)에 따라 두 개의 표현식 중 한 개만 반환합니다.

자바스크립트의 삼항 연산자와 비슷합니다.

조건의 값이 참(true) 일 경우, 표현식 1을,

조건의 값이 거짓(false) 일 경우, 표현식 2를 반환합니다. 

기본 문법은 아래와 같습니다.

 

if(조건식, 표현식1, 표현식2);

 

SASS 'if(삼항 연산자)' 문법 코드 입니다. 
//HTML
<div class="section-v1"></div>
<div class="section-v2"></div> 


//SCSS

//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    background-color: if($section-v1 > 700, coral, orange)
}

.section-v2 {
    width: $section-v2;
    background-color: if($section-v2 > 700, coral, orange)
}

 

CSS 'if(삼항 연산자)' 컴파일 결과 코드 입니다. 
.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

 

 

 

 

 

@if(조건문)

 

@if 지시어는 자바스크립트의 if문과 비슷합니다.

같이 사용할 수 있는 지시어는 @else, @else if 가 있습니다.

@else 지시어를 붙여 거짓(false)을 반환할 수 있고, @else if 지시어를 붙여 다중 if(조건)문 실행도 가능합니다.

기본 문법은 아래와 같습니다.

 

//기본 @if 지시문
@if(조건식) {
	//조건이 참일 때 표현식
}

//@if @else문
@if(조건식) {
	//조건이 참일 때 표현식
} @else {
	//조건이 거짓일 때 표현식
}


//다중 @if문
@if(조건식1) {
	//조건식1이 참일 때 표현식
} @else if(조건식2) {
	//조건식2가 참일 때 표현식
} @else {
	//조건식이 모두 거짓일 때 표현식
}

 

SASS '@if @esle' 문법 코드 입니다. 
//HTML
<div class="section-v1"></div>
<div class="section-v2"></div>

//SCSS

//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    @if($section-v1 >= 700) {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v2 {
    width: $section-v2;
    @if($section-v2 >= 700) {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

 

CSS '@if @else' 컴파일 결과 코드 입니다. 
.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

 

 

@if(조건문) 문법 1

조건식에 (  ) 생략하여 작성이 가능합니다.

기본 문법은 아래와 같습니다.

 

.section-v1 {
    width: $section-v1;
    @if $section-v1 >= 700 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

 

 

@if(조건문) 문법 2

조건식에 논리 연산자 and, or, not을 사용할 수 있습니다.

 

SASS '논리 연산자 and' 문법 코드 입니다. 
//HTML
<div class="section-v1"></div>
<div class="section-v2"></div>


//SCSS
//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    @if $section-v1 >= 0 and $section-v1 <= 1000 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v2 {
    width: $section-v2;
    @if $section-v2 >= 0 and $section-v2 <= 300 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

 

CSS '논리 연산자 and' 컴파일 결과 코드 입니다. 
.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

 

 

 

 

 

@for(반복문)

 

@for 는 클래스 스타일 또는 값을 일정하게 변화하면서 일정 횟수 반복하여 사용할 수 있는 문법입니다. 

자바스크립트의 for(반복문) 와 비슷합니다.

@for 는 through 를 사용하는 형식과 to 를 사용하는 형식으로 나누어집니다.

두 형식은 종료 조건의 해석이 다른 결과를 반환합니다. 

기본 문법은 아래와 같습니다.

 

// through - 시작부터 종료조건까지 반복
@for $변수 from 시작 through 종료 {
	// 반복내용
};

// to - 시작부터 종료조건 직전까지 반복
@for $변수 from 시작 to 종료 {
	//반복내용
};

 

 

through

from(시작)부터 through(종료) 조건까지 반복해야 할 경우 사용합니다.

변수는 관례상 $i 를 사용하도록 하겠습니다.

 

 

to

from(시작)부터 to(종료) 조건 직전까지 반복해야 할 경우 사용합니다.

변수는 관례상 $i 를 사용하도록 하겠습니다.

through와 to의 예제는 아래와 같습니다.

 

SASS 'through , to' 문법 코드 입니다. 
//1~3까지 반복
@for $i from 1 through 3 {
    .through:nth-child(3n + #{$i}) {
        width: 50px * $i
    }
}

//1~2까지 반복
@for $i from 1 to 3 {
    .to:nth-child(3n + #{$i}) {
        width: 50px * $i
    }
}

 

CSS 'through, to' 컴파일 결과 코드 입니다. 
.through:nth-child(3n + 1) {
  width: 50px;
}

.through:nth-child(3n + 2) {
  width: 100px;
}

.through:nth-child(3n + 3) {
  width: 150px;
}

.to:nth-child(3n + 1) {
  width: 50px;
}

.to:nth-child(3n + 2) {
  width: 100px;
}

 

 

 

 

 

마치며...

 

이전 Sass 변수 포스팅 마무리에 이야기했던 @if(조건문)와 @for(반복문)에 대하여 포스팅하였습니다.

자바스크립트 if문과 for문을 알고 계신 웹퍼블리셔 분이라면 이번 포스팅은 쉽게 이해하고 넘어가셨을 것입니다.

그러나 자바스크립트를 잘 모르시더라도 이해하기 쉽게 포스팅하려고 상세히 작성하였습니다.

SassScript 중 @if(조건문)와 @for(반복문) 내용이 Sass 공부를 하시는데 조금이나마 도움이 되어,

실무에서 웹퍼블리싱을 하실 때 편리하게 사용하실 수 있었으면 좋겠습니다.

다음 포스팅은 SassScript 중 마지막으로 @each과 @while에 대하여 알아보겠습니다.

감사합니다.

 

 

반응형

'Utility Knowhow' 카테고리의 다른 글

[SassㆍSCSS] SASS 문법 6편 - @mixin, @extend, @import  (0) 2021.11.10
[SassㆍSCSS] SASS 문법 5편 - @each, @while  (0) 2021.11.08
[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default  (0) 2021.11.01
[SassㆍSCSS] SASS 문법 2편 - 주석, 연산자  (0) 2021.10.28
[SassㆍSCSS] SASS 문법 1편 - 중첩 규칙과 선택자  (0) 2021.10.27
반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 변수에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

변수( Variables)

 

SassScript 문법에서 변수 설정은 변수 이름 앞에 항상 $ 기호를 넣어 시작합니다. 

반복되는 목적의 속성 값을 하나의 변수에 관리하여 여러 곳에 값을 할당하여 줄 수 있습니다. 

변수에서 사용 가능한 값은 문자열, 숫자, 색상,  불리언(true, false), 리스트(Array), null 입니다. 

변수를 정의하는 문법은 $변수명 : 값; 의 문법 형태를 가지고 있습니다.

 

SASS '변수' 문법 코드 입니다. 
$url-sprite: '../img/';
$color-red: #ff0000;

 

 

 

 

 

변수의 유효 범위( Variables Scope)

 

자바스크립트에서도 그렇듯이 SassScript 변수도 범위를 가지며, 전역 변수와 지역 변수 두 개로 나누어집니다.

그리고 변수에 변수를 할당, !default(변수값 초기화 설정), #{  }(문자 보간)을 이용하여 코드 어디서든 변수를 쓸 수 있습니다.

 

 

전역 변수

문서의 최상위에서 바로 작성한 변수를 전역 변수라고 부릅니다.

어떠한 규칙에도 포함되지 않으며, 문서 어디서나 사용 가능합니다. 

 

SASS '전역 변수' 문법 코드 입니다. 
$url-sprite: '../img/'; //전역 변수
$color-red: #ff0000; //전역 변수
$width: 50%; //전역 변수

div {
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

 

CSS '전역 변수' 컴파일 결과 코드 입니다. 
div {
  background: url("../img/sp_icon.png") no-repeat 0 0;
  color: #ff0000;
}

p {
  width: 50%;
}

 

 

지역 변수

문서의 최상위가 아닌 class 또는 id가 선언된 블록 코드 {  } 내에서만 유효 범위를 가집니다.

지역 변수는 규칙의 중첩 수준에 따라 사용할 수 있는 지역의 범위가 한정됩니다.

지역 변수는 정의한 블록의 상위 부모 블록에서 사용할 수 없습니다.

그러나 지역 변수에 !global 플래그를 사용하면 전역 변수로 사용할 수 있습니다. 

 

SASS '지역 변수, !global' 문법 코드 입니다. 
div {
    $url-sprite: '../img/'; //지역 변수
    $color-red: #ff0000; //지역 변수
    $width: 50% !global; // !global 전역 변수
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

 

CSS '지역 변수, !global' 컴파일 결과 코드 입니다. 
div {
  background: url("../img/sp_icon.png") no-repeat 0 0;
  color: #ff0000;
}

p {
  width: 50%;
}

 

 

변수 재 할당

변수에 변수를 할당해줄 수 있습니다.

 

SASS '변수 재 할당' 문법 코드 입니다. 
$width: 100%;
$box-width: $width;

.box-width {
    width: $box-width;
}

 

CSS '변수 재 할당' 컴파일 결과 코드 입니다. 
.box-width {
  width: 100%;
}

 

!default (변수값 초기화 설정)

!default 플래그를 사용하여 할당되지 않은 변수의 초기값을 설정할 수 있습니다.

할당되어 있는 변수의 기존 할당 값을 초기값으로 사용합니다.

 

SASS '변수값 초기화 설정' 문법 코드 입니다. 
$color-base: pink; 

.box {
    $color-base: orange !default;
    color: $color-base;
}

 

CSS '변수값 초기화 설정' 컴파일 결과 코드 입니다. 
.box {
  color: pink;
}

 

 

#{  } (변수 문자 보간)

#{  } 이용하여 어디서든 변수값을 문자열로 넣을 수 있습니다.

 

SASS '변수 문자 보간' 문법 코드 입니다. 
$line-left: left;
$value25: 25;
$value77: 77;

.box-string_v1 {
    border-#{$line-left}: 1px solid #333;   //문자 보간
}

// 숫자값인 변수를 + 연결하면 연산되어 102 값이 나옵니다.
.box-variables {
    width: $value25 + $value77 + px; 
}

// 문자 보간으로 변수를 + 연결하면 문자값인 2577 값이 나옵니다.
.box-string_v2 {
    width: #{$value25} + #{$value77} + px;
}

 

CSS '변수 문자 보간' 컴파일 결과 코드 입니다. 
.box-string_v1 {
  border-left: 1px solid #333;
}

.box-variables {
  width: 102px;
}

.box-string_v2 {
  width: 2577px;
}

 

 

 

 

 

마치며...

 

Sass에서 변수는 반복되는 CSS 코드를 하나의 변수값으로 여러 곳에 할당함으로써 코드 재활용성 측면에서 보았을 때 좋습니다.

믹스인을 사용할 때도 매개변수와 인수를 이용하면 컴포넌트 코드의 확장성 측면에서도 편리하게 사용할 수 있습니다.

그렇기에 이번 포스팅은 SassScript 중 변수라는 주제 하나로 다루어 보았습니다.

그만큼 중요하다고 생각됩니다.

다음 포스팅은 SassScript 조건문과 반복문에 대하여 알아보겠습니다.

스크립트를 알고 계신 분들은 쉽게 이해하시겠지만, 모르시는 입문자 분들을 위하여 쉽게 설명하고자 노력하였습니다.

감사합니다.

 

 

반응형

'Utility Knowhow' 카테고리의 다른 글

[SassㆍSCSS] SASS 문법 5편 - @each, @while  (0) 2021.11.08
[SassㆍSCSS] SASS 문법 4편 - 조건문(@if), 반복문(@for)  (0) 2021.11.04
[SassㆍSCSS] SASS 문법 2편 - 주석, 연산자  (0) 2021.10.28
[SassㆍSCSS] SASS 문법 1편 - 중첩 규칙과 선택자  (0) 2021.10.27
[SassㆍSCSS] 장ㆍ단점 소개, 설치방법 및 컴파일 명령어  (0) 2021.10.25

+ Recent posts

티스토리툴바