스터디 - SCSS

scss는 css 전처리기 이다. css를 작성할때 중복 등 불편함을 해소하고자 생긴거라고 생각하면 될것같다.

처음 학원을 다니면서 배울때 css로 배웠기 때문에, scss라는게 있다고는 들었어도 막연하게 사용법이 어려울것이라고 생각하곤 시도해 보지 않았다. 헌데 점점 class명이 복잡해지고, 복잡한 구조의 사이트들을 만들면서 css 작성이 쉬워질수 있는 방법을 찾아보았고, scss 사용법을 가볍게 공부하고 실제 프로젝트에 도입함으로써 css 작업 효율성이 개선되었다. 여러 사이트들을 돌아다니며 공부한 scss에 대한 기본 study 내용이다.

 

study_scss.txt

0.01MB

 

내가 보려고 정리한 것이기 때문에 다소 중구난방이다.

 

 

 

 

 

- Ruby 언어로 이루어져 있기 때문에 먼저 컴퓨터에 Ruby 설치   -> https://rubyinstaller.org/ 에서 설치

 

scss 컴파일 방법 ( .scss -> .css )

cmd 에서 해당 폴더로 cd 한후 

 

* 파일 별로 컴파일

 sass --watch scss파일이름.scss:css파일이름.css

* 폴더 별로 나뉘어서 컴파일  ( https://blog.naver.com/ssimplay/221451514970) :
 sass --watch scss있는폴더명:css있을폴더명

- sass에서 값 (property)로 사용할수 있는 데이터 타입은 숫자,문자열,컬러,bollean,null,list,map 이 있다.

- 이중에서 list 가 우리가 사용하는 margin: 0 auto; 등을 쓸때 쓰는 공백 또는 콤마로 구분된 값을 말한다.
ex) margin: 0 auto; font-family: Helvetica, Aral, sans-serif ;




★★★★★★1. 변수 사용

- 변수 선언 방법 :  $ 변수명 : 값 ; 
- 사용법 : 선택자 {css속성 : $변수;}

ex)
$primary-color: #333;
body { background-color: $primary-color;}

- 변수를 특정 선택자 에서 선언하면 해당 선택자에서만 접근이 가능.
- 특정 선택자 안에서 선언하더라도 !global 플래그를 사용하면 전역변수로 모든 선택자에서 사용 가능

ex) 
body { $primary-color: #eee;}  
-> 여기서 선언한 $primary-color 는 body를 선택자로 둘때만 사용 가능하다.

body { $primary-color: #eee !global; }
-> body 선택자를 두고 변수를 선언했지만 !global 플래그를 사용했으므로 모든 곳에서 사용 가능하다.  

- 변수는 property 값으로만 사용할수 있으나, 만약 변수를 호출할때 #{$변수명} 으로 사용하면 셀렉터와 property명 에도 사용 가능하다.

ex)

$name: foo;
$attr: border;

p.#{$name} {            // p.foo
  #{$attr}-color: blue; // border-color: blue;
}

- !default ;  : 값이 할당되지 않은 변수의 초기값을 설정. 
- 이미 값을 선언했던 변수를 뒤에서 다시 선언하며 값에 !default를 사용하면 뒤에서 선언한건 적용되지 않는다.



★★★★★2. 수학 연산자 사용

- + , - , / , * , % , == , != 사용 가능.
- +,- 를 사용할때는 단위가 통일되어야 함.
- 단위가 통일되지 않은걸 사용할때는 css의 calc() 함수 사용.  -> ie9 이상부터 사용가능


★★★★★3. 내장 함수 사용
https://sass-lang.com/documentation/functions


★★★★★4. 중첩

- 부모,자식 선택자를 따로 쓰지 않고 부모 선택자 안에서 자식 선택자 스타일링이 가능하다.

ex)
.container {
    width: 100%;
    h1 {
        color: red;
    }
}

- 선택자 안에서 자기 자신을 부를땐 &를 사용. 함수의 this와 비슷한 의미.

ex)
a {
  color: black;
  &:hover {
    text-decoration: underline;
    color: gray;
  }
  &:visited {
    color: purple;
  }
}

- 중첩은 property에서도 사용이 가능하다.

ex)
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

-> css컴파일 결과로는   font-family: fantasy;  font-size: 30em;  font-weight: bold; 로 나타난다.




★★★★★5. import (불러오기) 기능

- 스타일을 여러 파일로 나누고 다른 파일에서 불러와서 사용하는 기능
- import시 확장자와 _ 는 붙이지 않아도 됨.
- 분리해서 사용하는 용도의 scss 파일 앞엔 _ 붙여야 한다.
- 최종적으로 컴파일 할 scss 파일에 분리해둔 scss를 import 하기.

ex)
@import "layout";    -> layout.scss 를 import 한다는 의미



****  @extend  와 @mixin 의 사용법    ( https://blog.naver.com/psj9102/221177093641 ) ****

★★★★★6. extend (상속)

- 특정한 선택자의 스타일을 상속할때 사용
- 미리 정의해둔 스타일 객체를 단순히 불러올때 사용
- 선택자 { @extend 상속할선택자 }  로 사용.
- placeholder selectors :   %스타일이름 {}  으로 선언해두고  선택자 { @extend %스타일이름; } 으로 사용  
- 어찌됬든 extend 보다는 mixin 사용 추천

ex)

