[CSS] Sass, Scss란? / 사용법

Sass란?

CSS 전처리기 중의 하나로, CSS 작성을 더 편하게 만들어주는 도구

 

전처리기란?

[CSS] CSS 전,후 처리기란? / 비교

 

Sass 공식사이트

Sass: Documentation

 

Sass 설치하기

1. 응용 프로그램으로 설치

Scout-App

Scout-App, the easiest way to use Sass!

 

2. Node.js의 npm 패키지 관리자로 설치

npm install -g sass

 

3. 윈도우용 Choclatey 패키지 관리자로 설치

choco install sass

 

4. Mac os X , Linux Homebrew에 설치

brew install sass/sass/sass

 

Sass 작동방식

Sass는 사용자의 설정에 따라,

sass 문법이나, scss 문법중에 골라서 사용할 수 있다.

 

개발자가 Sass문법에 맞게 SCSS파일을 작성하면, CSS파일로 변환한다

sass --watch input.scss output.css

// sass파일을 css파일로 변환

// --watch : input.scss가 바뀔때마다, 변환작업 재실행

 

폴더내의 모든 SASS파일 검사, CSS파일로 변환하기

sass --watch 감시폴더:출력폴더

 

Scss 문법으로 사용하기

sass 문법으로 사용하려면, 중괄호{}를 제거해주세요

 

1. 변수 사용해서 스타일 만들기 ( "$" 문자를 붙여서 변수를 만들고, 변수에 스타일 저장 )

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: primary-color;
}

 

2. 중첩된 스타일 만들기 ( 중복되어야 했던 부분이 없어졌다! )

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
  
  &:hover {
    background-color: blue;
  }
}

원래 CSS 작성법

nav  ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav  li { display: inline-block; }

nav  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

 

3. 모듈 형식으로 사용하기 ( "_" 문자를 붙여 모듈을 만들고, @use로 모듈 불러오기 ) 

모듈로 사용할 _base.scss 파일 만들기

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

기본CSS 파일에 _base.scss 파일 불러와서 사용하기

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

4. 함수 형식으로 사용하기 ( "@maxin"으로 함수를 만들고, 변수를 받아 스타일 적용함수를 만들 수 있다. )

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

$sm : 576px;

@mixin mobile {
  @media screen and (min-width: $sm) {
    @content;
  }
}

.phone { 
  @include mobile{
    margin: 20px;
  }
}

 

5. 함수 형식으로 사용하기2 ( "%" 붙혀 함수를 만들고, "@extend"를 사용해 함수를 실행한다 ) 

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

 

6. 연산자 사용하기 ( + , - , * , / , % , & 등등 )

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}