매일 한 페이지씩 읽기. Bootstrap, Sass 편
짧은 내용이니 하나로 묶는다.
Bootstrap
사실 앞으로도 다룰일이 있을까 싶어서 슬쩍 읽기만 했다.
단순한 디자인, 반응형을 우선해서 빠르게 프로토타입을 뽑아보고 싶다면 사용할만 할 듯.
다만 부트스트랩의 규칙에 얽매여야하기에 자유로운 디자인이 불가능하다는 단점때문에 요즘처럼 ux, ui가 중요하고
그로인해 반응형보다 적응형으로 돌아가는 추세에서 꼭 배워둘 필요는 없을 것 같다. 필요해지면 배워도 충분.
Sass
CSS 전처리기
-
변수 사용
-
조건문, 반복문
-
import
-
Nesting
-
Mixin
-
Extend / Inheritance
-
CSS보다 심플하게 구조화해서 표현
-
CSS 스킬 레벨 차이가 있는 동료와 구문 수준 평준화 가능
-
Mixin 등으로 CSS 유지보수 편의성 증가
사용하기 위해
- 브라우저는 Sass 문법을 알지 못 하기 때문에 CSS로 트랜스파일링 해줘야 함 (주로 webpack으로)
- SASS / SCSS 문법에 차이가 있으니 주의
SassScript
- css에서는 불가능한 연산, 변수, 함수 등을 타 프로그래밍 언어처럼 사용할 수 있게 확장한 기능을 제공한다.
7가지 데이터 타입
- 숫자형 : 1.2, 13, 10px
- 문자열 : 따옴표로 감싼 경우와 그렇지 않은 경우. 둘 다 가능
- 컬러 : blue, #04a3f9, rgba(255,10,53,0.5)
- boolean : true, false
- null : 프로퍼티 값이 null이면 해당 룰셋은 트랜스파일링되지 않음
- list : shorthand처럼 공백 또는 콤마 구분된 값의 list
- map : 객체와 유사하게 map-get 함수를 사용하여 원하는 값 추출 가능
변수
- $name : value 로 선언한다. 문자열, 숫자, 컬러 등
- 사용할 때도 $name으로 $를 붙여야 함.
- 블록 스코프가 적용된다.
- 뒤에 !global을 붙이면 지역에서 선언하더라도 전역변수가 된다.
연산자
- / % == !=
-
변수에 다른 단위의 값을 연산해도 에러없이 수행된다.
-
단, em, rem vw, vw와 같은 '브라우저만 아는 상대적인 값'은 동일한 단위가 아니면 연산할 수 없다. (10px + 10em은 불가능하지만 10em + 20em은 가능하다)
-
CSS3의 calc 함수를 사용하면 절대값 + 상대값 계산이 가능하다.
-
/ 의 경우 css에서는 나누기가 아니라 값을 구분하는 의미를 같는다.
-
그렇기 때문에 Sass에서 /로 연산을 하기 위해서는 변수, 괄호내, 다른 연산의 일부로써만 사용 가능하다
-
변수를 CSS의 /와 함께 사용하려면 ${}를 사용한다
-
컬러값도 연산이 가능하다.
-
다만 rgba는 불가능하며 alpha는 opacify, transparentize 함수로 가능하다
-
문자열은 자바스크립트와 같은 연산이 가능하다
-
논리연산자도 사용 가능
-
리스트를 위한 연산자는 별도 제공 되지 않지만 리스트 함수를 사용하여 필요한 처리 수행 가능
interpolation:#{}
- 변수의 값을 문자열 그대로 삽입
- 연산의 대상으로 취급되지 않음
- JS 템플릿 리터럴의 ${}와 비슷한 역할인듯
Ampersand(&)
- 부모요소를 참조하는 셀렉터
!default
- 할당되지 않은 변수의 초기값을 설정
- import 방식에서 유용함. 약간 상속과 오버라이딩이랑 비슷함.
Nesting
- CSS는 후손 셀렉터의 경우 부모를 앞에 써야하지만 Sass는 내부에 중첩해서 작성함으로써 간단하게 쓸 수 있다. HTML의 구조를 반영한 CSS 작성 가능
- 너무 깊은 nesting은 가독성을 떨어뜨리고 셀렉터를 복잡하게 만든다
- 부모요소 참조가 필요한 경우 &를 사용함.
- 프로퍼티에서도 nesting 가능
import
- CSS도 기능에 따라 모듈화를 하면 가독성도 좋고 유지보수도 편리하다.
- Sass는 CSS보다 편리한 import를 제공한다. ( 확장자 생략, 여러개 파일 한번에 import, 변수를 사용해 문자열을 생성하여 import 가능 )
- 여러 파일로 분할하는 것을 partial이라 하며, Sass파일앞에 underscore(_)를 붙인다. (_reset.scss, _moduels.scss, _print.scss). 생략하면 에러 발생.
- 이 partial 파일은 import할 때 앞에 _를 생략할 수 있다.
- 앞에 _를 붙인 파일은 import시에 CSS로 트랜스파일링 되지 않는다.
- 최신 버전에는 _를 붙이지 않아도 에러 발생 안 함. @import 대신 @use 사용 가능
extend
- 기존 스타일을 상속하고자 하는 경우 사용.
- @extend를 @media 블록과 같이 사용하면 제대로 동작 하지 않음.
- 가급적 Mixin을 사용하는 것을 추천.
- placeholder selector, 재사용 가능한 @extend 전용 셀렉터. % 사용
조건과 반복
- JS의 삼항 연산자와 유사하게 동작 if(condition, if_true, if_false)
- @for $i from 1 through 3 {}
- @each $animal in puma, sea-slug, egrt, salamadner {}
- @while $i > 0 {}
Mixin
- Sass의 매우 유용한 기능. 중복 기술을 방지하기 위해 사용 빈도가 높은 마크업을 사전에 정의해서 필요할 때마다 불러사용한다 (JS의 함수같은 느낌)
-@ extend와 유사하지만 프로그래밍 언어의 함수처럼 인자를 전달받을 수 있다는 차이가 있음
- @mixin으로 선언하고, @include로 호출한다
- 디폴트 파라미터도 사용 가능 @mixin circle($size: 10px){}
Function
-
mixin과 유사하나 반환값에 차이가 있음.
-
mixin은 style markup을 반환하고, function은 @return directive를 통해 '값'을 반환한다.
Sass가 제공하는 기본 내장 함수
- Number Functions (%, 올림, 내림, 반올림, 절대값)
- Introspection Functions (데이터 타입, 데이터 unit(단위) 등)
- String Functions (따옴표 추가, 제거)
- List Functions (리스트 요소 수, n번째 요소, 마지막 요소, 리스트 결합)
- Map Functions (key로 value 얻기)
- Color Functions (hue, saturation, lightness, opacity, alpha, tint&shade 변경)
webpack + Sass
-
wepback, webpack-cli, css-loader, sass, sass-loader, mini-css-extract-plugin을 설치해야한다.
-
script에 webpack -w를 실행하는 명령어를 등록해야하고, 주로 build로 한다.
-
루트 폴더에 webpack.config.js를 생성해서 entry, output, plugin, module(안에 rules)등을 설정한다. 자세한 내용은 본문 참조.
-
npm run build를 실행한다!
