SASS / 변환 스타일 - nested, expanded, compact, compressed

변환 스타일

SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다.

  • nested
  • expanded
  • compact
  • compressed

다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다.

ul {
  font-family: Georgia;
  color: #333333;
  li {
    display: inline-block;
  }
}

nested

sass style.scss:style.css --style nested

기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul li 앞에 공백이 더 있다는 것이 특징입니다.

ul {
  font-family: Georgia;
  color: #333333; }
  ul li {
    display: inline-block; }

expanded

sass style.scss:style.css --style expanded

계층 구조라 하더라도 선택자 앞에, 즉 ul li 앞에 공백이 없습니다.

ul {
  font-family: Georgia;
  color: #333333;
}
ul li {
  display: inline-block;
}

compact

sass style.scss:style.css --style compact

선언이 여러 개 있어도 줄바꿈을 하지 않습니다.

ul { font-family: Georgia; color: #333333; }
ul li { display: inline-block; }

compressed

sass style.scss:style.css --style compressed

불필요한 공백을 모두 제거합니다.

ul{font-family:Georgia;color:#333333}ul li{display:inline-block}

sourceMappingURL 지우기

SCSS 파일을 CSS 파일로 변환하면 map 파일이 생성되고, 변환된 CSS 파일 제일 밑에 다음과 같은 주석이 생성됩니다.

/*# sourceMappingURL=style.css.map */

만약 변환할 때 위 코드가 생성되지 않게 하려면

--sourcemap=none

옵션을 붙이면 됩니다.

sass style.scss:style.css --style compressed --sourcemap=none
같은 카테고리의 다른 글
크롬 / 요소 검사 패널 레이아웃 변경하는 방법

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...

robots.txt / 구성 요소와 예제

robots.txt 파일은 웹사이트의 루트 디렉터리에 위치하여 검색 엔진 크롤러(예: Googlebot)에게 어떤 페이지나 파일을 크롤링할 수 있는지 또는 크롤링할 수 없는지 알려주는 텍스트 파일이다. 이 파일은 웹사이트의 크롤링 지침을 설정하는 데 사용된다. 구성 요소 User-agent 크롤러의 이름을 지한다. 예를 들어, 구글은 Googlebot, 빙은 Bingbot이다. *는 모든 크롤러를 의미한다. Disallow 크롤러가 접근하지 못하도록 할 경로를 지정한다. Disallow: ...

SASS / 문법 / 조건문 - @if, @else if, @else

SASS / 문법 / 조건문 - @if, @else if, @else

SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다. 문법 @if condition1 { A } @else if condition2 { B } @else { C ​} condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 번 사용할 수 ...

MySQL Workbench / Windows 10에 설치하는 방법

MySQL Workbench / Windows 10에 설치하는 방법

MySQL Workbench는 MySQL 데이터베이스를 관리하고 분석할 때 유용한 도구입니다. 호환성 문제가 있다고 하지만, MariaDB로 관리 가능합니다. MySQL Workbench를 Windows 10에 다운로드하고 설치하는 방법을 정리합니다. 다운로드 https://www.mysql.com/products/workbench/에서 다운로드 합니다. 는 MySQL을 다운로드 하는 것이니, 혼동하지 마세요. 로그인하라고 하는데, 굳이 그러고 싶지 않다면 를 클릭합니다. 바로 ...

Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기

Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다. 다운로드 받아 사용하기 Font Awesome v4.7.0 홈페이지에서 다운로드를 클릭합니다. 새 창이 뜨면 ...

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...

크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법

크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법

웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...

SASS / 주석

SASS / 주석

CSS에서 주석은 /*와 */로 만듭니다. SASS에서는 CSS 주석 외에 한 줄 주석인 //를 지원합니다. 컴파일 했을 때 CSS 주석은 그대로 남아 있지만 한 줄 주석은 사라집니다. SASS /* CSS Comment */ // Line Commnet p { color: red; /* CSS Comment */ padding: 20px; // Line Comment } CSS /* CSS Comment */ p { color: red; ...

Font Awesome 5 / 아이콘으로 체크박스 디자인하기

Font Awesome 5 / 아이콘으로 체크박스 디자인하기

체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...