[css] sass - scss

sass

Syntacically Awesome StyleSheets
StyleSheet language
Compiled to CSS
효율성에 집중된 css 적용언어

sass 7-1 pattern

7폴더 1파일

폴더 - abstracts

• 변수나 함수, mixin, placeholder가 최상단

폴더 - base

• 리셋, 정규화, 타이포그래피 규칙
  reset.css >> 모든 프로젝트에 기본적으로 필요한 스타일. 브라우저가 제공하는 기본 css를 없애어
  개발자가 원하는 css만 보이도록 할 수 있다. normalize.css, reset.css라고도 하며
  검색 시 많은 보일러 플레이트 코드가 나오는데 프로젝트에 맞춰 수정하여 사용하는 것이 좋다.(사용하지 않는 태그까지 초기화 할 필요는 없다. 필요없는 코드량만 늘릴 뿐이다.
  보일러 플레이트* 변경 없이 재사용할 수 있는 저작품

-moz- 파이어폭스 대상 코드
-webkit-font-smoothing: antialiased; 크롬 브라우저가 맥 관련 브라우저에서는 폰트가 더 진하게 보이는 걸 고쳐준다.
box-sizing: border-box; 를 기본으로 넣어줄 수도 있다.

폴더 - components

• 버튼, 캐러셀, 커버, 드롭다운

폴더 - layout

• 네비게이션, 그리드 시스템, 헤더, 풋터, 사이드바, 폼

폴더 - pages

• 홈 한정 스타일, 연락처 한정 스타일

폴더 - themes

• 디폴트 테마, 관리자 테마

폴더 - vendors

• Bootstrap, JQuery UI

파일 - 메인 scss 파일
파일명에 _(언더바)가 붙는 경우 @import가 되어 사용될 것으로 파악한다.

@import

css는 아래에 올 수록(뒤에 적힐수록) 앞전 설정을 덮어씌우며 적용되기 때문에 @import 할 때도 순서가 중요하다

• 변수, mixin, reset 같은 스타일 정의에 기본이 되는 요소가 최상단.

Variables 변수

사전에 정의해 놓은 스타일을 불러다 사용하면 중복코드작성을 줄이고 유지보수에 용이하다. (한번에 수정 가능)

$h1-size: 5em;
$h1-color: red;

h1 {
  font-size: $h1-size;
  color: $h1-color;
}

@mixin

자주 쓰는 코드를 묶어둔 것. 일종의 단축키, emmet 같은 것

@mixin은 만들어두고 사용을 안하면 코드에 영향을 주지 않는다.

말줄임을 표현하는 css

@mixin ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

p {
  width: 300px;
  @include ellipsis;
}

@ mixin 으로 변수를 받을 수 있고 이를 나만의 공식처럼 만들어서 사용할 수도 있다. 이때는 내가 만든 mixin 의 변수 순서대로 알맞게 입력해줘야 적용된다.

@ mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
  background-image: url($bg-url);
  background-positon: $bg-position;
  background-size: $bg-size;
  background-color: $bg-color;
  background-repeat: no-repeat;
}

.bg {
  width: 50px;
  height:50px;
  @ include bg-img('https://img.com/test.png');
  -> ('https://img.com/test.png', center, conrain, white)로 개별설정도 가능
}

@function

함수명과 변수를 받아서 내가 원하는 재가공을 한 다음
그 값을 return하여 사용한다.

@function half-opacity($color, $opacity) {
  $color: rgba($color, $opacity);
  @return $color;
}

h1 {
  font-size: 10em;
  text-align: center;
  color: half-opacity(red, 0.5);
}