sass 8
[SCSS] Live SASS 익스텐션 설치 방법
vs code에서 Live SASS 익스텐션을 설치해 보겠습니다. 1. Live SASS 익스텐션 ① Live SASS Compiler란? SASS 혹은 SCSS를 사용하려면 CSS로 반드시 컴파일을 해줘야 하는데요. 이때 cmd를 이용해 명령어로 컴파일을 해줍니다. 컴파일 방법 자세한 컴파일 방법은 위의 버튼에서 확인해 주세요. 그런데 vs code에서는 익스텐션으로 자동으로 컴파일이 가능하다는 사실! 오늘은 vs code에서 그 익스텐션을 이용해 자동으로 컴파일하는 방법을 알아보겠습니다. 나는 대체 그동안 왜 이 기능을 안 썼는가... 2. Live SASS 익스텐션 설치 ① live sass compiler 검색 vs code 가장 왼쪽에 세로로 된 메뉴가 있습니다. 그중 가장 아래 버튼을 클릭하면..
scss를 위해 컴파일러를 설치해보자
scss의 준비단계 컴파일러를 설치해봅시다!! 하드가 날아가니 다시 설치해야 하는 게 한두 개가 아니네요. 그래도 그 김에 하나라도 더 소개해드릴 수 있어서 잘됐죠? 1. 명령 프롬프트 ① 검색 - 시작 줄에서 [cmd]를 검색해 명령 프롬프트를 열어주세요. - 단축키 [window + S]를 누르면 검색창이 바로 뜬답니다. ② 명령 프롬프트 - 이 까만 화면이 명령 프롬프트입니다. - scss를 사용하려면 미리 친해져 봅시다. 2. 컴파일러 설치 ① 명령어 입력 - 설치 방법은 명령어만 알면 간단합니다. - [gem install sass]를 입력해주세요. - 오타가 업나 살펴보고 [엔터]키를 눌러주세요. ② 성공적인 설치 - 엄청 길게 뭔가가 써지고 설치가 됩니다. - 설치가 잘 된다면 표시된 것처럼..
Ruby 언어 설치하고 scss 시작하기
scss는 ruby라는 언어를 기반으로 동작한답니다. 그래서 일단 ruby 설치가 필요해요. 다만, mac을 사용하신다면 기본으로 깔려있으니 윈도우 사용자분들만 추가로 설치해주세요. 1. 설치 파일 다운 https://rubyinstaller.org/ RubyInstaller for Windows Is RubyInstaller for you? RubyInstaller is the easiest and most widely-used Ruby environment on Windows. And Ruby is a great language for beginners as well as professionals. It’s suitable for small scripts as well as large applicat..
[sass/scss] 반복 스타일 한 번에 쓰기
css에서 스타일이 반복될 경우 한 번에 처리하는 법을 알려드릴게요. scss의 장점 중 하나죠! 1. @mixin @mixin 그룹이름{ 속성: 속성 값; } ① mixin - mixin은 반복적으로 쓰이는 스타일을 그룹화해서 사용할 수 있게 해 줍니다. - 변수와 비슷한데, 변수가 한 가지만 넣을 수 있다면 mixin은 여러 개를 넣을 수 있습니다. - [@mixin 그룹 이름{ 속성: 속성 값; }]으로 사용할 수 있습니다. 2. 예시 ① 사용이 필요한 곳 예시 - 위의 코드에서 체크한 것처럼 서로 다른 부분에서 동일한 스타일이 적용된 적이 있을 거예요. - 같이 적자니 선택자가 애매하고, 그렇다고 그냥 적자니 반복되어서 코드가 예쁘지 않아요. - 이렇게 한 번 정리해줄 만한 곳에 사용해주시면 됩니..
[sass/scss] 변수 사용법
scss의 가장 큰 장점은 css와는 달리 변수 선언이 가능하다는 점이 아닐까 싶어요. 변수만 가능해도 유지보수가 한결 수월해지죠. 1. 변수 선언 ① 변수 - 변수 선언 방법은 [$변수 명: 변수 값] 형태로 사용해주시면 됩니다. - 사용하실 때는 [$변수 명]을 적어주시면 된답니다. - 여기에서는 변수에 생상 값을 넣어주었어요. ① 변수 사용 - 위에서 언급했든 [$변수 명]을 적어주시면 사용 가능합니다. - 여기에서는 태그의 색상에 값을 넣어줬네요. 이렇게 원하는 곳에 적어주시면 됩니다. - 변수 명은 나중에 다른 사람이 읽어도 어떤 것인지 알 수 있게 되도록 쉽고 명료하게 적는 게 좋아요. 2. 변수의 범위 ① 전역 변수 - 변수가 적용되는 범위가 정해져 있습니다. - 지금처럼 전역 변수, 즉 어..