SASS ( SCSS )

쵸리·2021년 8월 3일

Sass ( Scss )

목록 보기

1/1

CSS Preprocessor 란?

SASS, SCSS, Less, Styleus 등 웹을 코딩하다보면 들어봤을법한 이름이다. 이것들은 CSS 전(예비)처리기 라고 부르는데 보통 CSS Preprocessor라고 부른다. CSS가 동작하기 전에 사용하는 기능으로 선택자 중복될때 편하게 사용할 수 있고 연산, 조건문, 반복문 등등 사용할 수 있다. 하지만 웹은 .css 확장자만 읽을 수 있기 때문에 컴파일(Compile)을 통해서 동작시킬 수 있다.

그중에서도 SASS( SCSS )를 사용하는 이유

보통 사람들 사이에서 SASS(SCSS), LESS, Styleus가 많이 언급되는데 less는 진입장벽이 비교적 낮으나 몇몇 기능에 큰 아쉬움이 있고 Styleus는 비교적 늦게 나왔기 때문에 성숙도가 떨어져 컴파일 후 사소한 버그가 있고 Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능하며 2006년부터 시작하여 가장 오래된 CSS 확장 언어며 기능도 훌륭한 이유때문이다.

SASS와 SCSS의 차이점

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위언어이다. 더 구분하기 쉬운차이는 CSS를 작성할때 중괄호 {} 와 ; 세미콜론의 유무이다.

.wrap {
  width: 100%;
  background-color: #132458;

  .inner {
    width: 1200px;
    height: 100px;
    margin: 0 auto;

    div {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover;
    }
  }
}

위가 SCSS 문법이라면 SASS 문법은

.wrap 
  width: 100%
  background-color: #132458

  .inner 
    width: 1200px
    height: 100px
    margin: 0 auto

    div 
      width: 100%
      height: 100%
      background-repeat: no-repeat
      background-position: center
      background-size: cover

이런식으로 작성한다. ( 저는 중괄호없으면 구분이 어려워서 SCSS 선호합니다. )

컴파일 방법

SASS(SCSS)는 웹에서 컴파일러없이 동작할 수 없기 때문에 전처기리로 작성 후 CSS로 컴파일해야한다.

1. SassMeister
간단한 sass(scss)를 학습을 위해 사용을 하거나 컴파일이 적용된 CSS를 확인할때 사용
https://www.sassmeister.com/

위에 탭에 있는 view sass options으로 자기 세팅에 맞게 설정한후 학습하면 된다.

2. 어플리케이션 or 터미널 방식
sass-lang.com
사이트를 열면

가 나오는데 여기서 상단 오른쪽 메뉴 install은 설치법, Learn Sass는 Sass를 어떻게 사용하는지 알려주는 곳이다.

여기서 왼쪽 Applications는 소프트웨어고 자신의 운영체제 확인하고 paid는 유료이다.

- 터미널 방식 -

오른쪽 commande Line은 명령 프롬프트 CMD를 의미한다.
명령프롬프트 방법으로 설치할라면 node.js가 설치되어 있어야 한다.

이 사진따라서 node.js 설치후에 자동 / 수동 두가지 방법으로 나뉜다.
자동 수동 sass 설치는 동일하다.
$ npm i -g sass 로 sass 설치후에
$ sass --version 으로 sass 버전확인이 되면 설치완료상태 ( PowerShell이 보안이 걸려있을 경우 해당 명령어 사용불가 )

$ sass --version 으로 sass의 버전확인이 안될경우
npm show sass version 으로 sass버전 확인할 수 있다.

이후 자동 / 수동으로 컴파일 방법이 나뉜다.

자동

index.html 파일과 index.scss파일이 있다고 가정하에

VSCode에서 이 확장팩을 설치후에 오른쪽 하단
클릭하면

두개가 만들어지는데 index.css를 index.html에 연결하면 된다.

수동

index.html 파일과 index.scss파일이 있다고 가정하에
$ sass [sass파일경로/파일명][css파일생성경로/파일명] 을 해주면 된다.
같은 경로에 있을경우는 디렉토리 경로를 생략하고
$ sass ./index.scss ./index.css 해주면

