Sass(SCSS)

1. Sass 와 SCSS의 차이점

  • Sass의 3버전에 새롭게 등장한 SCSS

  • SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합.

  • 즉, SCSS는 CSS와 거의 같은 문법으로 Sass기능을 지원

2. 개요

  • Sass(SCSS)는 웹에서 직접 동작 X

  • 최종에는 표준 CSS로 동작해야하고, 전처리기로 작성 후, CSS 컴파일해야한다.

  • js 개발환경에서 추천하는 방법

    • SassMeister(강의에서 자주 사용)

    • node-sass, webpack, ....중 Parcel 이용!

    • node js 사용자 기준, 웹 애플리케이션 번들러 Parcel을 사용할것

      • 패키지 관리(package.json) npm init -y

      • Parcel전역설치

        npm install -g parcel-bundler

      • dev dependencies에 설치

        npm i -D parcel-bundler

      • Sass 컴파일러설치(node-sass) npm install --save-dev node-sass

      • HTML에 <link>로 Sass 파일 연결하기

        <link rel="stylesheet" href="scss/main.scss">

      • 필요한 모듈 자동으로 설치. parcel이 컴파일해서 scss를 읽을수있도록해줌.

        npx parcel index.html

3. 문법

3.1 주석

  • // : 컴파일 되지 않는 주석

  • / /: 컴파일 되는 주석

    • Sass의 경우에는 줄을 맞춰 * 을 사용해야하지만,

    • SCSS는 각 줄에 * 없어도 호환 쉽다.

3.2 데이터 종류

데이터

설명

예시

Numbers

숫자

1, .82, 20px, 2em…

Strings

문자

bold, relative, "/images/a.png", "dotum"

Colors

색상 표현

red, blue, #FFFF00, rgba(255,0,0,.5)

Booleans

논리

true, false

Nulls

아무것도 없음

null

Lists

공백이나 ,로 구분된 값의 목록

(apple, orange, banana), apple orange

Maps

Lists와 유사하나 값이 Key: Value 형태

(apple: a, orange: o, banana: b)

(참고) 목차

3.3 중첩

  • 상위선택자 참조 (&) : 상위 선택자를 사용해서, 일치선택자를 만들 수 있음.

      /*SCSS*/
      .fs{
          &-small{
              font-size: 14px;
          }
          &-medium{
              font-size: 16px;
          }
          &-large{
              font-size: 18px;
          }
      }
      /*CSS로 컴파일시*/
      .fs-small {
          font-size: 14px;
      }
      .fs-medium {
          font-size: 16px;
      }
      .fs-large {
          font-size: 18px;
      }
  • 중첩 벗어나기 @at-root

      /*SCSS*/
      .section{
          $width: 100px;
          $height: 200px;
          width: $width;
          height: $height;
          .item{
              width: $width;
              height: $height;
          }
          @at-root .box{
              width: $width;
              height:$height;
          }
      }
      /*CSS*/
      .section {
          width: 100px;
          height: 200px;
      }
      .section .item {
          width: 100px;
          height: 200px;
      }
      .box {
          width: 100px;
          height: 200px;
      }
  • 중첩된 속성

    • 동일한 네임스페이스 (margin-, font-, padding-..)를 사용할 때

      .box{
        font:{
            size: 10px;
            weight: bold;
        };
        margin:{
            top: 100px;
            left: 20px;
            right: 30px;
        };
      }
      .box {
        font-size: 10px;
        font-weight: bold;
        margin-top: 100px;
        margin-left: 20px;
        margin-right: 30px;
      }

목차

