1.SCSS 란?

• 스타일시트가 점점 커지고 복잡해 졌을때 유지관리를 쉽게 하기위해 스타일시트 확장언어이며 전처리기의 하나이다.
• 브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일과정을 거쳐야한다.

2.환경설정

2-1. VS의 Extension인 Live Sass Compiler 사용

3. 파일분리, Nesting

3-1. 파일분리

• 파일은 각프레임별 분리해서 관리하는게 좋음 ( _variables.scss, _header.scss ..등등 )
• scss는 _바가 없는 style.scss 만 컴파일 됨
• style.scss 컴파일되는 scss에 _(언더바)와 확장명을 제외하여 @import를 하여 사용한다

@import "main"
@import "mixin"
@import "header"
@import "variables"

• scss는 한줄주석을 사용 가능하나 컴파일된 css에는 보이지 않는다

/* 주석은 보임 */
// scss파일에서만 보임 컴파일 되면 안보임

3-2 중첩(Nesting)

• 중첩을 이용하면 최상위 선택자를 반복선언해야하는 점을 줄일 수 있다
• 하지만 지나친 중첩을 사용할경우 코드를 보는게 불편하고 컴파일 했을경우 불필요한 선택자를 사용하게 될수 있다
• 중첩은 background 속성에도 사용가능 하다

3-2-1. ampersand 앰퍼샌드

• &을 이용하여 after,hover등의 가상요소, 가상클래스, class나 id셀렉터등을 참조할수있다.
• &는 자신의 부모를 가르키지만 중첩이 겹치면 최상위 부모를 선택자로 참조한다

.box{
 &:focus{} // 가상선택자
 &:hover{}
 &:active{}
 &:first-child{}
 &:nth-child(2){}
 &:after{} //가상요소
 &:before{}
 & .title{}
 & #title{}

}

3-2-2. @at-root

• 중첩에서 벗어나고 싶을경우 선택자 앞에 @at-root를 삽입한다

div{
    @at-root p {}  //중첩에서 벗어남
   }

4 변수(Variable)

• css 전체에 거쳐 반복되는 값을 정의하여 편하게 스타일링 할 수 있다.
• 변수 타입은 numbers,strings, colors, booleans, lists, null이 있다.

4-1. lists

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

lists 관련 함수

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

예시)

//scss
$font-size: 10px 20px 30px; //폰트 사이즈 리스트
$text-align : center, left, right; 

div.content{
  p{
    font-size: nth($font-size,1);  // nth(변수명,인덱스)
    text-align: nth($text-align,1);
  }
}

/*css*/
div.content p {
  font-size: 10px;
  text-align: center;
}/*# sourceMappingURL=style.css.map */

4-2. Maps

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

map관련 내장함수

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

예시)

//scss
$font-sizes : ('h1':45px, 'h2':19px, "p":16px);

div.content{
  h2{
    font-size: map-get($font-sizes , h2 );
  }
}

/* css */
div.content h2 {
  font-size: 19px;
}

5. 변수 유효범위(Scope)

• 지역변수, 전역변수를 선언 할수있다.
• !global을 사용하여 local변수를 global변수로 수정할 수 있다. 하지만 사용을 지양한다.

$bgColor: #fff !global;

6. Operator

6-1. <,<=,>,>=

• 비교연산자 사용가능
• 비교연산시 값의 단위가 일치하지 않으면 에러가 발생, 그러나 단위가 없는 숫자와 일반숫자와 비교하는 경우 정상작동함.

//scss 공식문서
@debug 100px > 10s; //Eroor

@debug 100 > 50px;  //true
@debug 10px > 17; //true

6-2. ==,!= 모든타입

6-3. 산술연산자(숫자나 색)

• +,-,*,/,%
• scss에서 / 는 리스트에서도 사용하기 때문에 혼동을 줄수 있음 그래서 괄호를 사용하거나, 변수와 함꼐 사용하거나, 덧셈을 할 떄 함께써서 나누기 연산자임을 알려주는게 좋음
• 값의 단위가 동일하지 않을시 오류가 발생

@debug 100px + 10s; // error

6-4. String의 a+b

div{
&::after{ content:"head" + "er" }  // header
}

6-5. 논리연산자(불리언 타입)

• and,or,not

$width : 90px;

div{
  @if not ($width > 100px){  // not은 false -> true반환
    height:300px;
  }
}

