SCSS(Sass) 사용하기

1. 개요  https://sass-lang.com/

  Sass와  SCSS는 CSS를 위한 Preprocessor Language이다.

  CSS에 없는 variables, nested rules, mixins등 CSS를 유지관리하기에 편리한 기능을 가지고 있다.

  Sass와  SCSS는 문법적인 차이가 있다. SCSS가 기존 CSS와 더 유사하다.

  Sass는 확장자가 .sass인 오리지널 Sass 문법과 .scss인 SCSS (Sassy CSS) 문법 두 가지 형식을 모두 지원합니다.

  이 두 문법은 기능적으로 동일하며, 구문 차이만 있다. 기본적으로 SCSS 문법을 사용하는 것이 일반적이고, 더 널리 사용되고 있습니다.

 

 

  Sass는 현재 3 버전까지 출시되었습니다. 각 버전은 다음과 같습니다:

  1. Sass 1: 초기 버전으로, 2006년에 처음으로 공개되었습니다. Ruby 기반으로 동작하며, 들여쓰기를 사용한 오리지널 Sass 문법을 사용한다.

  2. Sass 2: 2007년에 출시되었습니다. 이 버전에서는 여러 개의 .sass 파일을 컴파일하거나 컴파일된 CSS를 결합하는 기능 등이 추가되었다.

  3. Sass 3: 2010년에 출시되었으며, 가장 널리 사용되는 버전입니다.

    4. 이 버전에서는 .scss 확장자를 가진 SCSS 문법이 도입되었습니다. SCSS는 CSS와 거의 동일한 문법을 가지고 있어

    기존의 CSS 코드를 쉽게 Sass로 변환할 수 있게 되었습니다. 또한, Sass 3에서는 변수, 중첩 규칙, 믹스인, 상속 등과 같은 다양한 기능을 포함하여

    스타일 시트 작성을 더욱 편리하게 만들어 주었습니다.

     

    [정리]  SCSS는 Sass 3 버전부터 도입된 문법 형식 중 하나로 Sass 3 버전 이상을 사용하면 SCSS 문법을 활용할 수 있다.

    SCSS는 CSS와 거의 동일한 문법을 가지고 있으며, 중괄호({})와 세미콜론(;)을 사용하여 스타일을 정의한다. 이를 통해 기존의 CSS 코드를 쉽게 Sass로 변환할 수 있게 되었습니다.

    SCSS를 사용하여 스타일 시트를 작성할 수 있으며, Sass의 기능과 장점을 모두 활용할 수 있다.

     

2. 프로젝트 시작하기

  프로젝트 폴더를 만든다.   scss_learning 폴더를 만들고  하위 폴더로 css  js 폴더를 만든다.

  visual code를 이용하여  HTML을 다음과 같이 만들어 보자.  

<!DOCTYPE html>
<html>
<head>
  <title>Learning SCSS</title>
  <meta charset="utf-8">
</head>
<body>
    <header></header>
    <nav></nav>
    <article></article>
    <section></section>
    <footer></footer>
</body>
</html>

 

 3. extension 설치하기

    visual code의 extension을 클릭해보고 필요한 extension을 설치한다. Live Sass를 설치한다.

    

 

 4. HTML을 다음과 같이 수정한다.

<!DOCTYPE html>
<html>
<head>
  <title>Learning SCSS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
    <header>
        <h1>Hello World!!!</h1>
        <h3>Welcome to Sass Learning!!</h3>
    </header>
    <nav></nav>
    <article></article>
    <section></section>
    <footer></footer>
</body>
</html>

 

  (1) variables 사용하기

   css/mystyle.scss 파일을 다음과 같이 만든다.

$mycolor: crimson;
$fontSize: 100px;

h1 {
    color: $mycolor;
    font-size: $fontSize;
}

    자동으로 css/mystyle.css 파일이 생성된다.  mystyle.scss 파일에서 작업을 진행하면 된다.

 

  (2) scss 파일 분해 및 조합

    파일을 기능별로 분활하고 이를 한꺼번에 모아서 사용할 수 있다.

     css/variables.scss 파일을 다음과 같이 만든다.