두개가 만들어지는데 index.css를 index.html에 연결하면 된다.
$ sass ./index.scss ./index.css --watch 실시간으로 컴파일

react, vue와 scss를 같이 쓰는경우는 webpack을 사용하면 된다.
https://velog.io/@chyori/webpack 참조
그 밖에도 Gulp 등등 여러 방법이 있다.

SCSS 문법

주석 ( Comment )

한줄 주석 : // 내용
여러줄 주석 : / ＊ 내용 ＊ /

데이터 종류 ( Data Types )

데이터	설명	예시
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)

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

중첩 ( Nesting )

상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

SCSS 방식

#sec3 {
  width: 100%;
  padding: 60px 0 80px;
  background-color: #434D68;
  
  .sec3_inner {
    width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    
    .sec3_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

CSS 방식

#sec3 {
  width: 100%;
  padding: 60px 0 80px;
  background-color: #434D68;
}

#sec3 .sec3_inner {
    width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

#sec3 .sec3_inner .sec3_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

상위 선택자 참조 ( Ampersand )

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다.

SCSS 방식

.bar_content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  margin-bottom: 4px;
  
  &:last-of-type {
    margin-bottom: 0;
  }
}

CSS 방식

.bar_content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  margin-bottom: 4px;
}
  
.bar_content:last-of-type {
    margin-bottom: 0;
}

중첩된 속성

font-, background-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들 사용할 때

SCSS 방식

.view {
	font: {
    	size: 11px;
        weight: 300;
        family: sans-serif;
    }
}

CSS 방식

.view {
	font-size: 11px;
    font-weight: 300;
    font-family: sans-serif;
}

변수 ( Variables )

반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $를 붙인다. JS처럼 전역변수와 지역변수로 나뉜다. ( $변수명: 속성값; ) 전역변수로 사용할 경우 .scss파일 최상단에 선언해주고 지역변수로 사용할경우 부모에다가 선언해서 사용해준다. 지역변수일경우는 선언된 블록 { } 내에서만 유효범위를 가진다. 지역변수도 뒤에 !global 플래그를 사용하면 전역으로 사용할 수 있다.

$mainColor: yellow; // 전역변수 어디에서나 사용가능

.wrap {
	$color: red; // 지역변수 { } 안에서만 사용가능
    
    .view {
    	color: $color; 
    }
}

재활용 ( Mixins )

Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능이다. 선언할 때 @mixin 사용할 때 @include하면 된다. @mixin 안에서도 선택자를 포함 가능하고 &도 사용 가능하다.

선언 ( @mixin )

@mixin 믹스인이름 {
  공통적으로 들어갈 css;
}

@mixin divStyle {
  width: 600px;
  height: 300px;
  border: 1px solid #000;
  margin: 0 auto;
}

사용 ( @include )

@include 믹스인이름;

div {
  @include divstyle;
}

인수 ( Arguments )

@mixin도 함수처럼 매개변수와 인수를 사용할 수 있다. 예를 들어 @mixin을 사용하되 어떠한 한가지에 변화를 주고 사용할 때 @mixin에다가 매개변수를 만들어 @include시에 인자를 넣어서 사용한다. ( 매개변수 여러개도 사용가능 )

@mixin border($color) {
  border: 1px solid $color;
}

div {
  @include border(red);
}

이렇게 사용하면 1px solid는 그대로 들어가고 색상만 자기가 원하는대로 사용가능하다.

＃{} ( 문자 보간 )

＃{}을 이용해서 코드의 어디든지 변수 값을 넣을 수 있다. 변수를 만들어 클래스명에도 넣을 수 있고 또 border-right에서 border의 방향만 바꿀때 또는 url같은 곳 등등 사용이 많이 가능하다.

<div class="box">test</div>

$bx : box;

div.#{$bx} {
  border: 1px solid #000;
}

응용

<div class="box">test</div>
<p>text</p>

@mixin bx($position,$wid,$color) {
  border-#{$position}: $wid solid $color;
}

div {
  @include bx(right, 2px, red)
}

p {
  @include bx(bottom, 5px, grey)
}

