본문 바로가기

SASS튜토리얼

[SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS 반복문 while 말 그대로 조건값까지 반복하는거예요. 저도 아직 익숙하진 않아서 이번 예제 만들면서 써봤네요. index.html 박스1 박스2 박스3 박스4 박스5 css/style.scss $i: 1; $font-stack: ('Helvetica', 'Arial', sans-serif); %box { height: 200px; background: red; margin: 20px 0; font-family: $font-stack; } @while $i 더보기
[SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS 조건문 if, else, else if 많이 들어보셨죠? 그건 스크립트잖아 하실수도 있는데, SASS에서도 쓸 수 있어요.아래 예제를 따라해보세요. index.html 박스1 입니다. 박스2 입니다. css/style.scss $font-stack: ('Helvetica', 'Arial', sans-serif); $standard: 500px; //기준값 입력 @mixin calcBox($width) { @if $standard > $width { background: yellow; //true } @else { background: blue; } } %box { height: 200px; background: red; font-family: $font-stack; } .box1 { @extend %bo.. 더보기
[SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS Function mixin 과 상당히 비슷하긴 합니다. 하지만, mixin은 속성 전체를 반환하고 Function은 값을 반환합니다. 저도 mixin은 많이 사용했는데, function은 별로 안써봤네요.아래 예제를 보시면 이해가 빠르실거예요. index.html 박스1 입니다. 박스2 입니다. css/style.scss $variable: 10px; $font-stack: ('Helvetica', 'Arial', sans-serif); @function wdt-percent($width) { @return $width * 1%; } .box1 { width: wdt-percent(20); //20% height: 200px; background: red; font-family: $font-stack; .. 더보기
[SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS Extend(상속) 말 그대로 해석하면 인데, 기존 CSS를 그대로 가져와서 사용할 수 있는 기능으로, 약간 위험성이 있어 보여 잘 사용하진 않습니다. 기본형에 대해서는 지정할수는 있겠지만, 아무거나 다 연결시키면 꼬이기 시작합니다. 무작정 남발하지 말고 사용시 주의해야 합니다.아래 예제를 보시고 한번 따라해보세요. index.html 박스1 입니다. 박스2 입니다. css/style.scss $variable: 10px; $font-stack: ('Helvetica', 'Arial', sans-serif); .box1 { width: $variable * 20; height: $variable * 10; background: red; font-family: $font-stack; } .box2 { @e.. 더보기
[SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS 주석 주석은 아주 간단합니다. 그룹단위의 주석과 한줄 단위의 주석을 모두 사용할 수 있는데, 아랫쪽에 자세히 살펴 보겠습니다. body { //그룹단위 주석 /* display: block; margin: 0; padding: 0 */ //한줄 주석 //background: black; } 변수 css와는 다르게 마치 프로그램처럼 변수를 사용할 수 있습니다. 아래 예문을 보고 실습해보시겠습니다. index.html css/style.scss //변수선언 $variable: 10px; .box { width: $variable * 20; height: $variable * 10; background: red; } 변수의 값을 바꾸고 저장해보세요. 잘 바뀌나요? 대표 폰트도 설정할 수 있어요. 한번 해볼까요.. 더보기
[SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS SASS가 뭔데? CSS 그냥 쓰면 안돼? SASS 의 풀네임은 Syntactically Awesome Style Sheets SASS는 위 내용의 약자입니다. 해석한다면 "문법적으로 짱 멋진 스타일시트"라는 뜻이 됩니다. 막상 해석을 하고나니 굉장히 볼품 없어 진것 같아요. 초딩들이 "초 울트라 짱짱 멋진 가방" 막 그러는것 같네요. 어쨋든 좋은거랍니다.저는 이미 즐겨 쓰기 때문에 보증할 수 있는데, CSS에 코딩이 들어간 구조라 반복작업을 훨씬 더 줄여줄 수 있고, 수정도 용이한 구조입니다. 그냥 한번만 써보세요. 왜 쓰는지 다 이해가 됩니다. koala 설치하기 koala-app.com/ 사이트에 접속하세요. 설치 파일을 다운로드 할 수 있습니다. 다운로드 받은 파일 설치 설치만 하면 되므로 난이도.. 더보기