$mycolor: crimson;
$fontSize: 40px;

$primary: #326dee;
$secondary: #1ac888;
$error: #d32752;
$info: #f6c31c;

$base-padding: 0.75rem;
$base-margin:  0.75rem;

$base-border-thickness: 1px;
$base-border-radius: 20px;


  

    css/mystyle.scss파일을 다음과 같이 수정을 한다.   @import 를 이용하여 불러오기를 한다. 

/* comment사용하기
   이렇게 컴맨트를 사용할 수 있다.
*/
// comment사용하기 ( 이렇게 컴맨트를 사용할 수 있다.)

@import 'variables';
h1 {
    font-size : $fontSize + 2px; //연산도 가능하다.
    width : (500px * 2);  //연산도 가능하다.
    color: $mycolor;
  }


 

    @import는 단순 파일 불러 오기에  사용된다. 만일 모듈화 하여 사용하고 십다면 @use를 사용한다.

 

  (3) 중첩 (nesting)

  

  (4)  mixins

   mixins은 재사용 가능한 코드 조각을 정의하는 기능입니다. Mixin을 사용하면 일반적으로 반복되는 스타일 규칙을 한 곳에 정의하여 필요할 때마다 호출할 수 있습니다.

   이는 코드의 중복을 줄이고 유지 보수성을 향상시키는 데 도움이 됩니다. 

   css/mystyle.scss파일을 다음과 같이 추가 한다. @include 키워드를 사용하여 Mixin을 호출하고, 호출 시에 매개변수를 전달합니다.

// Mixin 정의
@mixin button($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
  }
 
  // Mixin 사용
  .button-primary {
    @include button(blue, white);
  }
 
  .button-secondary {
    @include button(grey, black);
  }

  .button-mycolor {
    @include button($mycolor, white);
  }



 

    html 파일을 다음과 같이 추가한다.

    <nav>
        <button class="button-primary">Primary Button</button>
        <button class="button-secondary">Secondary Button</button>
        <button class="button-mycolor">Custom Button</button>
    </nav>

 

 (5) 모듈사용하기

   위에서 정의한 button 믹스인을 모듈로 만들어 보자. 새파일이름은 _butons.scss( partial 파일 )로 만든다.

   만약에 .sass 파일이나 .scss 파일의 파일이름을 underscore _ 로 시작하면 css 파일로 따로 컴파일되지 않습니다.

   html 에서 해당 css 파일을 불러올일이 없고, import 만 되는경우에는이 기능을 사용하세요.

 

// buttons 모듈을 만든다. 파일이름은 _butons.scss 로 만든다.

$primary-color: blue;//variables을 추가할 수 있다.

 

@mixin button($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
  }
 
  .button-primary {
    @include button(blue, white);
  }
 
  .button-secondary {
    @include button(grey, black);
  }


     

     mystyle.scss 파일을 다음과 같이 수정한다. mystyle.scss 파일에서 클래스 .button-primary과 .button-secondary를 사용할 수 있다.

//mystyle.scss
@use 'buttons' as btn;
@import 'variables';

h1 {
    font-size : $fontSize + 2px; //연산도 가능하다.
    width : (500px * 2);  //연산도 가능하다.
    color: $mycolor;
  }

  .button-mycolor{
    @include btn.button(btn.$primary-color, white);
  }


 

  (6) built-in modules  https://sass-lang.com/documentation/modules

    

 

    [참고] https://sass-lang.com/documentation/modules/color#lightness

//mystyle.scss
@use 'buttons' as btn;
@use 'sass:color';  //  https://sass-lang.com/documentation/modules/color#lightness

@import 'variables';

h1 {
    font-size : $fontSize + 2px; //연산도 가능하다.
    width : (500px * 2);  //연산도 가능하다.
    color: $mycolor;
  }

  .button-mycolor{
    @include btn.button(btn.$primary-color, white);
  }


