[오늘의 CSS] live sass compiler 초기 setting과 SCSS 문법 정리

Sass

(Syntactically Awesome StyleSheet)
개발의 효율을 높이기 위한 CSS pre-processor(전처리기)
=> nesting작성이 가능하여 css보다 편리하고, 함수 등의 기능을 사용할수 있다. 

다만, 브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일=> .css 파일로 트랜스파일링(컴파일)이 필요함

---

초기 설정 방법

웹팩이나 리액트, 뷰를 사용하지 않는 경우,

1. node.js 환경에서

npm install -g node-sass
$ node-sass scss/main.scss public/main.css //$ node-sass [옵션] <입력파일경로> [출력파일경로]
$ node-sass --watch  scss/main.scss public/main.css // 변환 내용 실시간 확인
$ sass --version​

 

2. vscode 환경에서

- Live Sass Compiler 설치

- settings.json 열어서 추추가

{ 
   "liveSassCompile.settings.generateMap": false,  //map 파일 및 주석 생기지 않게 처리하기
   "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css/", // 저장경로. null 설정시 scss와 같은 폴더에 저장
    }
  ]
}

 

---

문법 

1. 주석 처리 방식

// 컴파일되지 않는 주석   css에 흔적없음 
/* 컴파일되는 주석 css에 흔적남김 */

 

2. 변수(Variable)

반복적으로 사용되는 값을 변수로 지정 가능

기본작성 방식 : $변수명

변수는 선언된 블록{}안에서만 유효함 ; 만약 블록 안에서 선언된 변수를 전역으로 쓰고싶다면, !global 쓰기

!default 는 변수가 재할당되더라도 초기에 선언된 값으로 처리됨 (=> 현재 설정하는 변수의 값은 사용하지 않겠다는 뜻으로 씀)

 

  $color1: #111; //전역변수
  
  .box {$color2: #222; !global;//전역변수
  		$color3 : #333; //로컬변수
        
        $color1 : red !default; 
        border : 1px solid $color1;  // red안되고 #111로 처리됨
  	}

​

< 변수 종류 >

숫자Numbers,

문자열Strings,

색상Colors : blue, #FFFF00, rgba(255,0,0,.5)

Booleans : true, false

Nulls : null(의도적인 값 없음). 속성 값으로 사용 시 컴파일 안됨

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

Maps : (Key: Value)

 

$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
  l: light,
  d: dark,
);

$font-stack: '맑은 고딕', sans-serif;
$primary-color: #333;

body {
  font-family: $font-stack;
  color: $primary-color;
}

#{ }를 사용하면 원하는 곳에 변수값 적용 가능

$family: unquote("Droid+Sans");   //unquote는 따옴표제거 함수
@import url("http://fonts.googleapis.com/css?family=#{$family}");

 

3. 중첩(Nesting)

.class {
      padding: 3% 0px;
      width: 100%;
      color: $primary-color;
      li {
       list-style:none;
      }
      &:hover { // a:hover
        color: white;
        background-color: $color;
      }
     &-small { // .class-small
        font-size: 12px;
     }
}

 

4. Import & Extend

@import 다른 scss 파일 불러오기
@extend 특정 선택자 속성 상속 받기

@import "layout.scss";
@import "layout"; // 확장자 생략 가능
@import "header", "footer"; // 여러 scss 파일 불러오기

. css 파일로 임포트 되는 상황

파일 확장자가 .css일 때

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

url()이 붙었을 경우

미디어쿼리가 있는 경우

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

// common.scss


// colors
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;

// Size Section
$borderRadius: 5px;

// default Tags
button {
  cursor: pointer;
  color: $color1;
  background-color: $color2;
  border-radius: $borderRadius;
  border: 0px;

  &:hover {
    color: $color2;
    background-color: $color1;
  }
}

div {
  padding: 5px;
  border-radius: $borderRadius;
  border: $color3 1px solid;
}

// style.scss

@import "common.scss";

.login_box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    border: 0px;
  }

  .box {
    background-color: $color4;
    width: 700px;
    height: 400px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
}

​

5. 믹스인(Mixins)

공통적으로 쓰이는 css 속성들을 묶어서 재사용이 가능하게 하는 기능

선언 @mixin

사용 @include

/* 선언 - @mixin */

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

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}


/* 사용 - @include */

h1 {
  @include large-text;
}

div {
  @include large-text;
}

매개변수(인수)를 가지는 mixin 

@mixin 믹스인이름($매개변수) { 스타일; }
@include 믹스인이름(인수);
 

@content 를 추가로 작성하면 include할때 추가로 스타일을 작성할수 있음 

@mixin 믹스인이름($매개변수) { 스타일; @content; }
태그명 { @include 믹스인이름(인수)    {position: absolute; }; }
 

@extend를 사용하면 다른 선택자에 적용한 스타일을 그대로 복붙할수있음

//매개변수(인수)를 배우자 
//scss
@mixin dash-line($width: 1px, $color) {  // ()안에서 매개변수의 초기값 할당도 가능하고 인수값 없으면 초기값으로 적용
  border: $width dashed $color;
}
.box1 { @include dash-line(4px, red); }
.box2 { @include dash-line(blue); }

// css
.box1 {
  border: 4px dashed red;
}
.box2 {
  border: 1px dashed blue;
}


