SASS(SCSS)

송송·2020년 7월 20일
scssstudy생활코딩패캠
1

Study

목록 보기
1/3
post-thumbnail

01) Sass(scss)

css 전처리기

전처리기를 쓰는 이유 :

css를 더욱 더 쉽게 작성하고 싶은데 브라우저상에서는 css만 돌아가기 때문에 전처리기가 필요

Sass 특징 :

여러 전처리기 중 Sass가 많이 쓰임
오래돼고 성숙도 높음. 보수적인 작업물에 추천

Sass vs SCSS :

내용은 동일하나 작성하는 문법(중괄호/세미콜론)에 약간 차이가 있음.
믹스인(재사용 기능) 지시어 차이

02) 컴파일러 종류

01 sassMeister

SassMeister

02 parcel

간단한 설치 및 사용법

node.js / npm사용환경 세팅 해두어야 사용 가능

03) parcel을 이용한 SCSS 실습 환경 갖추기

단순히 SCSS 연습이 필요한 거라면 사스마이스터나 코드펜 이용하는 게 더 편한 것 같아요 😂

01 node.js 설치

생활코딩 참조 이해 안되면 강의 참고하세요~
Node.js - 설치 - 생활코딩

node.js 홈페이지로 가서 node.js 설치
node.js 홈페이지

다운로드 받은 실행파일을 눌러 설치

※node.js 설치 확인 방법

  • 윈도우 + R 키를 눌러 실행 창을 열고 cmd입력후 확인버튼 누르기

  • cmd 창에서 명령어를 이용해 내가 원하는 폴더로 이동
    ex) cd C:\Users\USER\Desktop\scss

  • node 를 치면
    Welcome to Node.js v12.18.2.
    등의 node.js 현재 버전을 알려주는데 설치가 된 것을 확인 가능
    ctrl+C를 누르면 node를 끝내고 cmd로 나올 수 있다.

02 vs 코드 설치

Visual Studio Code
위 사이트에서 다운로드 받아서 설치

※한글로 변경하려면 다음 사이트 참조해서 변경 가능

링크텍스트

03 프로젝트 폴더 만들기

폴더 만들고 file -> open folder

04 parcel 설치

  • vs 코드 실행 후 Terminal -> New Terminal 실행
  • 하단에 뜨는 터미널 창에서 현재 작업중인 프로젝트 폴더가 나오는지 확인
  • 확인된다면 npm install -D parcel-bundler 입력
  • 뭔가 막 설치된다면 성공

05 html 파일 만들기

index.html파일과 scss 파일 작성
html 파일 헤더에 <link rel="stylesheet" href="main.scss">
scss 파일을 다음과 같이 링크로 걸어줌

06 parcel 컴파일 하기

터미널 창에서 npx parcel index.html 입력하면 바로 아랫줄에 Server running at http://localhost:1234 다음과 같이 나올텐데 웹브라우저 주소표시줄에 위 주소를 입력해서 작성한 내용이 나오면 성공

~이렇게 하면 설치는 끝~

GitHub에 연결시켜서 자동으로 페이지가 나오게끔 만들어놓긴 했으나, 연습에서 쓰기엔 귀찮은 부분이 있어(파일이 없으면 parcel에서 오류가 나서 제대로 동작이 안된다던가, 컴파일 하고 결과물 확인이 불편하다던가...) 이하는 코드펜으로 진행하겠읍니다.

04) SCSS 문법

01. 데이터 종류

  • number : 단위가 붙을 수도 있고 없을 수도 있음
  • string : 따옴표 유무 있음
  • colors : 색상이름(문자지만 색상), 헥스 코드, rgba 등등
  • Booleans : 참/거짓
  • Nulls : 아무것도 없음, Null css속성으로 쓰면 컴파일 하지 않는다.
  • Lists : 특정 데이터들이 공백이나 쉼표로 구분되어 있는 목록 (배열과 같은 개념)(a,b,c)/a b 괄호가 있거나 없다
  • Maps : 자바 객체(obj)와 유사 (a:1, b:2, c:3)괄호가 반드시 있어야 인식에 문제가 없음

02. 중첩 기능

  • 선택자를 동일하게 계속 작성하는 것을 방지
  • & 상위 선택자 참조 익숙해지면 아주 편리한 방법! 가상 클래스 선택자 선택시에도, 이름이 비슷한 클래스에 이용 가능
  • @at-root 중첩 벗어나기
  • 변수는 자기가 선언된 중괄호 안에서만 사용할 수 있음. 변수가 정의된 중괄호 밖에서 해당 변수를 사용하고 싶을 때 사용할 수 있다.
  • 속성 중첩 기능 -을 이용해 개별 속성이 추가되는 경우(=동일한 네임 스페이스를 갖는 경우) 중괄호로 묶어서 표현 가능

배우긴 하는데 이걸 어떻게 써먹어야할 지 잘 모르겠네.
변수를 어떨 때 지정해야 요긴하게 쓸 수 있을까?