$base-color: #3498db;

// 색상 조정
$adjusted-color: color.adjust($base-color, $lightness: 20%, $alpha: 1);
$adjusted-color2: color.adjust($base-color, $lightness: -20%, $alpha: 1);

.box {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    margin: 20px;
    background-color: $base-color;
}
 
.lighter-box {
    //background-color: $adjusted-color;
    background-color: color.adjust($base-color, $lightness: 20%, $alpha: 1);
}
 
.darker-box {
    background-color: $adjusted-color2;
}



 

    HTML에 다음을 추가한다.

  <section>
        <div class="box"></div>
        <div class="box lighter-box"></div>
        <div class="box darker-box"></div>
    </section>
 

 

  (7) @extend 

    @extend는 Sass에서 스타일을 확장(상속)하기 위해 사용되는 기능입니다.

.normal-button{
    padding: 10px;
    border: 1px solid #ccc;
  }
 
.type1-button {
    @extend .button !optional;
    background-color: #3498db;
    color: #fff;
}
 
.type2-button {
    @extend .button !optional;
    background-color: #e74c3c;
    color: #fff;
}



 

    HTML에 다음을 추가한다.

    <article>
        <button class="normal-button">Normal Button</button>
        <button class="type1-button">type1 Button</button>
        <button class="type2-button">type2 Button</button>
    </article>

 

  (8) Placeholder 선택자 %

    Sass에서 Placeholder 선택자 %는 스타일을 정의하는데 사용되는 선택자입니다. Placeholder 선택자는 스타일을 포함한 CSS 규칙을 정의할 수 있지만,

    컴파일된 CSS에서 실제로 사용되지는 않습니다. 대신, 다른 선택자가 Placeholder 선택자를 상속하여 스타일을 사용할 수 있습니다.

    Placeholder 선택자는 @extend 지시문을 통해 상속될 때 유용하게 사용됩니다.

    다른 선택자가 Placeholder 선택자를 상속하면, Placeholder 선택자의 스타일은 해당 선택자로 확장되고, 컴파일된 CSS에서 사용됩니다.

    

%button-style {
    padding: 10px;
    border: 1px solid #ccc;
  }
 
  .button {
    @extend %button-style;
    background-color: #3498db;
    color: #fff;
  }
 
  .primary-button {
    @extend %button-style;
    background-color: #e74c3c;
    color: #fff;
  }





 

 (9) @function

    @function은 Sass에서 사용자 정의 함수를 생성하는 기능입니다. 함수는 재사용 가능한 코드 블록으로, 입력 값을 받아 처리하고 결과를 반환합니다.

    @function을 사용하여 함수를 정의하고 호출하여 계산, 변환 또는 스타일 적용과 같은 작업을 수행할 수 있습니다.

    함수는 값을 반환하기 위해 @return 지시문을 사용합니다. 함수는 다른 Sass 코드 내에서 표현식처럼 사용될 수 있으며,

    반환된 값을 변수에 할당하거나 다른 속성에 사용할 수 있습니다.


  @function add($a, $b) {
    @return $a + $b;
  }
 
  @function greet($name) {
    @return "Hello, #{$name}!";
  }

  .element {
    width: add(10px, 20px);
    content: greet("Alice");
  }
 

 

  (10) @if, @else if, @else 조건문

    특정 조건에 따라 다른 스타일 또는 속성을 적용하는 데 사용됩니다.  

  $show-button: true;
  .element {
    @if $show-button {
      display: block;
    }
    @else {
      display: none;
    }
  }

 

 

  (11)  Sass에서는 다음과 같은 반복문 지시자를 제공합니다.

  1. @for: 지정된 범위 내에서 반복을 수행합니다.
  2. @each: 리스트 또는 맵의 각 항목에 대해 반복을 수행합니다.
  3. @while: 주어진 조건이 참일 동안 반복을 수행합니다.

    

    @for

    Sass에서 반복문을 구현하는 기능 중 하나입니다.

