CSS Preproseccor
-
Sass(SCSS) At-Rules #1[@import]CSS Preproseccor/Sass 2019. 4. 24. 22:08
가져오기(import) Sass도 CSS와 동일한 문법으로 파일을 import 할 수 있습니다. 차이점이 있다면 여러개의 파일을 쉼표로 구분하여 import 할 수 있다는 것입니다. import // style.scss @import 'foundation/code', 'foundation/lists'; // foundation/_code.scss code { padding: .25em; line-height: 0; } // foundation/_lists.scss ul, ol { text-align: left; & & { padding: { bottom: 0; left: 0; } } } 파일 찾기(Finding the File) Scss로 파일을 가져올 때(import) 가져..
-
Sass(SCSS) SassScript #2[Operations]CSS Preproseccor/Sass 2019. 4. 22. 21:20
동등 연산자 (Equality Operators) 이 연산자는 두 값이 같은지 여부를 반환합니다. == 은 두 표현식이 동일한지 반환하고 != 은 두 표현직이 같지 않은지 여부를 반환합니다. 두 값이 동일한 유형과 동일한 값이면 동일한 것으로 간주합니다. SCSS @debug 1px == 1px; // true @debug 1px != 1em; // true @debug 1 != 1px; // true @debug 96px == 1in; // true @debug "Helvetica" == Helvetica; // true @debug "Helvetica" != "Arial"; // true @debug hsl(34, 35%, 92.1%) == #f2ece4; // true @debug rgba(179,..
-
Sass(SCSS) SassScript #1[Data]CSS Preproseccor/Sass 2019. 4. 22. 16:51
SassScript Sass는 SassScript라는 작은 확장자 집합을 지원합니다. SassScript를 사용하면 속성에서 변수, 산술 및 추가 함수를 사용할 수 있습니다. 또한 믹스인을 사용할 때 유용합니다. Interactive Shell Interactive Shell을 사용하여 SassScript를 간단히 테스트할 수 있습니다. 프롬프트 창을 열어 아래와 같이 입력해보세요. Prompt $ sass -i >> "Hello, Sassy World!" "Hello, Sassy World!" >> 1px + 1px + 1px 3px >> #777 + #777 #eeeeee >> #777 + #888 white 데이터타입 (Data Types) SassScript는 다음과 같은 8가지 데이터 유형을 지..
-
Sass(SCSS) Comments /**/ and //CSS Preproseccor/Sass 2019. 4. 22. 10:49
Comments Sass는 여러줄 주석과 한줄 주석 모두 지원합니다. 여러줄 주석은 CSS 파일로 컴파일 시 출력되지만, 한 줄 주석은 제거되어 출력되지 않습니다. Sass /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a { color: green;..
-
Sass(SCSS) CSS ExtensionsCSS Preproseccor/Sass 2019. 4. 22. 10:35
Property Declarations CSS와 같은 Sass 에서 속성 선언은 선택자와 일치하는 요소의 스타일 지정 방법을 정의합니다. SCSS .circle { $size: 100px; width: $size; height: $size; border-radius: $size / 2; } CSS .circle { width: 100px; height: 100px; border-radius: 50px; } 보간법(Interpolation) 속성의 이름에는 보간법이 포함될 수 있으며, 필요에 따라 속성을 동적으로 생성할 수 있습니다. SCSS @mixin prefix($property, $value, $prefixes) { @each $prefix in $prefixes { -#{$prefix}-#{$pr..
-
Sass(SCSS) 컴파일CSS Preproseccor/Sass 2019. 4. 8. 11:32
1. Ruby 설치 콘솔 방식으로 컴파일 하기 위해서 ruby가 필요합니다. 맥에는 기본적으로 ruby가 설치되어 있어 따로 설치할 필요가 없습니다. - 다운로드 링크 (https://rubyinstaller.org/downloads/) Ruby 설치 시 'Add Ruby executables to your PATH'를 꼭 체크해주세요 2. Command 윈도우 + R키를 눌러 커맨드 창을 열어 아래의 명령어를 입력합니다. gem install sass 3. 컴파일하기 커맨드 창을 열어 프로젝트를 진행할 폴더로 이동합니다. cd C:\Users\Desktop\my\project\scss 제 프로젝트 폴더에는 아래와 같은 common.scss 파일이 있습니다. 이 파일을 css 파일로 컴파일 하겠습니다. ..
-
Less Mixins part #01CSS Preproseccor/Less 2019. 3. 30. 03:24
믹스인 (Mixins) 클래스 선택자와 id 선택자를 혼합할 수 있다. less.logo, #title{ font-weight: 900; } .mixin-class{ .logo(); } .mixin-id{ #title(); } css.logo, #title{ font-weight: 900; } .mixin-class{ font-weight: 900; } .mixin-id{ font-weight: 900; } 믹스인 호출을 할 때 [.logo(), #title()] 괄호는 선택사항이지만, 더 이상 사용되지 않을 예정이다.* .logo(); .logo; // 정상 작동. 믹스인을 출력하지 않음 (Not Outputting the Mixin) 직접 만든 믹스인을 컴파일할 CSS 파일 내부에 포함시키고 싶지 않..
-
Less VariablesCSS Preproseccor/Less 2019. 3. 28. 22:07
Less Variables 변수 (Variables) 변수는 한 위치에서 값을 제어할 수 있는 방법을 제공하며, 코드를 보다 쉽게 관리 및 유지할 수 있게 도와준다. 일반적인 CSS 코드 a, .link { color: red; } .widget { color: white; background: red; } 변수를 사용한 코드 // 변수 @link-color: red; @link-color-hover: hotpink; // 사용법 a, .link { color: @link-color; // red } a:hover { color: @link-color-hover; // hotpink } .widget { color: white; background: @link-color; // red } 변수 보간법 (..