.box{color:black;}
.box2{@extend .box;}   -> box2는 color:black; 을 똑같이 가지게 된다.


ex2)

%box { padding: 0.5em;}
.box2{ @extend %box; }


★★★★★7. mixin

- 정의해둔 스타일 객체 내에 변수 사용 가능 (인자 사용). 사용할땐 @include minin이름 .
- 선언할때는 @mixin mixin이름  , 사용할때는 @import mixin이름 을 사용한다.


ex1)

1- 선언

@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

2- 사용

h1 {
  @include headline(green, 12px);    
-> 자바스크립트로 치자면 headline 함수를 사용할때 매개변수 $color 자리에 green 인자가, 매개변수 $size 자리에 12px 인자가 들어간다는 뜻.
}


ex2) 

1- 선언

@mixin animation ($delay, $duration, $name) {
    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $name
}

@mixin keyframe ($animation_name) {
    @keyframes #{$animation_name} {     ->#{} 은 특정 문자열을 그대로 출력할때 사용
        @content;
    }
}

2- 사용

1. 먼저 keyframe을 이용해 move라는 애니메이션을 만들어 둔다.
@include keyframe (move) {
    100% {
        transform: translateX(100px);
    }0%{
        transform: translateX(0px);
    }
}

2. animation을 이용한다, 이때, move라는 애니메이션은 위에서 만든 상태.
div {
    @include animation (0s, 4s, move);
}

3- 컴파일시

@keyframes move {
    100% {
      transform: translateX(100px); }
    0% {
      transform: translateX(0px); } }
  
div {
    animation-delay: 0s;
    animation-duration: 4s;
    animation-name: move; }



ex3) media quiery에 사용

1- 선언

@mixin media ($device_width) {
    @media #{$device_width} {
        @content;
    } 
}

2- 사용

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

3- 컴파일시

.container {
  width: 900px;
}
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}




★★★★★8. 함수 (function)

- 내장 함수가 아닌 임의 함수.
- 선언할때는    @function 함수이름 (매개변수1,매개변수2){ return ( 매개변수를 사용한 작업) };
- 사용할때는   함수이름(인자1,인자2) ; 이런식으로.

ex)

1- 선언

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

2- 사용

.my-module {
  width: calc-percent(650px, 1000px);
}

3- 컴파일시

.my-module {
  width: 65%;
}


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

*** !default를 유용하게 사용하기

import용인 _font.scss 와 main.scss가 있다고 할때,

//_font.scss

$변수a {값 !default;}
$변수b {값 !default;}
$변수c {값 !default;}

selector{속성1 : $변수a ; 속성2 : $변수b ; 속성3 : 변수c}

 ------> _font.scss 파일에서 변수a, 변수b, 변수 c의 값에 !default 선언을 하고 어떤 선택자에 그 변수를 사용하는 부분까지  들어있고,


//main.scss

$변수c {값;}

@import "font";

 ------> main.scss 에서 변수c 하나만 값을 정의한 후에 _font.scss 파일을 import 했다면, 이미 값이 할당 된 변수c는 _font.scss 에 있는 !default 를 무시하고 main.scss 에 있는 값으로 컴파일 된다.



++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

*** mixin 유용하게 사용하기

- mixin 은 argument, 즉 인자를 받아올수 있다는점에서 함수랑 비슷하다.
- argument의 초기값을 설정할 수도 있다.

ex)

@mixin circle($size: 10px) {  // 인자의 초기값 설정
  width: $size;
}
.box {
  @include circle();  // 인자가 없으면 초기값을 사용한다.
}


* vendor prefix 에 mixin 사용하기

1 - 선언

@mixin vendorPrefix($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
    #{$prefix}#{$property}: $value;
  }
}

2 - 사용

.selector {@include vendorPrefix(transition, 0.5s);}  
// transition 이 $property 자리에 , 0.5s가 $value 자리에 들어간다.

3 - 컴파일

.selector {-webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;}



* opacity 에 mixin 사용하기

1 - 선언

@mixin opacity($opacity) {
  opacity: $opacity; /* All modern browsers */
  $opacityIE: $opacity * 100;
  filter: alpha(opacity=$opacityIE); /* For IE5~IE9 */
}

2 - 사용

.box {
  @include opacity(0.5);
}

3 - 컴파일

.box {
  opacity: 0.5;
  /* All modern browsers */
  filter: alpha(opacity=50);
  /* For IE5~IE9 */
}



* position에 mixin 사용하기

1 - 선언

@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {  
// null값이 argument의 초기값이다
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

2 - 사용

.box {
  @include position(absolute, $top: 10px, $left: 50%);
}

3 - 컴파일

.box {
  position: absolute;
  top: 10px;
  left: 50%;
}

 

 

일단 이정도까지 공부하고 실제로 사용하고 있는데, 솔직히 중첩으로 선택자를 쓸수 있다는것만으로도 굉장히 편해졌다. 동일하게 적용될 스타일은 기존에는 class명에 선언해두고 html에 class를 추가하는 형식이었다면 이제는 해당 선택자에 mixin만 include 하는 형식으로 하고. 여러모로 scss를 사용하기 시작한 것은 퍼블리셔로서 한층 더 발전할수 있는 계기가 된것 같다.