YoonStudyNote

1. 가져오기(Import) @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다. 또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있다. 파일 확장자가 .css일 때 파일 이름이 http://로 시작하는 경우 url()이 붙었을 경우 미디어쿼리가 있는 경우 위의 경우 CSS @import 규칙대로 컴파일 된다. @import "hello.css"; @import "http://hello.com/hello"; @import url(hello); @import "hello" screen; 2. 여러 파일 가져..

1. 변수(Variables) 반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $를 붙인다. $변수이름: 속성값; $color-primary: #e96900; $url-images: "/assets/images/"; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + "bg.jpg"); } .box { width: 200px; margin-left: 200px; background: #e96900 url("/assets/images/bg.jpg"); } 2. 변수 유효범위(Variable Scope) 변수는 사용 가능한 유효범위가 있다. 선언된 블록({ }) 내에서만 유..

1. 중첩 Sass는 중첩 기능을 사용할 수 있다. 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다. /* SCSS */ .section { width: 100%; .list { padding: 20px; li { float: left; } } } .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } 2. Ampersand (상위 선택자 참조) 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다. .btn { position: absolute; &.active { color: red; } } .list { li { &:last-child { margi..

데이터 설명 예시 Numbers 숫자 1, .82, 20px, 2em... Strings 문자 bold, relative, "/images/a.png", "dotum" Colors 색상표현 red, #ffff00. rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음 null Lists 공백이나 "," 로 구분된 값의 목록 (apple, orange, banana), apple orange Maps Lists와 유사하나 값이 key: Value 형태 (apple: 0, Orange: 0, Banana: b) 특이사항 Sass에서 사용하는 데이터 종류들의 몇 가지 특이사항을 소개한다. Numbers: 숫자에 단위가 있거나 없다. Strings: 문자에 따옴표가 ..

CSS 주석은 /* ... */ 이다. Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고, 중요한 것은 *의 라인을 맞춰줘야 한다. 사용방법 /* 컴파일되는 * 여러 줄 * 주석 */ // Error /* 컴파일되는 * 여러 줄 * 주석 */ 에스터리스크가 똑바로 한줄에 맞춰서 찍혀있지않고 중구난방으로 찍혀있으면 컴파일이 안된다.

Sass(SCSS)는 웹에서 직접 동작할 수 없다. 어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 한다. 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법을 소개하겠다. SassMeister 간단한 Sass 코드는 컴파일러를 설치하는게 부담될 경우 SassMeister를 사용 할 수 있다. 페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환된다. HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원하니 학습에 도움이 될 것이다. www.sassmeister.com/ SassMeister | The Sass Playground! SassMeis..

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다. 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다. 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다. /* SASS */ .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px /* SCSS */ .list { width: 100px; float: left; li { color: red; b..

교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정한다. align-items는 Container 내 모든 Items의 정렬 방법을 설정한다. 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다. 이 속성은 align-items 속성보다 우선한다. 값 의미 기본값 auto Container의 align-items 속성을 상속받음 auto stretch Container의 교차 축을 채우기 위해 Item을 늘림 flex-start Item을 각 줄의 시작점(flex-start)으로 정렬 flex-end Item을 각 줄의 끝점(flex-end)으로 정렬 center Item을 가운데 정렬 baseline Item을 문자 기준선에 정렬 이와같이 ..

Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성이다. 값 의미 기본값 flex-grow Item의 증가 너비 비율을 설정 0 flex-shrink Item의 감소 너비 비율을 설정 1 flex-basis Item의 (공간 배분 전) 기본 너비 설정 auto flex: 증가너비 감소너비 기본너비; .item { flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */ flex: 1 1; /* 증가너비 감소너비 */ flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */ } .container{ border: 4px solid; display: flex; } .container .item{ height: 100px; background: ..

Item의 (공간 배분 전) 기본 너비를 설정한다. 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있다. 하지만 단위 값이 주어질 경우 설정할 수 없다. 값 의미 기본값 auto 가변 item과 같은 너비 auto 단위 px, em, cm등 단위로 지정 flex-basis: 기본너비; flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의하자. .container{ border: 4px solid; display: flex; } .container .item{ height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; flex..