확장 ( Extend )

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우와 @mixin처럼 사용가능 하나 @mixin에 변수를 넣어 유연하게 사용하지 못 하고 그냥 만든걸 고정으로 넣을 때 사용한다. 선언할 때 %사용할이름 사용할 때 @extend %사용할이름

<div class="a">abc</div>
<div class="b">sdf</div>
<div class="c">654654</div>

%name { 
  font-size: 14px;
  color: blue;
}

.a {
  @extend %name;
}

@mixin 처럼 선언하고 사용하는 경우

.a {
  font-size: 14px;
  color: blue;
}

.b {
  @extend .a;

특정 선택자가 다른 선택자의 모든 스타일을 가질 때

가져오기 ( Import )

@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다 또한 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다.

@import 파일경로 './src/index.scss' ;

연산 ( Operations )

Sass는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 게산을 하거나 정해진 값을 나눠서 작성할 경우 유용하다.

1. 산술 연산자
＋ : 더하기
－ : 빼기
× : 곱하기 ( 하나 이상의 값이 반드시 숫자 )
/ : 나누기 ( 오른쪽 값이 반드시 숫자 )
% : 나머지

2. 비교 연산자
== : 동등
!= : 부등
< : 대소 / 보다 작은
＞ : 대소 / 보다 큰
<= : 대소 및 동등 / 보다 작거나 같은
＞= : 대소 및 동등 / 보다 크거나 같은

3. 논리 연산자 ( 조건문에서 사용 된다. )
and : 그리고
or : 또는
not : 부정

조건과 반복

조건 ( if )

조건의 값 ( true, false )에 따라 두 개의 표현식 중 하나만 반환한다. 조건의 값이 true이면 표현식1을 조건의 값이 false이면 표현식2를 실행한다.

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

삼항 연산자와 비슷하다

<a href="" class="btn">버튼</a>

@mixin btn_radius($h, $radius:true) {
  padding: 0 20px;
  height: $h;
  line-height: $h;
  text-align: center;
  background-color: #000;
  color: #fff;
  
  @if $radius {
    border-radius: $h / 2;
  }
}

.btn {
  @include btn_radius(30px, true);
}

CSS에 border-radius가 true 테두리를 둥그렇게 해주고 false라면 테두리를 둥그렇지 않게 한다. @if 아래에 @else-if와 @else를 넣어서 다른 조건식도 만들어 줄 수 있다. 조건문에 ()는 생략가능하다. 조건에는 and, or, not을 사용할 수 있다.

반복 ( for )

@for는 스타일을 반복적으로 출력한다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다. 두 형식은 종료 조건이 해석되는 방식이 다르다. ( 변수는 JS와 비슷하게 $i를 사용 )

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

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

<ol class="list">
  <li class="ico1">텍스트1</li>
  <li class="ico1">텍스트2</li>
  <li class="ico1">텍스트3</li>
  <li class="ico1">텍스트4</li>
</ol>

각각의 list에 icon을 각각 다르게 넣는다고 할때 원래대로의 CSS라면

.list li.ico1 {
  background-image: url('ico1.png');
}

.list li.ico2 {
  background-image: url('ico2.png');
}

.list li.ico3 {
  background-image: url('ico3.png');
}

.list li.ico4 {
  background-image: url('ico4.png');
}

이렇게 4번을 써줘야 되는데 이걸 SCSS로 하면

@for $i from to 5 {
  .list li.ico#{$i} {
    background-image: url('ico#{$i}.png');
  }
}

이렇게 해주면 더욱 코드를 간결하게 짤수있다.
각각 list에 가상 클래스를 사용할때도 nth-child(#{$i}):before 하면 간결하게 작성가능하다.

반복 ( each )

@each는 List와 Map 데이터를 반복할 때 사용한다.
JS의 for in문과 유사하다.

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

<h1 class="ico_book">제목1</h1>
<h2 class="ico_zoom">제목2</h2>
<h3 class="ico_phone">제목3</h3>

@each $var in book, zoom, phone {
  .ico_#{$var} {
    background: url('images/#{$var}.gif) no-repeat;
  }
}

또는 JS에서의 Object타입과 비슷하게 해서 사용하기도 한다.

$heading : (
  h1: 30px,
  h2: 20px,
  h3: 15px
);

@each $ele, #fs in $heading {
  #{$ele} {
    font-size: $fs;
  }
}