.list {
  @for $i from 1 through 5 {
    .myitem-#{$i} {
      width: 50px * $i;
    }
  }
}

   

    다음과 같이 CSS가 생성된다.

.list .myitem-1 {
  width: 50px;
}
.list .myitem-2 {
  width: 100px;
}
.list .myitem-3 {
  width: 150px;
}
.list .myitem-4 {
  width: 200px;
}
.list .myitem-5 {
  width: 250px;
}

 

    @while

    @while은 Sass에서 제공하는 반복문 지시자 중 하나입니다. @while을 사용하여 특정 조건을 만족하는 동안 반복적으로 코드를 실행할 수 있습니다.

$counter: 1;
  @while $counter <= 5 {
    .item-#{$counter} {
      width: 20px * $counter;
    }
   
    $counter: $counter + 1;
  }
 
 

  

     다음과 같이 CSS가 생성된다.

.item-1 {
  width: 20px;
}

.item-2 {
  width: 40px;
}

.item-3 {
  width: 60px;
}

.item-4 {
  width: 80px;
}

.item-5 {
  width: 100px;
}

 

    @each 반복문

    Sass에서 반복문을 구현하는 기능 중 하나입니다. @each를 사용하면 리스트나 맵의 각 항목을 순회하면서 스타일 또는 속성을 적용할 수 있습니다.

  $fruits: ("apple", "banana", "mango", "orange");
  .list_fruits {
    @each $fruit in $fruits {
      li.#{$fruit} {  
          background: url('../img/#{$fruit}.png');
      }
    }
  }


 

    다음과 같이 CSS가 생성된다.

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

 

   비디오강의

     (1) Introduction         https://www.youtube.com/watch?v=_kqN4hl9bGc&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb

     (2) Compiling SASS    https://www.youtube.com/watch?v=Sk5jMurFHCo&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=2

     (3) Variables          https://www.youtube.com/watch?v=LXx_oE6IBWs&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=3

     (4) partials & @import  https://www.youtube.com/watch?v=sIzt6kr3MHc&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=4

     (5) Project Structure    https://www.youtube.com/watch?v=OxT05SPg1js&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=5

     (6) Nested Rules       https://www.youtube.com/watch?v=vajsECys5Tc&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=6

     (7) using Math         https://www.youtube.com/watch?v=sXE3nwjCY_w&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=7

     (8) Maps             https://www.youtube.com/watch?v=La8wN7o-cL8&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=8

     (9) Loops            https://www.youtube.com/watch?v=I1lp8eSKmEs&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=9

     (10) Conditionlas        https://www.youtube.com/watch?v=QPZOvED3N_8&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=10

     (11) Parent Selectors    https://www.youtube.com/watch?v=unhOp1Z-hec&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=11

     (12) Mixins             https://www.youtube.com/watch?v=eW1nhSZaPEw&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=12

     (13) Functions           https://www.youtube.com/watch?v=l0VljiUg2d0&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=13

     (14) Making  Classes     https://www.youtube.com/watch?v=JIskeGNEVEk&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=14

     (15) Media Queries       https://www.youtube.com/watch?v=3R4fpnIAozs&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=15

     (16) Grid System #1     https://www.youtube.com/watch?v=GA65QBSec-Y&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=16

     (17) Grid System #2      https://www.youtube.com/watch?v=jWV_fU3qMnw&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=17

     (18) @extends          https://www.youtube.com/watch?v=vqI9kuoy6xM&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=18

     (19) CSS Library         https://www.youtube.com/watch?v=Ta0hiPMH9Qg&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=19

     (20) Purging CSS        https://www.youtube.com/watch?v=5IpRkfdWoaM&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=20

     (21) Customizing Library   https://www.youtube.com/watch?v=btMR5e4ZRM4&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=21

     (22) Extending Library    https://www.youtube.com/watch?v=AqyCmYxy60s&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&index=22