complied to:

div {
  height: 300px;
}

7. Mixin

• 코드의 반복을 줄이고 재사용 하기 위해 있는 기능
• @mixin 으로 선언하고 @include로 불러옴

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

• @mixin을 쓰고 명을 적어준후 중괄호 {}안에 중복된 코 드를 넣어준다.
• @includeM를 사용하여 스타일 하고자 하는 요소를 포함 시키면 됩니다.
• mixin은 파일을 만들어서 import하여 사용하거나, mixin을 사용할 파일 내에서 선언후 사용할수 있다. 이때, 여러개의 mixin을 만들어 사용한다면, _mixin.scss 파일을 만들어서 관리합니다.

mixin 사용)

//scss
@mixin large-text{
  font:{
    size:22px;
    weight:bold;
    family:sans-serif;
  }
  color: orange;

  &::after{
    content:"!!";
  }
  span.icon{
    background:url('/imgage/icon.png');
  }
}


.title{
  @include large-text;
}

Compiled to

/*css*/
.title {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
.title::after {
  content: "!!";
}
.title span.icon {
  background: url("/imgage/icon.png");
}/*# sourceMappingURL=style.css.map */

• 반복하는 모든 코드를 하나의 mixin에 몰아 넣는건 바른 사용법이 아니다, 스타일별로 속성별 나누어 mixin을 만들어야 사용성을 높일수 있다.

7-1. 인수(Argument)

• mixin 이름 뒤에 인수를 넣어 사용할 수 있다.
• 매개변수와 인수의 개수가 같아야 한다.
• 인수는 매개변수값이 들어오지 않을시 기본값을 설정할 수 있다.

인수사용 예시)

//scss

@mixin image-style($ul,$size,$repeat,$positionX:50%, $positionY:50%){  // 
  background:{
    image:url($ul);
    size:$size;
    repeat:$repeat;
    position: $positionX, $positionY;
  }

}

.propile{
  @include image-style("./assets/user.png", cover, no-repeat, center, center );
}

compiled to

/*css*/
.propile {
  background-image: url("./assets/user.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center, center;
}

7-2. @Content

• mixin에 스타일 속성을 추가하여 전달하고 싶을때 사용한다.

  @content 사용예시)

//scss
@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

compiled to

/*css*/
.icon1::after {
  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

8. 확장(Extend)

• 연관 있는 요솤끼리 스타일 코드가 중복된 경우 사용한다.
• 이미 스타일이 작성된 클래스를 extend 하거나, %를 사용해서 따로 스타일을 정의한 후 extend하여 원하는 선택자에게 스타일을 적용해줄 수 있다.
• 예를들어 마이페이지 프로필과 로그인시 프로필이 스타일이 같을때 사용
• mixin은 관계없는 선택자에서 조금 다른 스타일 적용할때 사용
• extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용

8-2. extend 하는 2가지 방법

8-2-1. class이름 가져오기

• @extend에 클래스 명을 적으면 클래스에 있는 코드가 전체 extend 됩니다.

//scss
.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

compiled to

/*css*/
.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

• @extend는 사용을 권장하지 않으며, mixin으로 대체 하여 사용하는건 추천

8-2-2 %placeholder

• %로 선택자 만듭니다
• @extend를 사용하여 앞서 %placeholder 스타일 블럭을 불러오면 됩니다.
• %선택자는 css로 컴파일 되지 않습니다
• 사용예시로 모달팝업 스타일에 쓸수 있다.

//scss
%base-button{
  width:133px;
  height:44px;
  display: flex;
  justify-content:center;
  align-items: center;
}

.follow-button{
  @extend %base-button;
  background-color: #fff;
}

compiled to

/*css*/
.follow-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.follow-button {
  background-color: #fff;
}/*# sourceMappingURL=style.css.map */

9.함수(function)

• 자신의 함수를 정의하여 사용할 수 있다.
• mixins와는 유사하지만 반환되는 내용이 다르다.
• mixin은 지정한 스타일을 반환하는 반면, 함수는 보통 연산된 특정 값을 @return 지시어를 통해 반환한다.

//scss
$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns();  // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

complied to

/*css*/
.box_group {
  /* 총 너비 */
  width: 980px;
}
.box_group .box1 {
  /* 총 너비의 약 8.3% */
  width: 81.66667px;
}
.box_group .box2 {
  /* 총 너비의 약 66.7% */
  width: 653.33333px;
}
.box_group .box3 {
  /* 총 너비의 25% */
  width: 245px;
}

• 함수를 불러올때 내장함수랑 겹칠수 있기 때문에 접두어를 붙여주는게 좋다

10.조건과 반복문

10-1. if(함수)

//scss
//if(조건, 표현식1, 표현식2)
$div-width:500px;
.test2{
  width:if($div-width > 300px, $div-width, null);
}

complied to

/*css*/
.test2 {
  width: 500px;
}

10-2. @if(지시어)

• @if(조건){} @else{}

//scss
@if(조건1){
  /* 조건1이 참일떄 구문*/
} @else if (조건2){
  /*조건2가 참일때 구문*/
}@else{
  /*모든 조건이 거짓일때 실행구문*/
}

-조건에 ()는 생략이 가능하다

//scss 조건 생략문
$bg : true;
.test3{
  @if $bg{background: url(/img/style.png);}
}

$color: orange;
div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else if $color == banana {
    color: #FFFF00;
  } @else {
    color: #2A1B0A;
  }
}

