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
같은 카테고리의 다른 글

윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전

인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...

SASS / Mixin 정의하고 사용하기

SASS / Mixin 정의하고 사용하기

Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name {   // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) {   // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( value1, value2, ... ); 예제 1 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SCSS @mixin jb ...

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

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

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

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는 여러 번 사용할 수 ...

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 ...

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

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 ...

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

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

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

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...

다음 웹마스터 도구 베타에 사이트 등록하는 방법

다음 웹마스터 도구 베타에 사이트 등록하는 방법

카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 ...

SVG 이미지 파일 만드는 방법

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...