💅🏻 Sass란?

Sass는 특정한 형태의 스타일시트를 css스타일로 변경해주는 변환 엔진 컴파일러이며 CSS 전처리기의 하나이다. 개발은 Sass를 기반으로 한 후, CSS로 export하는 과정을 거친다.

• 브라우저가 Sass파일을 직접 읽지 못하기 때문에 CSS로 컴파일해야 한다.

Sass나 SCSS 쓰는 이유

• 프로젝트가 완성되어 갈수록 css가 점점 복잡해지고 유지 보수가 어려워지고 있다. css 코드 내에서도 반복적인 코드가 존재한다. 어떻게 하면 자동화할 수 있을까 이런 고민에서 출발을 하게 된거다.
• Sass안에는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들이 있어 시간 절약할 수가 있다.
• 코드 재사용이 가능하다.

Sass 기술방식

Sass

$base-font: 20px 
p
  font-size: $base-font
  line-height: 1.5

Sass는 세미클론과 중괄호가 없다.

🎨 SCSS

$base-font: 20px; 
p {
  font-size: $base-font;
  line-height: 1.5;
}

SCSS는 세미클론과 중괄호가 있다. SCSS는 CSS와 동일하게 중괄호 사용하는 방식이기 때문에 SCSS를 사용한다.

파일 분리

각 프레임별(_header.scss, _main.css, _mixin.scss, _variables.scss)로 분리한다. style.scss에 분리했던 파일들을 @import한다.

• 스타일별로 기능별로 분리하여 사용할 수 있고 코드를 관리하기 편해진다.

파일명 앞에 _(언더바)를 붙인 이유

Sass에게 _(언더바)붙인 파일이 main파일의 일부분임을 알려줘서 _(언더바)붙인 파일들은 CSS파일로 컴파일되지 않고 내부에서 @import형태로 작동하게 된다.

Nesting

<nav>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
        </ul>
 </nav>

nav{
    background-color: lightcoral;
    padding: 10px;
    height: 50px;;
    ul{
        display: flex;
        justify-content: flex-end;
        list-style: none;
        li{
            color: white;
            margin-right: 10px;
        }
    }
}

Nesting(중첩)을 사용하면 HTML의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있다. CSS코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리해진다.

중첩을 하는 이유

// CSS 
// info-list에 있는 자식과 자손에게 스타일을 적용하려고 할 때 마다 부모 선택자를 적어준다.  
info-list div {
  display: flex;
  font-size: 14px;
  color: #4f4f4f;
}

info-list div dt {
  font-weight: 700;
  margin-right: 7px;
}

// SCSS
// 중첩을 사용하여 부모선택자를 한번만 사용한다.
// lifo-list div 안에 dt가 들어있음을 한 눈에 알 수 있다.
info-list {
  div {
    display: flex;
    font-size: 14px;
    color: #4f4f4f;
    dt {
      font-weight: 700;
      margin-right: 7px;
    }
  }
}

기존 CSS는 부모에게 상속된 자식 요소에 스타일을 적용하려고 할 때마다 최상위 선택자를 계속 반복해서 선언해야 된다. 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있게 되어 코드 반복을 줄이게 된다.

❗ 지나친 중첩된 코드는 삼가해야한다. 깊이 중첩되면 코드를 보는 게 불편하고 컴파일 했을 경우 불필요한 선택자를 사용하게 된다.

Nesting 속성

// SCSS
.backgroud-img{
    width: 100%;
    height: auto;
    background: {
        image: url("/example/cat.png");
        position: center;
        repeat: no-repeat;
    };
}

// CSS
.backgroud-img {
  width: 100%;
  height: auto;
  background-image: url("/example/cat.png");
  background-position: center;
  background-repeat: no-repeat;
}

중첩은 선택자뿐만 아니라 스타일 속성들도 가능하다. 속성을 중첩 할 때는 :을 사용한다. SCSS는 속성이 중첩되었음을 인지하고 css 속성들로 변환한다.

Ampersand

상위 부모선택자를 선택할 경우

// SCSS
.box{
    width: 300px;
    height: 300px;
    background-color: lightcoral;
    transition: all 1s;
    &:hover{
        background-color: wheat;
    }
}