complied to

/*css*/
.test3 {
  background: url(/img/style.png);
}

div {
  color: #FE9A2E;
}

• 논리 연산자 and, or, not 사용할수 있다.

//scss 
//and 사용
@function limiteSize($size){
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else{
    @return 800px;
  }
}

div {
  width:limiteSize(100px);
  height:limiteSize(300px);
}

complied to

/*css*/
div {
  width: 200px;
  height: 800px;
}

• sass 내장함수 unitrless()는 숫자에 단위가 있는지 여부 판단합니다.

//scss 
@mixin pCenter($w, $h, $p: absolute) {
  @if
    $p == absolute
    or $p == fixed
    // or not $p == relative
    // or not $p == static
  {
    width: if(unitless($w), #{$w}px, $w);  //단위 체크 px로 
    height: if(unitless($h), #{$h}px, $h);
    position: $p;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.box1 {
  @include pCenter(10px, 20px);
}
.box2 {
  @include pCenter(50, 50, fixed);
}
.box3 {
  @include pCenter(100, 200, relative);
}

complied to

/*css*/
.box1 {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.box2 {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

10-2. @for

• 반복문 @for through 를 사용하는 형식과 to를 사용하는 형식으로 나뉨

//scss

// 1부터 3번 반복(1,2,3)
@for $i from 1 through 3 {
  .through:nth-child(#{$i}){
    width: 20px * $i
  }
}

// 1부터 3 직전까지만 반복 (1,2)
@for $i from 1 to 3{
 .to:nth-child(#{$i}){
  width: 20px * $i
 }
}

complied to

/*css*/
.through:nth-child(1) { width: 20px; }
.through:nth-child(2) { width: 40px; }
.through:nth-child(3) { width: 60px; }

.to:nth-child(1) { width: 20px; }
.to:nth-child(2) { width: 40px; }

• :nth-child()에 유용하게 쓰이며, through 사용이 권장된다

10-3. @each

• @each는 List와 map 데이터를 반복할 때 사용합니다.
• for in 문과 유사

@each $변수 in 데이터 {
//반복 내용
}

-list 반복

//scss


$fruits:(apple, orange, banana, mango);

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

complied to

/*css*/

.fruits li.apple {
  background: url("/style/link_apple.png");
}
.fruits li.orange {
  background: url("/style/link_orange.png");
}
.fruits li.banana {
  background: url("/style/link_banana.png");
}
.fruits li.mango {
  background: url("/style/link_mango.png");
}

• 매번 반복마다 index값이 필요하다면 index() 내장 함수를 사용한다

.fruits{
  @each $fruit in $fruits {
    $i : index($fruits, $fruit);  //index($데이터, $변수명);
     li:nth-child(#{$i}) { // i = 1,2,3,4
      left:50px * $i;  // left = 50,100,150,200
    }
  }
}

• 동시에 여러개의 list데이터를 반복 처리할 수도 있습니다.
  단, 각 데이터의 length가 같아야 합니다.

//scss
$apple : (apple, korean);
$orange : (orange, china);
$banana : (banana, japan);

@each $fru, $country in $apple, $orange, $banana{
  .div_#{$fru} {
    background:url("/img/style_#{$country}.png");
  }
}
/*
css
.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}
*/

-Map 데이터를 반복할 경우 $key변수와 $value변수가 필요함

//scss 문법
@each $key, $value in 데이터{
//반복내용
}

$fru-data : (
  apple : korean,
  orange : china,
  banana : japan
);


@each $key-fru, $value-coun in $fru-data{  
  .div-#{$key-fru} {
    background:url("/img/style_#{$value-coun}.png");
  }
}
/* css
.div-apple {
  background: url("/img/style_korean.png");
}

.div-orange {
  background: url("/img/style_china.png");
}
.div-banana {
  background: url("/img/style_japan.png");
}
*/

10-4. @while

• @while은 조건이 false 가 될때 까지 내용을 반복한다.
• 잘못하면 무한루프에 빠질수 있기때문에 사용을 권장하지 않는다.

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

//scss
$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 2px * $i;
  }
  $i: $i - 2;
}
/*css
.item-6 { width: 12px; }
.item-4 { width: 8px; }
.item-2 { width: 4px; }
*/

11.내장 함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다.
모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다.

Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있습니다.

• []는 선택 가능한 인수(argument)입니다.
• Zero-based numbering을 사용하지 않습니다.

색상(RGB / HSL / Opacity) 함수

mix($color1, $color2) : 두 개의 색을 섞습니다.

lighten($color, $amount) : 더 밝은색을 만듭니다.

darken($color, $amount) : 더 어두운색을 만듭니다.

saturate($color, $amount) : 색상의 채도를 올립니다.

desaturate($color, $amount) : 색상의 채도를 낮춥니다.

grayscale($color) : 색상을 회색으로 변환합니다.

invert($color) : 색상을 반전시킵니다.

rgba($color, $alpha) : 색상의 투명도를 변경합니다.

opacify(color, $amount) / fade-in(color, $amount) : 색상을 더 불투명하게 만듭니다.

transparentize(color, $amount) / fade-out(color, $amount) : 색상을 더 투명하게 만듭니다.

문자(String) 함수

unquote($string) : 문자에서 따옴표를 제거합니다.

quote($string) : 문자에 따옴표를 추가합니다.

str-insert($string, $insert, $index) : 문자의 index번째에 특정 문자를 삽입합니다.

str-index($string, $substring) : 문자에서 특정 문자의 첫 index를 반환합니다.

str-slice(string, $start-at, [end-at]) : 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출합니다.

to-upper-case($string) : 문자를 대문자를 변환합니다.

to-lower-case($string) : 문자를 소문자로 변환합니다.

숫자(Number) 함수

percentage($number) : 숫자(단위 무시)를 백분율로 변환합니다.

round($number) : 정수로 반올림합니다.

ceil($number) : 정수로 올림합니다.

floor($number) : 정수로 내림(버림)합니다.

abs($number) : 숫자의 절대 값을 반환합니다.

min($numbers…) : 숫자 중 최소 값을 찾습니다.

max($numbers…) : 숫자 중 최대 값을 찾습니다.

random() : 0 부터 1 사이의 난수를 반환합니다.

List 함수

모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환합니다.
모든 List 내장 함수는 Map 데이터에서도 사용할 수 있습니다.

length($list) : List의 개수를 반환합니다.

nth($list, $n) : List에서 n번째 값을 반환합니다.

set-nth($list, $n, $value) : List에서 n번째 값을 다른 값으로 변경합니다.

join(list1, $list2, [separator]) : 두 개의 List를 하나로 결합합니다.

zip($lists…) : 여러 List들을 하나의 다차원 List로 결합합니다.

index($list, $value) : List에서 특정 값의 index를 반환합니다.

Map 함수

모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환합니다.

map-get($map, $key) : Map에서 특정 key의 value를 반환합니다.

map-merge($map1, $map2) : 두 개의 Map을 병합하여 새로운 Map를 만듭니다.

map-keys($map) : Map에서 모든 key를 List로 반환합니다.

map-values($map) : Map에서 모든 value를 List로 반환합니다.

관리(Introspection) 함수

variable-exists(name) : 변수가 현재 범위에 존재하는지 여부를 반환합니다.(인수는 $없이 변수의 이름만 사용합니다.)

unit($number) : 숫자의 단위를 반환합니다.

unitless($number) : 숫자에 단위가 있는지 여부를 반환합니다.

comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.

참고자료

#sass 완전정복