1. Function(함수)함수를 정의하여 사용할 수 있다.다만 함수와 Mixin이 헷갈릴 수도 있는데, 이들은 반환 값에 차이가 있습니다. Mixin과 함수의 차이점Mixin : 지정한 스타일(Style)을 반환함수 : 계산된 특정 값을 @return 지시어를 통해 반환/* SCSS */$max-width: 980px;@function columns($number: 1, $columns: 12) { @return $max-width * ($number / $columns);}.box_group { width: $max-width; .box1 { width: columns(); // 1 } .box2 { width: columns(8); } .box3 { width: ..
지난 포스팅에 이어 기본적인 SCSS 문법에 대해 정리해볼려고 한다 1. Data TypesNumbers숫자1, .82, 20px, 2emStrings문자bold, relative, "/images/a.png","dotum"Colors색상red, blue, #FFFF11, rgba(0,0,0,0.5)Booleans논리true, falseNulls아무것도 없음nullLists공백이나 ,로 구분된 값의 목록 (apple, orange, banana), apple orange MapsList와 유사하나 값이 Key : Value 형태 (apple: a, orange: o, banana: b) $number: 720;$string: hello;$color: red;$boolean: true;$list: red..
[Sass] Sass와 SCSS 차이는 뭘까?
Sass란 CSS의 확장으로, 더 효율적이고 유지 보수 가능한 스타일을 작성할 수 있도록 도와주는 스타일링 언어다.물론 기존 CSS로만으로 충분히 작업할 수 있지만 프로젝트의 규모가 커질수록 복잡하고, 유지보수가 불편해지는 경험이 있다.그렇다면 얼마나 좋길래 대부분 쓰는걸까? 🤔 Sass를 사용하는 이유!!🔍 호환성: 모든 버전의 CSS와 완벽하게 호환된다. 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다. 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다. 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다. 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다. 확장성: Sass 기반의 프레임워크가 다수 존재한다. 'Sass와 SCSS가 뭐야?'Sass에 처..