//@content를 배우자 
//scss
@mixin 여기에이름($url) {
  &::after {
    content: $url;
    @content;
  }
}
.box1 {
  // 여기에이름의 기본기능만 사용
  @include icon("/images/icon.png");
}
.box2 {
  // 여기에이름의 기본기능에 추가로 스타일작성하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

//css

.box1::after {
  content: "/images/icon.png";
}
.box2::after {
  content: "/images/icon.png";
  position: absolute;
}


//@extend 를 배우자 
//scss 
.icon1{ color:red; }
.icon2{ //여기에 icon1에서 쓴 스타일을 복붙하고싶다!하면 요로코롬
	@extend icon1;
	padding:10px;
    }
 
 //css
.icon1, icon2 { color:red; }
.icon2{ padding:10px; }

extend를 애써 배웠찌만, extend가 컴파일 되었을때는 생각하지 않은 방향으로 전개될 수 있어 사용을 권장하지 않으며,
mixin을 적극 권장한다고 합니다. 
 
 
 

6. 연산자(Operators)

+, - 연산시에는 단위 통일

나누기 연산시에는 괄호로 묶어서 사용

width: 50% - 20px;  /* 단위 모순 에러(Incompatible units error) */
width: calc(50% - 20px);  /* 연산 가능 */

 

 

7. 내장함수

모든 내장함수를 볼수있는 곳 https://sass-lang.com/documentation/modules ​

 

색상(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, $number) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.

 
Numbers: 숫자에 단위가 있거나 없습니다.
Strings: 문자에 따옴표가 있거나 없습니다.
Nulls: 속성값으로 null이 사용되면 컴파일하지 않음
Lists: ()를 붙이거나 붙이지 않기
Maps: ()를 꼭 붙여야 합니다.
 

8.  @at-root (중첩 벗어나기) 와 속성 중첩작성 

margin-top, margin-left, margin-right와 같이 겹치는 부분을 아래와 같이 작성할수있다. 

article{
	margin: {
   		 top: 10px; //margin-top
   		 left: 20px;
  	};
 @at-root .box {  // article과 형제관계인 .box에게 처리됨
   		width: 100px;
    	height: 200px;
  	}
  }

 

 

9.  IF문작성시 논리연산자 사용가능

&& 역할 = and    / || 역할 = or    / !의 역할 = not   

$width: 90px;
div {
  @if not ($width > 100px) { // 변수가 100px보다 크지 않으면 
    height: 300px; //적용됨 
  }
}

 

10. 커스텀 함수 만들기 

mixin과 유사하지만, mixin은 스타일을 반환하고,
함수는 연산된 값을 반환한다. 
 

// mixin
@mixin 믹스인이름($매개변수) {
  스타일;
}
//mixin사용
@include 믹스인이름(인수);


// function 
@function 함수이름($매개변수) {
  @return 값
}
// functions 사용
함수이름(인수)

 

함수

//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);
  }
}

//css

.box_group {
  /* 변수그대로 대입 */
  width: 980px;
}
.box_group .box1 {
  /* 인수1만처리되고 기본값적용 */
  width: 81.66667px;
}
.box_group .box2 {
  width: 653.33333px;
}
.box_group .box3 {
  width: 245px;
}

 
 

11.  if 구문사용하기

조건이 참이면 실행문1 이 적용되고, 조건이 거짓이면 실행문2가 적용됩니다. 
 

if(조건, 실행문1, 실행문2)

//scss
$width: 555px;
.box {
  width: if($width > 300px, $width, null);
}

//css 
.box{ width:555px; }

 
 
@if로 작성하기

// @if
@if (조건) {
  /* 조건이 참일 때 실행문 */
}

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

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


//scss
$color: orange;
div {
  @if $color == strawberry {
    color: beige;
  } @else if $color == orange {
    color: red;
  } @else if $color == banana {
    color: lightblue;
  } @else {
    color: teal;
  }
}

//css
div { color: red; }

 
 
 

12. @for 사용

for문하고 유사합니다. 
through를 이용하거나 ,  to 를 이용하는 방식으로 나뉩니다.  
 

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

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


//scss
// 1부터 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
  }
}

//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; }

 
 
 

13. @each 사용

For-in문과 유사합니다. 

//scss
// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

//css
.fruits li.apple {
  background: url("/images/apple.png");
}
.fruits li.orange {
  background: url("/images/orange.png");
}
.fruits li.banana {
  background: url("/images/banana.png");
}
.fruits li.mango {
  background: url("/images/mango.png");
}

 

//index()내장함수 사용한 scss
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    $i: index($fruits, $fruit);
    li:nth-child(#{$i}) {
      left: 50px * $i;
    }
  }
}

//index()내장함수 사용한 css
.fruits li:nth-child(1) {
  left: 50px;
}
.fruits li:nth-child(2) {
  left: 100px;
}
.fruits li:nth-child(3) {
  left: 150px;
}
.fruits li:nth-child(4) {
  left: 200px;
}

//변수가 담고 있는 값이 1개 이상일 경우 scss

$apple: (apple, korea);
$orange: (orange, china);
$banana: (banana, japan);

@each $fruit, $country in $apple, $orange, $banana {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

//변수가 담고 있는 값이 1개 이상일 경우 css

.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

// 키 : 값 형태로 작성된 데이터를 반복할때 

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


//scss
$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan
);

@each $fruit, $country in $fruits-data {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

//css
.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

 
 
 
14. @while 
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; }

 
 
초기 설정은 학원 강의 정리
scss정리는 아래 글을 읽고 정리한 내용입니다.
출처 )
https://heropy.blog/2018/01/31/sass/