// CSS
.box {
  width: 300px;
  height: 300px;
  background-color: lightcoral;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.box:hover {
  background-color: wheat;
}

공통 클래스명을 가진 선택자들을 중첩시킬 경우

//Scss
.box {
  &-yellow {
    background: #ffc92c;
  }
  &-red {
    background: #ff4949;
  }
  &-green {
    background: #0066ff;
  }
}

.box-yellow {
  background: #ffc92c;
}
.box-red {
  background: #ff4949;
}
.box-green {
  background: #0066ff;
}

자신의 부모 선택자를 참조하지만 중첩이 깊어지면 최상위 부모 선택자로부터 참조되는 경우

//Scss
.nav {
  height: 60px;
  font-size: 18px;
  .nav-list {
    background: #3e68ff;
    span {
      padding: 10px 13px;
      a {
        color: white;
        .one {
          & .two {
            color: skyblue;
          }
        }
      }
    }
  }
}

// CSS
.nav {
  height: 60px;
  font-size: 18px;
}
.nav .nav-list {
  background: #3e68ff;
}
.nav .nav-list span {
  padding: 10px 13px;
}
.nav .nav-list span a {
  color: white;
}
.nav .nav-list span a .one .two {
  color: skyblue;
} 

@at-root

// SCSS
.one{
    color: ff4949;
    .two{
        color: ffc92c;
        .three{
            color: 0066ff;
            @at-root p{
                color: lightcoral;
            }
        }
    }
}

// CSS
.one {
  color: ff4949;
}

.one .two {
  color: ffc92c;
}

.one .two .three {
  color: 0066ff;
}

p {
  color: lightcoral;
}

@at-root 키워드를 사용하면 중첩에서 벗어날 수 있다. 중첩에서 벗어나고 싶은 선택자 앞에 @at-root 를 작성한다.

💅🏻 변수

변수를 선언한다는 것은 값을 일일이 고치지 않아도 된다는 의미이다. 유지보수를 매우 쉽게 만들어준다.

❗ 무분별하게 CSS를 작성해서는 안된다. 충돌할 수도 있기 때문이다.

변수를 사용하는 기준

• 값이 두번 이상 반복된다면 미리 변수를 만든다.
• 기존의 값을 다른 값으로 변경할 경우, 변수의 값만 변경하면 되기 때문에 값이 수정될 가능성이 있다면 변수 생성을 고려해본다.

변수 생성하기

$bgColor: #ff4949;

h1{
    color: $bgColor; 
}

변수를 만들 때는 $ 기호를 사용해서 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 지정할 수 있다.

변수 type

• numbers : 1, .82, 20px, 2em 등
• strings : "./images/a.png", bold, left, uppercase 등
• colors : green, #FFF, rgba(255,0,0,.5) 등
• booleans : true, false
• null
• lists, maps

Lists

// SCSS
// 3번은 right이다.
$valid-sides: left, center, right;

p{
	text-align : nth($valid-sides, 3);
}

리스트는 순서가 있는 값으로, 값마다 인덱스를 가지고 있다. lists를 만들려면 lists의 요소들을 ,(쉼표) 나 공백 또는 일관성이 있는 /로 구분하여 생성할 수 있다. 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식합니다. 빈 lists를 만들 때나 lists에 들어있는 값이 하나 인 경우 [ ] 나 ( ) 를 사용하여 생성한다.

❗ lists에 들어있는 값의 index는 1부터 시작한다.

Lists 관련 내장함수

• append(list,value,[separator]) : lists의 값을 추가하는 함수
• index(list,value) : lists의 값에 대한 인덱스를 리턴하는 함수
• nth(list, n) : lists의 인덱스에 해당하는 값을 리턴하는 함수

Maps

// SCSS
// key가 $font-sizes, value가 myh1을 호출을 한다.
// font-sizes는 45px이다.
$font-sizes: ("myh1": 45px, "myh2": 19px, "myp": 16px);

h1{
    color: $bgColor; 
    font-size: map-get($font-sizes, "myh1");
}

maps는 ( ) 괄호 안에 키:값의 형태로 저장하여 사용한다. 키와 값을 정의할 때, 키는 고유해야 하지만 키에 해당하는 값은 중복이 가능하다. 변수를 각각 선언하는 대신, 관련 있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다.

Maps 관련 내장함수

• map-get(map,key) : 키에 해당하는 값을 값을 리턴하는 함수
• map-keys(map) : map에 들어있는 키(key) 전부를 리턴하는 함수
• map-values(map) : map에 들어있는 값(value) 전부를 리턴하는 함수

❗ lists와 maps 뿐만 아니라 string이나 number같은 타입들도 function을 가지고 있다.

변수의 Scope

지역변수

h1{
    $spanColor: #ffc92c; // 지역변수
    color: $bgColor; 
    font-size: map-get($font-sizes, "myh1");
    span {
        color: $spanColor;
    }
}

지역변수는 선언한 자기자신을 감싸고 있는 중괄호 { } 안에서 사용된다. 하위 단계에 있는 중괄호에서도 사용할 수 있다.

전역변수

$bgColor: #ff4949;
$font-h1 : 28px;
$valid-sides: left, center, right;
$font-sizes: ("myh1": 45px, "myh2": 19px, "myp": 16px);

전역변수는 가장 윗부분에 정의하면 파일 내에 어디서든지 사용가능하다.

$mycolor: #ffffff !global;

!global 사용하여 local 변수를 global 변수로 만들어 사용할수있다.

❗ global 변수는 어느 언어든 지향하는 추세이다.

Operator

비교연산자 (숫자형)

// SCSS
@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

• a < b : a의 값이 b보다 값이 작은지 확인한다.
• a <= b : a가 b보다 값이 작거나 같은지 확인한다.
• a > b : a의 값이 b보다 값이 큰지 확인한다.
• a >= b : a가 b보다 값이 크거나 같은지 확인한다.

❗ ERROR : 비교하거나 연산하는 값의 단위가 일치하지 않으면 에러가 발생한다. 그러나 단위가 없는 숫자와 일반숫자와 비교하는 경우에는 에러가 발생하지 않는다.

==, != (모든 타입)

// SCSS
// 숫자
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

// 문자
@debug "Poppins" == Poppins; // true
@debug "Open Sans" != "Roboto"; // true

// 색상
@debug rgba(53, 187, 169, 1) == #35bba9; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

숫자, 문자, 색상 리스트 비교할 수 있다.

• a == b : a가 b와 값이 같은지 확인한다.
• a != b : a가 b와 값이 다른지 확인한다.

산술연산자 (숫자나 색)

// SCSS
@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in (1in == 96px)

• a + b : a 와 b의 값을 더한다.
• a - b : a 에서 b의 값을 뺀다.
• a * b : a와 b의 값을 곱한다.
• a / b : a를 b로 나눈다.
• a % b : a 에서 b를 나눈 나머지 값을 구한다.

// SCSS
$font-sizes: ("myh1": 45px, "myh2": 19px, "myp": 16px);

// 16px * 2 = 32px이다.
h1{
    font-size: map-get($font-sizes, "myp") * 2;
}

❗ 나누기를 할 때 사용하는 슬래시/는 리스트에서도 사용하기 때문에 혼동을 줄 수 있다. 그래서 괄호를 사용하거나 변수와 함께 사용하거나 덧셈을 할 때 함께 써서 SCSS에게 / 를 나누기 연산자임을 알려줘야 합니다

String의 a + b

// SCSS
@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

+ 연산자에서 a와 b가 모두 문자열이라면 문자열 a,b 를 합쳐서 새로운 문자열로 반환한다. 만약 a나 b중 하나만 문자열이라 하더라도 문자열이 아닌 값은 문자열로 변환하여 두 값을 합친 문자열로 반환한다.

논리연산자 (boolean 타입)

// SCSS
@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

• not : true이면 false를, false이면 true를 반환한다
• and : 두개 다 true일때 true를 반환하고, 하나라도 false면 false를 반환한다.
• or : 두개 다 false면 false를 반환하고, 하나라도 true라면 true를 반환한다.

💅🏻 Mixin

Mixin이란

Mixin은 코드를 재사용하기 위해 만들어진 기능이다. 선택자들 사이에서 반복되고 있는 코드들은 mixin을 사용하여 코드 반복을 줄인다. 중복되는 코드는 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include하면 된다.

Mixin 사용하기

// SCSS
@mixin 이름(매개변수) //생성
@include 이름(인수)  //사용

// SCSS
@mixin flexCenter{
	display: flex;
	justify-content : center;
	align-items : center;
        list-style: none;
}

.one{
	@include flexCenter; 
        background-color: #ff4949;
}

.two{
	@include flexCenter; 
        background-color: #ffc92c;
}

• 앞에 @Mixin을 쓰고 이름을 정해준 후 중괄호 { } 안에 중복되는 코드를 넣어준다.
• @include를 사용하여 스타일 하고자 하는 요소에 포함 시키면 된다.
• mixin은 파일을 만들어서 import하여 사용하거나 mixin을 사용할 파일 내에서 선언 후 사용할 수 있다. 여러 개의 mixin을 만들어 사용한다면 _mixins.scss 파일을 만들어서 관리한다.

Arguments

Arguments

// SCSS
@mixin flexCenter{
	display: flex;
	justify-content : center;
	align-items : center;
        list-style: none;
}

.one{
	@include flexCenter;
        background-color: #ff4949;
	margin-right: 10px;
    	li{
    	    margin-right: 10px;
   	 }

}

.two{
	@include flexCenter;
    	background-color: #ffc92c;
    	li{
    	    margin-right: 20px;
   	 }
}

// SCSS
@mixin flexCenterTwo($size){
	display: flex;
	justify-content : center;
	align-items : center;
    	list-style: none;
    	li{
            margin-right: $size;
   	 }
}

.one{
   	@include flexCenterTwo(10px);
   	background-color: #ff4949;  
}

.two{
        @include flexCenterTwo(20px);
        background-color: #ffc92c;
}

mixin 이름 뒤에 인수를 넣어서 사용할 수 있고 매개변수와 인수의 개수가 같아야 한다. mixin에 매개변수를 사용하면 능동적으로 스타일을 적용할 수 있다.

기본값 설정

// SCSS
@mixin flexCenterTwo($size: 30px){
	display: flex;
	justify-content : center;
	align-items : center;
        list-style: none;
        li{
            margin-right: $size;
        }
}

.one{
    	@include flexCenterTwo(10px);
    	background-color: #ff4949;
}

.two{
    	@include flexCenterTwo(20px);
    	background-color: #ffc92c;
}

.three{
    	@include flexCenterTwo;
    	background-color: #0066ff;
}

기본값을 설정하여 매개변수에 값이 들어오지 않을 때 기본으로 설정한 값을 사용할 수 있다.

Content

// SCSS
@mixin flexCenterTwo($size: 30px){
	display: flex;
	justify-content : center;
	align-items : center;
        list-style: none;
        li{
            margin-right: $size;
        }
        @content
}

.one{
    	@include flexCenterTwo(10px);
    	background-color: #ff4949;
}

.two{
    	@include flexCenterTwo(20px);
    	background-color: #ffc92c;
}

.three{
    	@include flexCenterTwo{
        	color: white;
            }
    	background-color: #0066ff;
}

@content를 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있다.

💅🏻 Extend

Extend

extend는 연관 있는 요소들끼리 스타일 코드가 중복된 경우에 사용된다. 이미 스타일이 작성된 선택자의 클래스를 extend하거나 %를 사용해서 따로 스타일을 정의한 후 extend하여 원하는 선택자에게 스타일을 적용해 줄 수 있다.

• mixin : 관계 없는 선택자에서 조금 다른 스타일을 적용할 때 사용한다.
• extend : 관계 있는 선택자들의 동일한 소스코드 적용할 때 사용한다.

// SCSS
.profile-user {
    background-image: url("./user.png");
    background-size: cover;
    background-position : 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}

.comment-user {
    @extend .profile-user;
}

.profile-user 클래스를 가진 로그인 프로필 user 이미지 박스가 .comment-user가 댓글을 작성할 때 user임을 나타내주는 이미지 박스와 중복되는 경우입니다. .profile-user 코드 전체를 .comment-user 에게 extend 해줍니다.

%placeholder

// SCSS
%base-button {
    width: 133px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 10px;
}

.follow-button {
    @extend %base-button;
    background-color: #ffffff;
    color: #0066ff;
    border: 3px solid #0066ff;
}

.message-button {
    @extend %base-button;
    background-color: #0066ff;
    color: white;
}

%로 선택자를 만든다. @extend를 사용하기 앞서 %placeholder 스타일 블럭을 불러온다. %는 CSS 컴파일되지 않는다.

❗ Extend를 사용할 때, 클래스보다 %를 사용하기를 권장한다.

💅🏻 조건문과 반복문, 함수

조건문

@if

@if에 괄호 없이 true나 false를 반환할 수 있는 조건문을 작성한다. (조건을 작성할 때 괄호를 사용할 수 있지만 일반적으로 괄호는 생략한다.) 조건에는 논리연산자 and, or, not을 사용하고 if문의 조건이 true일 때만 { } 괄호 안에 있는 코드가 실행한다.

// SCSS
@mixin avatar($size, $circle: false) {
    width: $size;
    height: $size;

    @if $circle {
        border-radius: $size / 2;
    }
}

.square-av {
    @include avatar(100px, $circle: false);
}
.circle-av {
    @include avatar(100px, $circle: true);
}

// CSS
.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

avatar라는 이름이 있다. $size와 $circle을 매개변수를 받는다. $circle값이 기본으로 false이다. width와 height는 입력된 사이즈값으로 초기화를 한다.
만약에 $circle이라고 한다면 border-radius가 사이즈 나누기 2를 해서 동그랗게 만들어준다. @include에서 avatar가 100px, $circle가 false일때와 $circle가 true일 때 위와 같이 CSS로 나타난다.

@else

@if (조건) {
	// 조건이 참일 때 실행될 구문
} @else{
	// if문의 조건이 거짓일 때 실행될 구문
}

if문의 조건이 참일 때와 거짓일 떄 실행될 구문이 다르다.

// SCSS
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
@if $light-theme {
    background-color: $light-background;
    color: $light-text;
} @else {
    background-color: $dark-background;
    color: $dark-text;
}
}

