Sass 검색 결과

해당 글 5건

[Chapter 06] Sass Function & 그 외의 지시어(Directive)

Sass 변수 범위(Scope)와 콘텐츠 블럭(@content) ㆍ 변수 범위는 JS 의 전역/지역 변수 개념과 유사합니다. ㆍ Sass 3.2 에 추가된 @content 지시어는 믹스인 정의시에 @content 지시문을 추가하여 믹스인을 호출하는 곳에서 사용된 콘텐츠 블럭을 믹스인으로 전달할 수 있습니다. // 전역 변수 $color: #3fb5c8; @mixin colors($color: darkred) { // 믹스인 내부에서 $color 값은 지역 변수인 '전달인자'를 가리킵니다. background-color: $color; // darkred border-color: $color; // darkred // @content 값은 믹스인을 호출하는 곳인 @include 믹스인명() {} 에서 {}..
StyleSheet/SASSㆍSCSS 2015. 10. 30. 10:10

[Chapter 02] Sass

Sass Variable Defaults와 global : !default, !global !default 플래그는 value값의 끝에 쓰고 변수가 이미 할당된 경우는 재할당하지 않지만 아직 값을 갖지 않는 null인 경우에는 !defalut 플래그의 value값으로 할당됩니다. $content: "First content"; $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } $content: null; $content: "Non-null content" !default; #main { content: $..
StyleSheet/SASSㆍSCSS 2015. 10. 27. 12:21

[Chapter 01] Sass

Sass Started Sass를 사용하기 위한 환경 셋팅이 준비되었다면 Sass를 사용해 보기 Sass 파일의 확장자는 .scss 이며, 이 확장자 파일은 나중에 .css로 변환되어 실질적으로 서비스에 반영되는 .css 파일로 사용되어 지며 Sass는 마크업에서만 사용되는 언어입니다. 유관부서에 공유되거나 실서비스에 뿌려지는 것이 아니기 때문에 파일을 여러개로 나눠서 import해도 되고, 변수명 같은 것도 축약어를 사용하지 않아도 됩니다. ※ CODEPEN 에서 VIEW COMPILED 를 클릭하여 컴파일 결과를 확인해보세요! 변수(Variables) 기본값 설정 : $ , !default(디폴트 플래그) ㆍ $변수명 : 속성값; ㆍ $변수명 : 속성값 !default; Scss파일에서 위 코드를 작..
StyleSheet/SASSㆍSCSS 2015. 10. 27. 09:50

[Chapter 07] Sass 조건문, 반복문

Conditions @if, @else if, @else 문법 및 활용 @ JS 의 if ~ else 문과 유사한 조건문을 처리할 수 있습니다.(JS 코드에서 조건부분의 괄호를 사용하지 않습니다.) $value: null; #condition { @if $value == false { color: #eee; } } #demo { @if $value == false { color: #434343; } @else { color: #8c8d8a; } } $custom-red: #e44351; $custom-green: #3ce1cd; $custom-blue: #4524dd; $custom-dark: #161515; // 배경 컬러 설정 변수 $bg-color: $custom-red; #demo { @if $b..
StyleSheet/SASSㆍSCSS 2015. 9. 8. 15:23

Sass 명령어 기초 배우기

Sass 명령어 알아보기 이 포스팅에서는 사스에서 자주사용되는 명령어에 대해 알아봅니다. CSS 출력 style 지정 사용방법.scss 파일을 작성한 후에 css로 컴파일을 하기 위해서는 간단한 sass 명령어를 사용해야하는데 이에 대해 알아보도록 하자. 명령어 작성ㆍ cmd 창에서 아래의 명령어를 입력한다.sass –-style style종류 (작성된)파일명.scss (변환될)파일명.css $ sass –-style compact test.scss:test.css 다음의 코드는 예를 들어서 본인의 로컬 디렉토리에 sass 폴더가 있고 컴파일된 css파일을 다른 디렉토리로 이동하고자 할때 (주의 : 터미널,cmd 창에서 sass 파일이 있는 디렉토리를 기준으로 작성한 것입니다) 그리고 해당 .scss 파..
StyleSheet/SASSㆍSCSS 2015. 8. 7. 13:34