반응형 Sass6 [Sass/SCSS] At Rules - @use 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. https://sass-lang.com/documentation/at-rules/use 를 참고하였습니다. @use 를 사용하면 다른 Sass 스타일시트로부터 믹스인(mixin), 함수(function), 변수(variable)을 가져올 수 있다. 여러개의 스타일시트를 하나로 합칠 수 있다. @use를 사용하여 가져온 스타일시트를 모듈(Module)이라고 부른다. @use를 사용하여 가져오는 스타일은 여러번 로드되더라도 컴파일된 CSS 파일에는 한번만 표시된다. ❗ 주의할 점 : @use는 다른 규칙.. 2020. 3. 27. [Sass/SCSS] Sass/SCSS 세팅 - Dart Sass 설치하기 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. 우선, Sass 설치를 먼저 해준다. (아래 글 참고) 2020/03/26 - [Programming/Sass(SCSS)] - [Sass/SCSS] Sass/SCSS 세팅 - Sass 프로그램 설치 [Sass/SCSS] Sass/SCSS 세팅 - Sass 프로그램 설치 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오... jiineeee.tisto.. 2020. 3. 27. [Sass/SCSS] 변수(Variables) 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. $변수이름 변수를 사용하여 단순한 속성값 뿐만 아니라, 복잡한 수식 실행, 라이브러리 구성 등의 작업을 수행할 수 있다. ⚡ CSS에서의 변수와 Sass에서의 변수 차이점 (잘 이해한 건지 모르겠다) Sass 변수 - imperative : 변수를 사용한 다음에 값을 변경하면 영향을 미치지 않는다. CSS 변수 - declarative : 변수를 사용한 다음 값을 변경하더라도 영향을 미친다. 💡 Sass 변수는 하이픈( - )과 언더바( _ )를 구분하지 않는다. Ex > $font-size와 $fo.. 2020. 3. 26. [Sass/SCSS] Sass/SCSS 세팅 - Sass 프로그램 설치 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. Scout-App 깔아서 잘 하고 있었는데 @use 플래그가 작동하지 않아서 Sass 프로그램을 설치해서 컴파일 해보기로 했다. 결론부터 말하자면,, 이 방법도 실패하긴 했다 ㅠㅠㅠㅠㅠ 흑 우선 컴파일 방법은 아래와 같이 진행했다. 1. Ruby 설치 (Windows) - https://rubyinstaller.org/downloads/ * Mac은 기본적으로 ruby가 설치되어 있다고 한다. 2. 윈도우 버튼 + R 누르고 cmd 입력해서 Command 창으로 들어간다. 3. Sass 설치 gem .. 2020. 3. 26. [Sass/SCSS] 기초 문법 공부 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. https://sass-lang.com/guide를 참고하였습니다. 변수(Variables) - $변수이름 자주 사용하는 정보들을 변수에 저장하여 사용할 수 있다. example : $main-color: #aaa $font-color: #555 nav{ background-color : $main-color; color : $font-color; } 중첩(Nesting) HTML에서는 중첩 및 계층 구조가 분명하게 구분되지만, CSS는 그렇지 않다. 😥 그러나, Sass(SCSS)는 HTML에서와 .. 2020. 3. 26. [Sass/SCSS] Sass/SCSS 세팅 - Scout-App 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. Sass(SCSS) 란? CSS 전처리기 중 한 종류. CSS 문법과 아주 유사하지만, 선택자의 중첩, 조건문, 반복문 등의 추가적인 기능을 제공한다. Sass와 SCSS의 차이점 SCSS는 CSS와 거의 같은 문법으로 Sass의 기능을 지원한다. 가장 큰 차이점은 아래와 같다. - Sass : 중괄호와 세미콜론 사용 X, 들여쓰기로 선택자의 유효범위를 구분한다. - SCSS : 중괄호로 선택자의 유효범위를 구분한다. Sass(SCSS) 컴파일러 - Scout-App 설치 Sass(SCSS)를 실행하.. 2020. 3. 26. 이전 1 다음 반응형