.banner {
@include theme-colors($light-theme: true);
body.dark & {
    @include theme-colors($light-theme: false);
    }
}

// CSS
// ture이면 밝은 색을, false면 어두운 색을 스타일한다.
.banner {
  background-color: #f2ece4;
  color: #036;
}

body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

theme-colors가 light-theme마다 기본값이 true이다. 만약에 true가 들어온다라고 하면 위의 구문을 실행이 되고 false가 들어오면 아래의 구문을 실행하게 된다. banner에 보면 light-theme마다 true이다. body의 dark는 light-theme마다 false이다.

❗ 여러가지 조건문을 작성할 수 있다.

@else if

if (조건){
	// 조건이 참일 때 실행될 구문
} @else if(조건){
	// else if 조건이 참일 때 실행될 구문
} @else{
	// 위에 모든 조건이 거짓일 때 실행될 구문
}

// SCSS
//조건에 해당하는 방향에 맞춰서 border-bottom 컬러를 스타일한다.
@mixin triangle($size, $color, $direction) {
    height: 0;
    width: 0;

    border-color: transparent;
    border-style: solid;
    border-width: ($size/2);

@if $direction == up {
    border-bottom-color: $color;
    } @else if $direction == right {
    border-left-color: $color;
    } @else if $direction == down {
    border-top-color: $color;
    } @else if $direction == left {
    border-right-color: $color;
    } @else {
    @error "Unknown direction #{$direction}.";
    }
}

