Sass 시스템 구축 및 Apple 사이트 구현

date

Jan 18, 2023

slug

sass

author

status

Public

1. What is Sass

Sass is a stylesheet language that’s compiled to CSS

Sass는 CSS로 컴파일 해주는 스타일시트 언어이다.

1) 스타일시트 언어 ⇒ CSS를 보다 더 쉽게 사용 (반복을 줄인다)

2) CSS로 컴파일 ⇒ 해당 파일을 CSS로 컴파일 해준다.

Sass라는 것을 이용하면 개별적이고, 반복적으로 사용해야하는 css를 프로그래밍 하듯이 작성할 수 있는 라이브러리이다. 이를 전처리를 통해 css로 변환해서 웹에서 인식할 수 있게 하는 것이구나

1-1) Sass 컴파일러 설치 및 적용방법

npm install --save-dev sass sass-loader

node-sass? sass? 뭐가 다르지?(Sass 컴파일러의 역사)

flowchart TD
    RubySass --> LibSass/node-sass -->DartSass/sass

sass는 처음 시작한게 2006년 Ruby로 구현된 Ruby Sass가 시작되었다. 이후 루비언어외의 다양한 언어에서 사용될 수 있도록 LibSass가 만들어졌고, 이를 node와 함께 사용할 수 있도록 node-sass가 만들어짐.

그러나 node.js 버전에 대한 의존성이 심해서 컴파일시 에러가 발생하거나, 새로운 문법이 나와서 적용할 때 sass와 node를 같이 버전 업데이트를 해야하는 경우가 발생했다.

그래서 이를 보완하기 위해서 Dart Sass가 탄생되었고, 현재는 공식문서에서 Dart Sass 쓸 것을 권장한다.

Dart Sass를 설치할 때는 그냥 sass를 설치하는 것이다.

+) 현재 LibSass(node-sass)는 sass 공식 팀에서는 업데이트를 안하고, 공식문서에서도 Dart Sass를 쓸 것을 권장한다.

sass를 설치하면 이제 파일을 생성하면 된다. 파일을 생성할 때는 [파일명].scss로 만들면 된다.

분명 sass인데 파일명은 .scss라고?

sass에는 전처리기라는 의미도 있지만, sass를 실행하는 syntax 또한 sass라고 말함. 그래서 sass 문법은 아래와 같이 들여쓰기를 통한 문법으로 실행된다.

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

사람들은 위의 구문을 좀 더 css 스럽게 바꾸기 위해서 Sassy CSS를 의미하는 SCSS라는 CSS 친화적인 구문을 제공하기 시작했다. css 친화적인 구문이란, 중괄호{} 와 세미콜론 ; 으로 구분하는 것이다.

scss를 사용하면, 아래처럼 sass의 장점을 살리면서 css처럼 표현하는 것이 가능해진다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

1-2) Sass로 컴파일하는 방법

터미널에서 직접 컴파일해주기

sass를 컴파일하기 위해서는 —watch를 하면 특정 sass 파일을 css로 변화함. 그리고 해당 sass 파일이 변화할 때마다 css로 계속 컴파일 해주는 역할을 하고 있다.

// style.scss -> style.css로 컴파일
sass style.scss style.css

// sass의 --watch 기능을 활용한 컴파일
sass --watch input.scss output.css

위에 찍히는 .map이 뭐지?

.map은 source map이라고 해서 컴파일된 css 파일의 경로를 볼 수 있도록 설정하는 기능이다.

만약 해당 기능을 사용하고 싶지 않다면 터미널에서 sass 명령어를 통해 해제할 수 있다.

sass --no-source-map style.scss style.css

Vue에서 Sass 사용하기

그러나, 우리의 친절한 Vue CLI는 Sass를 설치하고, style 태그에 lang 속성을 지정해주면 자동으로 컴파일을 해준다.

<style lang = "scss">
 @import "@/asstes/scss/파일명";
</style>

Vue에서 Sass-loader를 통한 파일 전역 Import

loaderOptions: {
			sass: {
				additionalData: `
					@import "@/assets/scss/index.scss";
				`,
			},
		},

sass-loader를 사용하게 되면 Sass 파일을 매번 Import 하지 않고 전역적으로 사용할 수 있다.

vue.config.js 파일에서 additionalData를 통해 loader 설정을 아래와 같이 하면 된다.

index.scss파일에 한번에 import해서 해당 파일만 import하면 한 번에 불러올 수 있다.

