inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

SCSS 핵심이론(04) – 대표적인 CSS 선택자 SCSS에서 만들기

scss 관련 코딩 스타일 실무 질문

456

정혁

작성한 질문수 3

1

저희 직장 사수가 실무에서 사용할 때에는

작은 프로젝트 외 금융권 같은 큰 프로젝트는

body{display:block;height:100px;width:100px;}

무조건 이런 방식으로 모든 공백을 최소화해서 코딩을 해서 작성해야 한다고 했는데,

scss를 사용할 경우에는 위처럼 작성하는 것은 사실상 불가능하고,

한 줄씩 띄워서 쓰는 방식이랑, 실제 컴파일러도 그렇게 만들어 컴파일해주는데,

이렇게 제작해도 성능 상의 큰 차이가 없나요?

프리랜서 외주 제작을 받는다고 가정하면

한줄 코딩 최적화보다는 ,

하단 코딩스타일처럼 제작해서 주는 것이 맞을까요?

 

body {
  display:grid;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #222;
}

HTML/CSS javascript sass jquery scss

답변 2

1

코딩웍스(Coding Works)

엔터와 스페이스 없이 하는걸 소위 줄코딩이라고 하는데.. 용량 차이를 위해서라기 보다는 회사 자체의 코딩방식이라고 보입니다. 물론 엔터와 스페이스 없으면 아주 개미 발가락 만큼이라도 속도에 도움이 되겠지만 위에서 말했지만 파일 용량을 줄여서 속도를 높이자가 목적은 아니라고 생각합니다.

아래 파일을 보시면 엔터와 스페이스가 있는 최종본 style.css 용량과 엔터와 스페이스를 제거한 용량의 차이가 9kb 밖에 나지 않습니다.

image

아래 사이트 들어가셔서 코드 minify하는 작업 직접 테스트 해보세요. 간단합니다.

https://10015.io/tools/css-minifier

0

정혁

궁금했던 부분인데 감사합니다

SCSS에서 @keyframes 사용

1

106

1

전체 색 설정 질문

1

132

2

피그마 원본 다운로드

1

328

2

영상 싱크가 맞지 않습니다!

1

166

2

수강평 작성이 안되네요..

1

149

1

피그마로 셀렉트 박스 인터렉션도 되도록 하려면?

1

224

1

피그마 ai 기능 괜찮은거 추천해주실수 있나요?

1

196

1

테이블 그리려고 하는데 어려워요

1

234

2

[PC 레이아웃 상세 퍼블리싱 - 인클루드] class-detail 에서 인클루드가 작동하지 않아요.

1

180

3

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

1

146

1

활성화 중인 scss 하나만 css 로 컴파일 가능할까요?

1

296

2

실수로 style.css를 지워버렸습니다...

1

191

1

slick slide 클레스 네임 관련

1

261

1

live server는 적용되는데 index.html을 더블클릭하면 아무것도 안되어 있어요..

1

383

1

장바구니페이지 관련 질문입니다.

1

288

1

네비게이션 클릭시 헤더높이로 인해 제목 가리는 부분 해결방안

4

311

1

소스텍스트는 제공이 안되나요?

1

287

1

섹션 4. SCSS 핵심 이론(Essential Theory) 완성예제는 따로 없을까요?

1

272

2

SCSS

1

282

2

scss

1

382

3

spoqa han sans neo

1

1033

3

모바일웹 소스가 없습니다.

0

279

1

scss 히스토리 파일

1

455

2

figma 파일 임포팅이 되지 않습니다.

1

2057

2