.next {
    @include triangle(5px, black, right);
}

/// CSS
.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

$triangle에 $size, $color, $direction의 기본값이 없다. $direction은 up,right, down, left이다. border-bottom-color, border-left-color, border-top-color border-right-color의 color를 바꿔주는 코드이다. else에 @error가 들어 있다. triangle에 5px, 'black', 'right'를 위로 올라가서 $size, $color, $'direction` 매개변수로 전달한다.

반복문

@for

for ($변수) from (시작) through(끝){
	// 반복할 내용
}

정의한 횟수만큼 코드 실행을 반복한다. @for문에 from(시작 : 이상) - through(끝 : 이하)를 사용하여 어디서 시작해서 어디서 끝날 지를 알려준다.
nth- 선택자를 사용하는 경우 유용하게 사용할 수 있다.

/// SCSS
// for문을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다.
@for $i from 1 through 5 {
  .photo-box:nth-child(#{$i}) {
    background-image: url("../assets/phoster#{$i}.png");
  }
} 

// CSS
.photo-box:nth-child(1) {
  background-image: url("../assets/phoster1.png");
}

.photo-box:nth-child(2) {
  background-image: url("../assets/phoster2.png");
}

.photo-box:nth-child(3) {
  background-image: url("../assets/phoster3.png");
}

