티스토리

Web Club

검색하기

블로그 홈

Web Club

webclub.tistory.com/m

변화는 과거와의 이별로부터 시작된다 ..

구독자: 51

방명록 방문하기

주요 글 목록

Sass 코딩 컨벤션 Sass Coding Convention Sass 작성을 위한 컨벤션에 대해 알아봅니다. Table of Contents 폴더 구조 [Folder structures] 파일 구조 [File structures] 인코딩 [Encoding] 중첩 [Nesting] 들여쓰기 및 선언 순서 [Style Rules] 띄워쓰기 [Spacing words] 주석 [Comments] 네이밍규칙 [Naming] 8.1. placeholder selector 8.2. mixin 8.3. 변수 믹스인 [Mixin] @extend [Extend] 10.1. %(place holder) 의 확장 10.2. % 선언시, 축약형 지양 제어구문 (@if, @each, @for 등) [Control Statements] 11.1@if.. 공감수 12 댓글수 0 2019. 1. 31.
chat component Chat Style See the Pen chat component by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub 공감수 5 댓글수 1 2016. 11. 23.
Button Drop Shadow with animation Button Drop Shadow with SCSS and animation See the Pen Button Drop Shadow with animation by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub 공감수 3 댓글수 0 2016. 11. 23.
Responsive navigation with CSS3 animations and jQuery RWD with CSS3 & jQuery & SCSS See the Pen Fully responsive navigation with CSS3 animations and jQuery by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub 공감수 4 댓글수 0 2016. 11. 22.
Button Style with SCSS Button Style See the Pen Button style by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub 공감수 4 댓글수 0 2016. 11. 22.
[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 믹스인명() {} 에서 {}.. 공감수 6 댓글수 0 2015. 10. 30.
[Chapter 04] Sass Sass CSS 에서와 같은 결합 선택자 사용하기 div { color:black; // 선택 연산자 .foo { color: black; // 자손(descendant) 선택자 } > .foo { color: black; // 자식(child) combinator } + .foo { color: #000; // 인접형제(adjacent sibling) 선택자 } ~ .foo { color: yellow; // 일반형제(general sibling) 선택자 } & .foo { color: #fff; // Sass 부모(Parent) 참조 선택자 } .foo & { color: red; // Sass 부모(Parent) 참조 선택자 } &.bar { color: green; } } RWD, 부모 참조 선택.. 공감수 0 댓글수 0 2015. 10. 27.
[Chapter 03] Sass 전달 인자(Arguments) Sass TEST : http://www.sassmeister.com/ @mixin border-radius( $radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } #app { @include border-radius(10px); } #design { @include border-radius (3px 3px 0 0); } @mixin border-radius-01( $radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } #app.. 공감수 1 댓글수 0 2015. 10. 27.
[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: $.. 공감수 2 댓글수 0 2015. 10. 27.
[Chapter 01] Sass Sass Started Sass를 사용하기 위한 환경 셋팅이 준비되었다면 Sass를 사용해 보기 Sass 파일의 확장자는 .scss 이며, 이 확장자 파일은 나중에 .css로 변환되어 실질적으로 서비스에 반영되는 .css 파일로 사용되어 지며 Sass는 마크업에서만 사용되는 언어입니다. 유관부서에 공유되거나 실서비스에 뿌려지는 것이 아니기 때문에 파일을 여러개로 나눠서 import해도 되고, 변수명 같은 것도 축약어를 사용하지 않아도 됩니다. ※ CODEPEN 에서 VIEW COMPILED 를 클릭하여 컴파일 결과를 확인해보세요! 변수(Variables) 기본값 설정 : $ , !default(디폴트 플래그) ㆍ $변수명 : 속성값; ㆍ $변수명 : 속성값 !default; Scss파일에서 위 코드를 작.. 공감수 3 댓글수 0 2015. 10. 27.
Sass 활용(웹폰트,PX2EM, accessivility ) Sass 웹폰트 모듈 호출하기 /** * ------------------------------- * 변수 * ------------------------------- */ // Typography $base: 16; // 글꼴 $serief: 'Tiems New Roman', Serief; $sans-serief: Verdana, Sans-Serief; $serief-ko: Gulim, Serief; $sans-serief-ko: 'Nanum Gothic', Dotum, Sans-Serief; // 구글 웹폰트 $noto-serif: 'Noto-Serief:400,700'; $noto-sans: 'Noto+Sans:400,700'; $monoton: 'Monoton'; $webfont: $sans-se.. 공감수 0 댓글수 0 2015. 9. 14.
[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.. 공감수 6 댓글수 1 2015. 9. 8.
[Chapter 05] Sass Mixin 응용 Mixin(믹스인) 활용하기 # Scss @mixin reset-html5-block($html5-block) { #{$html5-block} { display: block; } } # CSS @include reset-html5-block('h1, p, div'); h1, p, div { display: block; } # Scss @mixin reset-box-model { margin: 0; bottom: 0; padding: 0; } @mixin reset-font (){ font:inherit; font-size: 100%; vertical-align: baseline; } @mixin nested-reset($html-selector) { #{$html-selector} { @include r.. 공감수 1 댓글수 0 2015. 9. 1.
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 파.. 공감수 5 댓글수 0 2015. 8. 7.
SCSS/SASS(CSS Preprocessor) & Sass install SASS (Syntactically Awesome StyleSheets) Sass는 css전처리기로써 css 파일 중간에 위치하는 하나의 계층입니다. 전처리기란 웹 브라우저는 프로세서(Processor)로서 웹 데이터(HTML, CSS, JS 등)를 다운로드 받아 해석하여 화면에 해석된 데이터를 랜더링됩니다. Sass, LESS 등 ‘CSS 확장 언어’를 활용할 경우, 웹 브라우저에서 해석되기 전에 CSS로 변경되는 과정이 필요합니다. 이를 ‘브라우저에서 해석되기 전에 프로세싱한다’고 해서 프리프로세싱(Pre-Processing)한다고 부릅니다. Sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다.” 라고 정의하고 있다. 다시 말해서,.. 공감수 10 댓글수 4 2015. 8. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.