03. 변수

  • $변수이름 : 속성값;
  • 변수 유효범위: 변수는 선언한 중괄호 내부에서만 사용가능
  • 변수 재할당 : 변수를 변수 안에 할당할 수 있음
  • 변수 전역설정 : !global플래그 이용하여 유효범위를 넘어서서 전역 변수로 지정 가능 기존 전역 변수를 새로운 값으로 할당할 때 이용 가능
  • 같은 이름의 변수를 범위 내에 새로 지정하면 유효범위 내에서는 해당 변수가 사용 되지만 그 밖에서는 적용되지 않음.
  • 초기값 설정 : !default플래그 사용, 할당되어 있는 변수가 있다면 적용되지 않음. 부트스트랩같은 라이브러리에서 사용자 작성 변수를 라이브러리 보다 우선순위로 만들어주기 위해서 사용됨.
  • 문자 보간 : #{변수 사용가능 영역} 따옴표 안에서 변수사용하고 싶을때

04. 가져오기

  • import 규칙 css와 같이 사용하기 떄문에 sass와 css 구분 필요
    • css : @import url('경로');
    • scss : @import "경로";
      이렇게 문법이 서로 다른데 css로 불러들이고 싶다면?
      • 확장자가.css인 경우, 파일 이름이 http://로 시작하는 경우
      • url()이 붙었을 경우
      • 미디어쿼리 규칙이 있는 경우
  • 위와 같은 상황을 컴파일러가 파악 후 적절하게 형태를 바꾸거나 혹은 입력한 그대로 css로 변환 된다.
  • 여러 파일 가져오기
    • @import "header", "footer"; 상대경로 .scss 확장자 생략
  • 파일 분할
    • 여러개의 scss로 나눠 작성해도 css로 컴파일 시 하나의 css로 묶어 컴파일 가능
    • _header.scss -> header.css 컴파일 하지 않으므로 연결할 scss에 @import를 이용해 다른 scss를 모두 모은 후 다른 파일은 css로 컴파일 되지 않게
      _를 붙이지 않아도 컴파일러 설정에 따라 해당 기능 사용 가능하다

05. 연산

  • 숫자
    • 10px*10px->error 10px*10 -> 100px
    • 곱하거나 나눌 때 하나 이상(보통 오른쪽 숫자)은 단위가 없어야한다.
    • /기호가 나누기 기호가 아니라 css 구분기호로 오인될 가능성 있음
    • 변수 할당해서 계산, 괄호를 넣어 연산, 다른 연산과 같이 사용하면 나누기로 인식
  • 문자
    • +기호 이용
    • 첫번째 연산자의 따옴표 유무에 따라 결과값 따옴표가 연산됨
  • 색상
    • 헥스코드 : #123456 + #123456 헥스코드 2자리씩 끊어서 서로 더해짐
    • rgba : 알파부분이 동일해야 연산 가능
    • alpha값(투명도) 연산 함수 : opacify(색상값, 숫자만큼 불투명하게);, transparentize(색상값, 숫자만큼 투명하게);
  • 논리(불리언)
    • if 조건문에서 사용 조건만족하지 않으면 아예 컴파일 되지 않는다.
    • @if not($w > 50px) { 적용하고 싶은 결과 }

06. 믹스인&인클루드

정의 그룹을 작성해놓고(믹스인) 정의해놓은 그룹을 불러오는 것(인클루드)을 의미

SCSS와 SASS 문법이 많이 다르네

  • 매개변수와 인수
@mixin size ($w:100px, $h:100px) {
//$w:100px $h:100px 매개변수 기본값 지정 지정할 필요가 없으면 소괄호 없어도 무방
    width: $w;
    height:$h;
    
    &::after {
    conent:"";
    //인클루드 될 상위 요소 참조도 가능
    }
    span.icon {
    color:red;
    // 인클루드 되는 곳의 자식 요소 제어 가능
    }
}

.box1 {
	@include size(100px, 100px);
}

.box2 {
	@include size;
}//1과 2 동일한 결과

.box3 {
	@include size(100px, 200px);
}
.box4 {
	@include size($h:200px);
    //매개변수와 인수는 순서대로 짝지어져있기 때문에
    //인수를 하나만 쓰고 싶다면 매개변수의 이름을 앞에 명시한다 (키워드 인수)
} //3과 4 동일한 결과

동일한 내용을 불러오지만 매개변수(parameters)와 전달인수(인자 arguments)를 이용해 필요에 따라 수치를 바꾸는 것도 가능

  • 가변인수
@mixin var ($w, $h, $bg ) {
    width:$w;
    height:$h;
    background:$bg;
}

.box {
	@include var (1,2,3,4,5,6); //순서대로 w, h, bg, bg, bg, bg
}
profile
송송
디자인을 이해하는 퍼블리셔
다음 포스트

Front-end Roadmap

0개의 댓글