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를..

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..