3.4 변수

  • 반복 사용되는 값을 변수로 지정($) $변수이름: 속성값

      $w: 100px;
      $color: red;
      $url: "/assets/images/";
    
      .box{
      width: $w;
      margin-left: $w;
      background: $color url($url + "pretty.jpg");
      }
      .box {
          width: 100px;
          margin-left: 100px;
          background: red url("/assets/images/pretty.jpg");
      }
  • 변수 유효범위(Variable Scope)

    • 선언된 블록 {} 내에서만 유효

  • 변수 재 할당

    • 변수에 변수를 할당할 수 있음

  • 변수 전역설정

    • !global 플래그를 사용하여, 유효범위를 전역(Global)로 설정

  • 변수 초깃값 설정

    • !default 플래그는 할당되지 않은 변수의 초깃값을 설정합니다.

    • 즉, 할당되어 있는 변수가 있다면 변수가 기존 할당값을 사용합니다.

    • 기존 변수가 있을 경우, 현재 설정하는 변수의 값은 사용하지 않겠다는 뜻.

    • 기존 코드(원본)을 Overwrite하지 않고 사용하기 위해서 사용.

  • 문자보간(#{})

    • #{}를 사용하여, 코드의 어디든지 변수값을 넣을 수 있다.

      /*SCSS*/
      $family: unquote("Droid+Sans");
      @import url("http://fonts.googleapis.com/css?family=#{$family}");
      /*CSS*/
      @import url("http://fonts.googleapis.com/css?family=Droid+Sans");
    • unquote()는 문자에서 따옴표 제거

목차

3.5 가져오기

  • @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS출력 파일로 병합

    • Sass @import 는 기본적으로 Sass파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇가지 상황이 있다.

      • 파일확장자가 .css일때

      • 파일이름이 http://로 시작하는 경우

      • url()이 붙었을 경우

      • 미디어 쿼리가 있는경우

    • 위의 경우 CSS @import 규칙대로 컴파일됩니다.

  • 여러가지 파일가져오기

      @import "header", "footer";
  • 파일 분할

    • 파일이름 앞에 _를 붙이면 컴파일시 ~.css파일로 컴파일하지 않는다.

    • Webpack 이나 Parcel, Gulp 같은 일반적인 빌드툴에서는 Partials 기능을 사용할 필요 없이, 설정된 값에 따라 빌드 된다. 하지만 _를 사용할 것을 권장.

목차

3.6 연산

  • 산술연산자

  • 비교연산자

  • 논리연산자(and, or, not)

  • 숫자

    • 상대전 단위 연산(%, em, vm등)의 연산의 경우 CSS 의 calc()로 연산

        width: 50%- 20px; // 단위 모슨 에러
        width: calc(50%-20px); // 연산가능
    • 나누기 연산 주의사항

      • CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에, 연산이 안될 수도 있다.

      • 예를들어

        font:16px/22px serif;

        font-size:16px; line-height:22px을 뜻하기 때문.

      • 따라서 /를 나누기 연산으로 사용하려면 다음 조건을 충족해야한다.

        • 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우

        • 값이 ()로 묶여있는 경우

        • 값이 다른 산술 표현식의 일부로 사용되는 경우

      • 나눗셈 연산을 하려면 /를 기준으로 오른쪽에는 숫자만 쓰자.

  • 문자

    • 문자연산에는 + 사용

    • 문자연산으 결과는 첫번째 피연산자를 기준으로 함.

    • 첫번째 피연산자가 따옴표 있었다면, 결과도 따옴표로 묶인채로 반환

    • 첫번째 피연산자에 따옴표 없는문자였다면, 결과도 따옴표 없이 반환

  • 색상

    • 색상도 연산할 수 있다.

      div{
        color: #123456 + #345678;
        //R: 12 + 34 = 46 //16진수로 표시
        //G: 34 + 56 = 8a
        //B: 56 + 78 = ce
        background: rgba(50,100,150,.5)+ rgba(10,20,30,.5);
        //R: 50+10 = 60
        //G: 100 +20 =120
        //B: 150+30 = 180
        //A: Alpha channels must be equal
      }
      div{
        color: #468ace;
        background: rgba(60,120,180,.5)
      }
    • alpha channels 값을 연산하고 싶다면, opacify(), transparentize() 함수 사용.

      • oacify(컬러변수, .3) : 컬러변수를 30% 더 불투명하게(+)

      • transparentize(컬러변수, .3): 컬러변수를 30% 더 투명하게(-)

  • 논리

    • @if조건문에서 사용되는 논리 연산

      /*SCSS*/
      $w:100px;
      .item{
        display: block;
        @if not ($w>50px and $w<90px){
            width: 400px;
        }
      }

목차

3.7 재활용

  • Sass Mixins는 스타일 시트전체에서 재사용할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능.

  • 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어 낼 수 있다.

  • 기억할것 2가지

    • 선언하기 @Mixin

    • 포함하기 @include

      //SCSS
      @mixin size($w:100px, $h:100px){
        width: $w;
        heigh: $h;
        &::after{
            content:"!!";
        }
      }
      
      .box1{
        @include size;
      }
      .box2{
        @include size(200px, 300px);
      }
      .box3{
        @include size($h:400px);
      }
      .box1 {
        width: 100px;
        heigh: 100px;
      }
      .box1::after{
        content:"!!";
      }
      
      .box2 {
        width: 200px;
        heigh: 300px;
      }
      .box2::after{
            content:"!!";
        }
      .box3 {
        width: 100px;
        heigh: 400px;
      }
      .box3::after{
        content:"!!";
      }
    • 상위 참조 연산 사용가능

    • 키워드인자 사용가능

    • 가변인수(매개변수 뒤에 ...)를 사용하여 입력할 인수갯수가 불확실할때 사용.

    • @content: 해당부분에 원하는 스타일 블록을 전달.

      //SCSS @content 사용예시
      @mixin icon($url){
        &::after{
            content: $url;
            @content;;
        }
      }
      
      .box1{
        @include icon("image/icon1.png")
      }
      .box2{
        @include icon("image/icon2.png"){
            display:block;
            position: absolute;
            width: 100px;
            height: 100px;
        }
      }
      /*compile 된 css*/
      .box1::after {
        content: "image/icon1.png";
      }
      
      .box2::after {
        content: "image/icon2.png";
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
      }

      목차

3.8 확장

  • @extend 선택자

  • 다중선택자 형식으로 들어가진다.

  • 권장되는 방법은 아님, 되도록 mixin을 대체기능으로 사용!

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

    ```CSS

    .btn, .btn-danger {

    padding: 10px;

    margin: 10px;

    background: blue;

    }

.btn-danger { background: red; }

[목차][TOC]

---

#### 3.9 함수
- Mixin: 지정한 스타일을 반환함
- function: 보통 연산된(Computed) 특정값을 @return 지시어를 통해 반환
- 함수이름 명명시, 내장함수와 겹칠 수 있으므로 접두어를 붙여 지을것.
- 예: `extract-read()` 같은 이름
- 사용방법
    ```SCSS
    // 선언
    //Mixin
    @mixin 믹스인이름($매개변수){
        스타일;
    }
    //Function
    @function 함수이름($매개변수){
        @return 값
    }
    //사용
    //Mixin
    @include 믹스인이름(인수);
    //Fuction
    함수이름(인수)
  • 실제 적용예시

      @function columns($number:1, $columns:12, $width:1200px){
          @return $width *($number/$columns);
      }
    
      .container{
          $width: 1200px;
          width: $width;
          .item:nth-child(1){
              width: columns();
          }
          .item:nth-child(2){
              width: columns(8, $width:$width);
          }
          .item:nth-child(3){
              width: columns(3);
          }
      }
  • if(함수)

    • 조건의 값(true, false)에 따라 두개의 표현식중 하나만 반환

    • 삼항연산자와 유사

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

      $width:500px;
      div{
        width: if($width>300px, $width, null);
      }

      목차

3.10 조건과 반복

  • 조건

    • @if(지시어)

    • 조건에 따른 분기처리 가능

    • if문과 유사

    • 같이 사용할수있는 지시어 @else, @else if

    • (지시어) 생략가능

    • 예제1

        @function limitSize($size){
            @if ($size>=0 and $size<=200px){
                @return 200px;
            }@else{
                @return 800px;
            }
        }
      
        div{
            width: limitSize(180px);
            height: limitSize(340px);
        }
        //compile to
        div {
            width: 200px;
            height: 800px;
        }
    • 예제2

        @mixin positionCenter($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);
                height: if(unitless($h), #{$h}px, $h);
                position: $p;;
                top:0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        }
        .box1{
            @include positionCenter(10px, 20px)
        }
        .box2{
            @include positionCenter(50,50, fixed)
        }
        .box3{
            @include positionCenter(100,200,relative)
        }
        .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;
        }
  • 반복문 1. @for

    • 관례상 변수로 $i 많이 사용

    • 사용법

        // through
        // 종료 만큼 반복
        @for $변수 from 시작 through 종료{
      
        }
        // to
        // 종료 직전까지 반복
        @for $변수 from 시작 to 종료{
            //반복내용
        }
    • 예시

        @for $i from 1 through 3{
            .box:nth-child(#{$i}){
                width: 20px * $i;
            }
        }
        .box:nth-child(1) {
            width: 20px;
        }
      
        .box:nth-child(2) {
            width: 40px;
        }
      
        .box:nth-child(3) {
            width: 60px;
        }
    • @each

      • List, Map 데이터 반복해야할때 사용

      • for in 문과 유사

        @each $변수 in 데이터{
          //반복내용
        }
      • 사용예시1(List)

        $fruits: (apple, banana, mango, orange);
        
        .fruits{
          @each $fruit in $fruits{
              $index: index($fruits, $fruit);
              li:nth-child(#{$index}){
                  left: 50px * $index;
                  background: url("/images/#{$fruit}.png")
              }
          }
        }
        .fruits li:nth-child(1) {
          left: 50px;
          background: url("/images/apple.png");
        }
        .fruits li:nth-child(2) {
          left: 100px;
          background: url("/images/banana.png");
        }
        .fruits li:nth-child(3) {
          left: 150px;
          background: url("/images/mango.png");
        }
        .fruits li:nth-child(4) {
          left: 200px;
          background: url("/images/orange.png");
        }
      • 사용예시2(Map)

        $fruits-data:(
          apple:korea,
          orange:china,
          banana:japan
        );
        
        @each $key, $value in $fruits-data{
          // map-keys($fruits-data) =>(apple, orange, banana)
          // map-values($fruits-data) => (korea, china, japan)
          $key-list : map-keys($fruits-data);
          $index : index($key-list, $key);
          .box-#{$key}{
              width: $index * 100px;
              background: url("/images/#{$value}.png");
          }
        }
        .box-apple {
          width: 100px;
          background: url("/images/korea.png");
        }
        
        .box-orange {
          width: 200px;
          background: url("/images/china.png");
        }
        
        .box-banana {
          width: 300px;
          background: url("/images/japan.png");
        }
    • @while

3.11 내장함수

목차

Heropy님

Last updated