for와 each의 차이점 for는 특정한 수를 반복을 하고 each는 특정한 변수명을 대입해서 반복한다.

함수 ( Function )

자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다. Mixin은 지정한 스타일(Style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return으로 반환할 때 사용한다. 선언할 때 @function 함수이름 ($매개변수) 사용할 떄 함수이름(인수)

@function 함수이름 ($매개변수) {
  @return 값

함수이름(인수)

예시

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

.box_group {
  /* 총 너비 */
  width: 980px;
}
.box_group .box1 {
  /* 총 너비의 약 8.3% */
  width: 81.66667px;
}
.box_group .box2 {
  /* 총 너비의 약 66.7% */
  width: 653.33333px;
}
.box_group .box3 {
  /* 총 너비의 25% */
  width: 245px;
}

※ 내가만든 함수와 sass 내장 함수의 이름이 충돌할 수 있기 때문에 별도의 접두어를 붙여주는게 좋다. ( 따로 Mixin 처럼 @include 같은 지시어 없이 사용하기 때문 ) ※

그 외에도 SASS 자체 내장함수들이 있다.

출처 - https://heropy.blog/2018/01/31/sass/
https://www.youtube.com/watch?v=jdG5OFX7Aic&list=PL_6yF2upGJYtKji9Wqrb3NoaowD5yTdXg&index=1

쵸리

SASS ( SCSS )

Sass ( Scss )

CSS Preprocessor 란?

그중에서도 SASS( SCSS )를 사용하는 이유

SASS와 SCSS의 차이점

위가 SCSS 문법이라면 SASS 문법은

이런식으로 작성한다. ( 저는 중괄호없으면 구분이 어려워서 SCSS 선호합니다. )

컴파일 방법

SASS(SCSS)는 웹에서 컴파일러없이 동작할 수 없기 때문에 전처기리로 작성 후 CSS로 컴파일해야한다.

자동

수동

SCSS 문법

주석 ( Comment )

데이터 종류 ( Data Types )

중첩 ( Nesting )

상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

SCSS 방식

CSS 방식

상위 선택자 참조 ( Ampersand )

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다.

SCSS 방식

CSS 방식

중첩된 속성

font-, background-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들 사용할 때

SCSS 방식

CSS 방식

변수 ( Variables )

재활용 ( Mixins )

Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능이다. 선언할 때 @mixin 사용할 때 @include하면 된다. @mixin 안에서도 선택자를 포함 가능하고 &도 사용 가능하다.

선언 ( @mixin )

사용 ( @include )

인수 ( Arguments )

@mixin도 함수처럼 매개변수와 인수를 사용할 수 있다. 예를 들어 @mixin을 사용하되 어떠한 한가지에 변화를 주고 사용할 때 @mixin에다가 매개변수를 만들어 @include시에 인자를 넣어서 사용한다. ( 매개변수 여러개도 사용가능 )

이렇게 사용하면 1px solid는 그대로 들어가고 색상만 자기가 원하는대로 사용가능하다.

＃{} ( 문자 보간 )

＃{}을 이용해서 코드의 어디든지 변수 값을 넣을 수 있다. 변수를 만들어 클래스명에도 넣을 수 있고 또 border-right에서 border의 방향만 바꿀때 또는 url같은 곳 등등 사용이 많이 가능하다.

응용

확장 ( Extend )

@mixin 처럼 선언하고 사용하는 경우

특정 선택자가 다른 선택자의 모든 스타일을 가질 때

가져오기 ( Import )

@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다 또한 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다.

연산 ( Operations )

Sass는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 게산을 하거나 정해진 값을 나눠서 작성할 경우 유용하다.

조건과 반복

조건 ( if )

반복 ( for )

반복 ( each )

함수 ( Function )

예시

※ 내가만든 함수와 sass 내장 함수의 이름이 충돌할 수 있기 때문에 별도의 접두어를 붙여주는게 좋다. ( 따로 Mixin 처럼 @include 같은 지시어 없이 사용하기 때문 ) ※

0개의 댓글