//example
//index.scss
@import "./font.scss";
@import "./layout.scss";
@import "./mixin.scss";
@import "./variable.scss";

2. Sass 활용법

2-1) 변수 선언

Example

// 변수선언
$sizeExample: 14px;

// 
.font{
	font-size:$sizeExample
}

2-2) Nesting (품는다)

Example

.main-bg h4 {
	font-size: 16px;
}
.main-bg button {
	color : red;
}

.main-bg {
	h4 {
    	font-size: 16px;
    }
    button {
    	color: red;
    }
}

2-3) Extend (확장한다)

Example

%btn {
	width:100px;
    height:100px;
    padding:20px;
}

.btn-green {
	@extend %btn;
    color:green;
}
.btn-red {
	@extend %btn;
    color:red;
}

2-4) Mixin (넣고 섞는다)

Example

// Case1.인자 없이 사용
@mixin fontStyle(){
	font-size:30px;
  letter-spacing: -1px;
}

h2 {
	@include @fontStyle()
}
h3 {
	@include @fontStyle()
}

// Case2.인자 활용
@mixin flex($justify, $align) {
	display: flex;
	justify-content: $justify;
	align-items: $align;
}

2-5) 조건문

Example

// 조건문
@if $support-legacy {
  // …
} @else {
  // …
}

// 함수처리
@function dummy($condition) {
  @if $condition {
    @return true;
  }

  @return false;
}

3. apple 사이트 클론

3-1) Sass 활용

index.scss

//index.scss
@import "./font.scss"; // 폰트 
@import "./mixin.scss"; // 반응형, Mixin 정의
@import "./variable.scss"; //컬러, 폰트 사이즈 등 변수 정의

font.scss

//font.scss
/** Ultra Light */
@font-face {
	font-family: "San Francisco";
	font-weight: 100;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff");
}

/** Thin */
@font-face {
	font-family: "San Francisco";
	font-weight: 200;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff");
}

/** Regular */
@font-face {
	font-family: "San Francisco";
	font-weight: 400;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

/** Medium */
@font-face {
	font-family: "San Francisco";
	font-weight: 500;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff");
}

/** Semi Bold */
@font-face {
	font-family: "San Francisco";
	font-weight: 600;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff");
}

/** Bold */
@font-face {
	font-family: "San Francisco";
	font-weight: 700;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}

mixin.scss

@mixin desktop {
	@media (min-width: 834px) {
		@content;
	}
}

@mixin mobile {
	@media (max-width: 833px) {
		@content;
	}
}

@mixin mainChange {
	@media (max-width: 734px) {
		@content;
	}
}

@mixin flex($justify, $align) {
	display: flex;
	justify-content: $justify;
	align-items: $align;
}

@mixin width($width) {
	width: ($width / 16) + rem;
}

@mixin heigth($height) {
	height: ($height / 16) + rem;
}

3-2) 반응형 구현

Mobile/PC ver : 834px 기준

Promotion Grid Change : 734px 기준

구현 예시

.header_list_logo_menu {
	@include desktop {
		display: none;
	}
}

.sub_promotion {
	display: grid;
	grid-template-rows: repeat(2, 580px);
	grid-template-columns: 1fr 1fr;
	// gap: 15px;
	@include mainChange {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		gap: 0;
	}
}

4. 추가 구현

4-1) 크로스브라우징

크로스브라우징이란?

브라우저 호환성(동등성)을 맞추는 작업

각 브라우저별로 CSS 호환 여부 및 default CSS에 따라 동일한 페이지가 다르게 보이는 경우를 각 브라우저별로 맞추는 것.

reset.css 적용

브라우저 별로 default로 적용된 css를 reset해서 반영

//example

button,
input {
	line-height: normal;
}

브라우저별 vendor prefixer

크로스브라우징 적용법

autoprefixer로 확인하기

Autoprefixer CSS online

Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes include comment with configuration to the result You can also see which browsers you choose by filter string on browsersl.ist Autoprefixer online - web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use.

https://autoprefixer.github.io/

prefixfree에서 js 파일 다운받아 적용

Prefix free: Break free from CSS vendor prefix hell!

Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser's prefix to any CSS code, only when it's needed. Learn more: "[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it."

https://projects.verou.me/prefixfree/

크로스브라우징 체크

desktop

safari

opera

firefox

chrome

mobile

safari

chrome

4-2) 캐러셀 적용

시간 될 때 완성해볼 것..!!

vue-awesome-swiper | Homepage

I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation. Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation.

https://github.surmon.me/vue-awesome-swiper