Sass 정리

 

SASS 가 무엇일까?

CSS의 단점을 보완하기 위해 만든 CSS 전처리기 , 언어

햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어

 

 

sass 설치방법

1. Node.js 설치 ( 안정화 버전 )
   (CMD 창을 열어서 node - v 입력으로 설치 여부 확인 가능)
   
2. CMD 창에 npm install sass-g 입력
   ( sass --version 입력으로 설치 여부 확인 가능)

설치 후 오류 해결방법

컴파일 과정에서 오류 났을 때 해결방법 ( 컴파일 : 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정 )

 

오류 1. 보안오류 ( windows 기준)

해결방법 :

1. 관리자 권한으로 windows powershell 실행 

2. 커맨드 창에 Get-ExecutionPolicy 명령어 입력 후 결괏값이 RemoteSigned 가 아니라면 

3. Set-ExecutionPolicy RemoteSigned 입력 

 RemoteSigned  : 제안 해제

 Restricted : 스크립트 코드 제안

 

오류2. 디렉토리~~ 찾을 수가 없다고 뜨는 경우

해결방법 : 터미널 창 경로에 한글이 있으면 인코딩 과정 오류! ( 폴더명, 파일명 등 ) 한글 - > 영문으로 변경

 

---

 

Sass -- watch 사용해보기 

(사용 프로그램 : visual studio )

 

scss 파일과 css 파일 연결하는 방법

터미널 창을 열어서 작성

sass --watch scss/style.scss css/style.css

style.css / style.css.map 두 가지 생성

style.css.map :

크롬을 열었을 때 style.css를 읽지만 scss 파일에 코드 줄이 활성화할 수 있게 해주는 파일

 

 

 

sass에서 사용할 수 있는 기능, 문법

@import

추가로 scss 를 만들고 기존 style.scss랑 연동하는 방법

style.scss 상단에 구글 폰트 추가하는 방법과 동일 

 

ex ) _reset.scss를 추가로 만들었을 경우

/*_reset.scss 만든 후 scss파일에 추가*/
@charset "UTF-8";
@import"reset";

= _reset.scss  + style.scss 가 합쳐진 결과물이 style.css에 같이 출력된다.

 

실무에서 활용하기 좋은 팁 _reset.scss 처럼 파일명 앞에  _  를 붙이면 CSS로 컴파일될 때  _ 로 시작하는 파일명의 파일은 컴파일되지 않습니다. 주 파일(style.scss)에 적용되지만 css 파일로 컴파일이 되지 않기 때문에 관리 하기 편해짐!

 

NESTING (네스팅)

중첩이라는 뜻

기존 css 방식

.itme:hover { background : blue;}
.itme .a { border:1px solid #000; }
.itme .span { border:1px solid pink; }
.itme > div { padding: 5px; }

article { width : 100px; height: 100px;}
article .inner {  width : 100%; height: 100%;}
article .inner > div {  width : 100%; height: 100%; border: 1px solid #blue;}
/*기존 css를 작성하는 방법*/

위에 내용을 sass nesting 으로 작성

↓

.itme {
 .a { border:1px solid #000; }
 .span { border:1px solid pink; }
 &:hover {background : blue;}
}

article { width : 100px; height: 100px;
 .inner {  width : 100%; height: 100%;
  > div {  width : 100%; height: 100%; border: 1px solid #blue;}
 }
}

/*sass css 네스팅 방식으로 작성하는 방법*/

 

변수 이용

여러 개가 같은 속성일 경우 변수로 작성해서 하나만 수정하면 전부 수정 가능  ( 유지보수 할 때 유용)

.text_box {
 background: #3566a1; 
 color : #000;
 width:100px;
 height:50px;
}

.img_box {
 background: #3566a1; 
 color : #000;
 width: 120px;
 height: 60px;
}

해당 CSS 를 변수를 활용해서 작성

유지보수 할 때 유용

↓

/*변수 작성*/
$bgcolor01 : #3566a1; 
$ftcolor01 : #000;

/*활용*/
.text_box {
 background: $bgcolor01;
 color : $ftcolor01;
 width:100px;
 height:50px;
}

.img_box {
 background: $bgcolor01;
 color : $ftcolor01;
 width: 120px;
 height: 60px;
}

 

MIXIN

@mixin을 정의해 만든 CSS 스타일을 @include 이용하여 참조해서 재사용할 수 있습니다.

mixin은 함수처럼 인수를 가질 수 있습니다

 

정의하기 : @mixin 이름 ( ) { 스타일  내용}

호출하기 :  @include 이름 ( )

 

기본 사용 예제

1. 정의하기

/*정의하기*/
@mixin btnstyle01 (){
/*스타일 내용*/
 width: 100px;
 height: 50px;
 border: 3px solid #759fd2;
 color: #759fd2;

 &:hover {
  border: 3px solid #fff;
  color: #fff;
  background: #759fd2;
 }
}
/*마우스 hover시 컬러가 바뀌는 상자 모양*/

2. 호출하기

/*사용방법, 호출하기*/
div {
 btn01 {
  @include btnstyle01();
 }
}

p {
 @include btnstyle01();
}

---

mixin 인수 활용

정의하기 : @mixin 이름 ( 매개변수 : 딜폴트 값 ) { 스타일 내용 }

호출하기 :  @include 이름 ( 인수 )

매개변수란 함수를 정의할 때 사용되는 변수를 의미합니다.

그렇다면 인수는 무엇일까요? 인수는 함수가 호출될 때 매개변수에 실제로 담기는 값을 의미합니다. 

 

인수 사용 예제

/*정의하기*/
@mixin widtest ($wid:100px){
width: $wid;
background: pink;
}

/*호출하기*/
div {
    @include widtest (500px);
}

/*매개변수 여러 개 사용*/
@mixin border  ($px, $style , $color){
    border: $px $style $color;
}

div {
    @include border (3px, solid, pink);
}

 

조건문, 반복문 (@if / @for / @each / @while)