Posis

SCSS는 프로그래밍 요소를 섞은 CSS이므로 다양한 문법이 존재합니다. 오늘은 그중 하나인 Mixin에 대해서 알아보겠습니다. 변수는 하나의 값만 넣어서 저장하지만 Mixin은 내가 원하는 스타일 여러 가지를 한 번에 저장할 수 있습니다. 기본 이처럼 mixin을 함수처럼 작성하고 스타일에 적용시킬 때는 @include 뒤에 작성한 mixin 이름을 쓰면 됩니다. /* CSS */ .box { position: absolute; left: 50%; top: 50%; translate: -50%, -50%; } 이를 활용해 자주 사용하는 설정들을 많이 작성해둔다면 웹 개발할 때 코드 작성 시간을 단축할 수 있습니다. 파라미터 추가하기 mixin은 프로그래밍 언어의 함수와 흡사하게 생겼습니다. 이말은 즉슨..

변수는 프로그래밍언어를 한번이라도 공부했다면 어떤것인지 아실겁니다. 간단하게 설명하자면 데이터를 저장해두는 메모리공간을 의미합니다. CSS에서 변수를 전역에서 사용하기 위해서는 :root라는 가상클래스안에서 --를 붙인 변수를 만들어 사용합니다. [예시] /* CSS */ :root { --fontColor: red; } p { color: var(--fontColor); } SCSS에서는 더욱 간단하게 사용할 수 있습니다. 변수명 앞에 $를 붙이고 데이터를 넣어주면 끝입니다. /* CSS */ p { color: red; } SCSS로 작성하고 컴파일하면 변수는 사라지고 color 속성에 변수에 저장한 데이터가 들어가게됩니다. 산술연산 CSS에서도 값을 계산해서 사이즈를 지정할 수 있습니다. calc를..

SASS/SCSS에서 중첩이란? CSS에서 style을 적용할 때 .container .inner h1 {}과 같은 방식을 사용합니다. 하지만 class들이 많아지고 태그들이 자식의 자식의 자식의....처럼 많아지는 경우가 생깁니다. 그렇게 된다면 .container 자식선택자 자식선택자 자식선택자 자식선택자 {} 점점 길어질수록 가독성은 떨어지면서 자연스럽게 스타일을 수정할 때 원하는 곳에 자리를 찾는것이 힘들어지게 됩니다. 이를 좀 더 수월하게 할 수 있는 방법이 중첩입니다. [예시] /* CSS */ body p { color: blue; } body p strong { font-size: 20px; } body p strong span { font-weight: 500; } 이처럼 태그 중괄호 안..

CSS에는 여러 줄 주석 /* */만 사용할 수 있습니다. 하지만 SASS/SCSS에서는 두 가지의 주석이 존재합니다. 한 줄 주석( // )과 여러 줄 주석( /* */ )이 있습니다. SASS body background-color: #fff color: #000 padding: 10px 20px /* *h1 { * font-size: 20px; *} h2 // font-size: 15px; SCSS SCSS는 코드 블록의 한 줄 주석이 적용되지 않으므로 사진으로 대체했습니다. CSS(컴파일) body { background-color: #fff; color: #000; padding: 10px 20px; /* h1 { font-size: 20px; } */ } 위에 보시는 것처럼 여러 줄 주석은 C..

SASS & SCSS란? SASS이전에 CSS가 있습니다. CSS는 웹을 꾸며줄 때 사용하는 스타일 언어입니다. 하지만 CSS는 태그 안에 태그, 그 태그 안에 태그처럼 중첩되는 태그들이 많아질 때 코드가 점점길어지고 가독성이 떨어지게 됩니다. CSS 는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 전처리기가 도움이 될 수 있습니다. 이 전처리기를 우리는 SASS(SCSS)라고 부릅니다. SASS(SCSS)는 CSS에서 프로그래밍 요소를 추가한 언어라고 생각하면됩니다. for, if문 등등을 활용하여 웹을 꾸밀 수 있습니다. SASS와 SCSS의 차이점은 중괄호( { } )와, 세이콜론(;) 유무 입니다. 간단한 예시 SASS $prim..