.photo-box:nth-child(4) {
  background-image: url("../assets/phoster4.png");
}

.photo-box:nth-child(5) {
  background-image: url("../assets/phoster5.png");
}

범위 1이상 5이하이고 for문에서 1부터 5까지 반복하라는 의미이다. 총 5번 반복되면서 코드가 실행된다. 만약 from 3 throught 8 이라면 3에서 8까지 6번 실행된다.

@each

@each ($변수) in (Lists 나 Maps){ 
	// 반복할 내용
}

each문은 Lists나 Maps의 각각의 요소마다 코드를 실행해서 스타일을 적용할 수 있다.

// SCSS
// color-palette 리스트에 들어있는 색상을 each문을 사용하여 background에 색상값을 넣어준다.
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;

@each $color in $color-palette {
    $i: index($color-palette, $color);
    .color-circle:nth-child(#{$i}) {
    background: $color;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    }
}

// CSS
.color-circle:nth-child(1) {
  background: #dad5d2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(2) {
  background: #3a3532;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(3) {
  background: #375945;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(4) {
  background: #5b8767;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(5) {
  background: #a6c198;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(6) {
  background: #dbdfc8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

$color-palette가 Lists로 이차원으로 순환되고 있다. $color로 변수를 받고 있기 때문에 color안에서 쓸 수가 있다.

// SCSS
@each $color in $color-palette {
    .icon-#{$color} {
    background: $color;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    }
}

