SCSS & SASS

CSS 전처리 도구이다.CSS가 동작하기 전에 사용하는 기능으로 웹에서는 분명 CSS가 동작하지만 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다.SASS문법이 기존의 CSS문법보다 쉽고 더욱 더 강력한 기능을 가지고 있다.공식문서Sass 공식 홈페이지Sass

parcel-bundler 패키지가 연결된 main.scss파일에 필요한 패키지들을 자동으로 설치해준다. parcel-bundler가 설치한 Sass패키지가SCSS문법을 CSS문법으로 컴파일 해준다.CSS 톱니바퀴 설정모드에 들어가서 CSS를 SCSS로 변경해준다.!c

SCSS주석 방법 2가지/\* \*/ : SCSS파일에서 해당 문법으로 주석처리 할 경우 CSS로 컴파일되더라도 해당 영역은 여전히 주석처리 되어있음// : SCSS파일에서 해당 문법으로 주석처리 할 경우 CSS로 컴파일하면 해당 영역은 주석처리 유지 안됨SCSS 주석

SCSS와 같은 CSS 전처리 도구를 사용하면서 가장 유용하게 사용하는 기능은 바로 중첩 입니다. CSS를 통해 반복해서 사용했던 상위 선택자들을 중첩 기능을 통해 매우 간단하게 표현할 수 있습니다.SCSS!codepenjangjinwon/embed/KKZBzzP?de

& 기호를 이용하여 자신이 포함된 상위 선택자를 참조할 수 있습니다.상위 선택자가 &기호로 치환된다.ex> .btn 선택자가 &와 치환되서 CSS에서 .btn.active가 되는 것을 알 수 있다.1.SCSS2.CSS

font:처럼 : 기호로 시작하여 중첩된 속성을 나타낼 수 있습니다. font: {};로 font의 font-weight, font-size, font-family 등의 여러가지 속성을 중첩하여 표현이 가능합니다.이렇게 font- 로 시작하여 폰트를 나타내는 속성들을

$ 기호를 이용하여 JavaScript에서 사용하는 const, let 등과 마찬가지로 변수를 선언할 수 있습니다. $size: 100px;의 예처럼 앞에 $를 적고 할당 연산자로 :을 사용하는 방식으로 size라는 변수에 값을 입력합니다. 유의해야할 점은 변수는 선언

SCSS에서도 JavaScript에서 산술 연산자를 사용했던 것처럼 활용이 가능합니다. 더하기, 뺄셈, 곱셈, 나머지 연산자는 모두 동일한 반면 나누기 연산자는 다른 방법으로 사용하여야 합니다.CSS 내에서 font의 단축 속성을 이용할 때에 font: 10px / 1

SCSS에서는 @mixin키워드를 이용하여 특정한 이름에 내용을 저장하고 @include 키워드로 해당 내용을 재활용할 수 있습니다.1.SCSS$ 기호를 활용한 변수에 매개변수와 인수로 넣어줌으로 재활용 기능을 사용하면서도 들어가 있는 내용을 동적으로 수정하면서 사용할

JavaScript에서 for, while을 이용하여 반복문을 이용하는 것처럼 SCSS에서도 반복문을 출력할 수 있습니다. nth-child(1);와 같이 가상 클래스 선택자를 활용함에 있어 유용하게 사용할 수 있습니다.1.SCSS보관 기호: JS => ${}, SCS

SCSS에서 @mixin을 이용하여 함수와 유사하게 사용하는 방법도 있지만 실제로 @function을 SCSS 내에서 JavaScript 함수와 동일한 구조로 활용합니다.@mixin은 CSS의 style을 다루는 데에 주로 사용이 된다면, @function은 어떠한 값

색상 내장 함수는 이미SCSS 내부에서 구현되어 있는 함수로서 색상과 관련하여 활용할 수 있는 함수입니다.!codepenjangjinwon/embed/JjMBbWy?default-tab=html%2Cresultmix 함수는 두 가지 인수를 받아 색을 섞는 함수입니다.

SCSS 에서도 CSS처럼 @import라는 키워드를 통해 SCSS 파일을 다른 SCSS 파일과 연결할 수 있습니다.1\. 활용 예제(1)CSS에서의 가져오기와 동일한 방법2\. 활용 예제(2)url() 없이 사용하는 방법3\. 활용 예제(3)확장자명까지 생략하는 방법

SCSS에도 JavaScript와 마찬가지로 데이터 종류가 있습니다.SCSSCSSSCSS에서 position: null;로 설정하면 CSS에서는 position 속성이 사라진다.

SCSSCSS

@content는 @mixin 내의 추가적으로 필요한 내용을 덧 붙이는 용도로 사용합니다.@include로 호출하여 중괄호 내에 더해줄 추가적인 내용을 입력해주면 됩니다.SCSSCSS