Poiemaweb 읽기 - Bootstrap, Sass

jjunyjjuny·2021년 3월 29일
0

매일매일

목록 보기
4/5
post-thumbnail

매일 한 페이지씩 읽기. 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를 실행한다!

profile
기억보단 기록을 / TIL 전용 => https://velog.io/@jjuny546

관심 있을 만한 포스트

0개의 댓글