// CSS
icon-#375945 {
  background: #375945;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.icon-#5b8767 {
  background: #5b8767;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.icon-#a6c198 {
  background: #a6c198;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.icon-#dbdfc8 {
  background: #dbdfc8;
  width: 20px;
  height: 20px;
  border-radius: 50%;

@while

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

특정 조건에 충족될 때까지 코드를 무한 반복하고 조건을 만날 때 while문을 빠져나오게 된다. 참고로 while문은 빠져나오는 조건을 만드는 경우가 거의 없어서 잘 사용하지 않는다.

// SCSS
// value값이 base보다 작을 때까지 일정한 값으로 계속 나눠준다.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: ($value/$ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
.sup {
  font-size: scale-below(20px, 16px);
}

// CSS
.sup {
  font-size: 12.36094px;
}

$value보다 작아질 때까지 계속 무한비 반복하는 거다. $value에 $ratio를 나눠준다. scale-below라고 선언을 하였다. 20px과 16px에 들어가 있으면 20px은 16px보다 크기 때문에 $value는 1.618이 나온다. $value이 16px보다 작아지면 while문에서 나오게 된다. 그러고 나서 $value은 return해준다. font-size는 return된 $value가 나온다.

function

function

@function 함수이름($매개변수) {
	// 실행 코드
	@return 값
}

@function 키워드를 사용하여 함수를 생성하고 함수이름( ) 형태로 함수를 호출하고 실행한다. 함수 안에서는 @return 이용해 값을 반환한다. 함수는 Mixin과 비슷하지만 mixin은 스타일 코드를 반환하고 function은 @return 키워드를 사용해서 값 자체를 반환한다는 차이가 있다.

// SCSS
// 거듭제곱을 구하는 함수
@function pow($base, $exponent) { 
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

// CSS
.sidebar {
  float: left;
  margin-left: 64px;
}

$base에 4, $exponent에 3이 들어간다. result를 반환을 해준다. 의미 없는 변수를 선언할 때 $_로 쓴다. 1부터 exponent가 3이니까 1부터 3까지 $_ 안에 들어 가 있다. $result가 계속 변경이 된다.

내장함수

색상 함수

• lighten(color, amount) : 기존 색상의 밝기를 높인다.( 0%-100% 사이의 값 )
• darken(color, amount) : 기존 색상의 밝기를 낮춘다.( 0%-100% 사이의 값 )
• mix(color1, color2, weight) : 2개의 색상을 섞어서 새로운 색상을 만든다.

숫자 함수

• max(number, ..) : 괄호에 넣은 값 중에 가장 큰 수를 반환한다.
• min(number, ..) : 괄호에 넣은 값 중에 가장 작은 수를 반환한다.
• parcentage(number) : 퍼센트로 숫자를 바꿔준다.
• comparable(num1,num2) : 숫자1과 숫자2가 비교 가능한지 확인 후 true,false 값을 반환한다.

문자 함수

• srt-insert(string,insert,index) : 문자열에 원하는 위치(index)에 문자를 넣은 후(insert), 새로운 문자열을 반환한다.
• str-index(string,substring) : 문자열에서 해당 문자의 index 값을 반환한다.
• to-upper-case(string) : 문자열 전부를 대문자로 바꿔준다.
• to-lower-case(string) : 문자열 전부를 소문자로 바꿔준다.

확인 함수

• unit(number) : 숫자의 단위를 반환한다.
• unitless(number) : 단위를 가지고 있는지 판단하여 true,false 값을 반환한다.
• variable-exists(name) : 변수가 현재 범위에 존재하는지 판단하여 true,false 값을 반환한다. 이 함수의 인수는 $없이 사용한다.