본문 바로가기

👩🏻‍💻STUDY/SASS

(4)

[SASS] @mixin @content @include 🔺문제 @include 선언 후 추가 스타일 지정이 안됨. parent의 child 스타일 지정 안됨. .parent { @include mix() { // 스타일지정 } ( // Error ) // Error .child { } } html 구조 BOX1 BOX2 BOX3 @mixin @mixin 믹스인이름($매개변수: 기본값) { 스타일; } @include 믹스인이름(인수); @content @mixin 믹스인이름() { 스타일; @content; } @include 믹스인이름() { // 스타일블록 스타일; } @mixin position( $p: absolute; $t: null, $b: null, $l: null, $r: null ) { position: $p; top: $t; bottom: ..

[SASS] Node로 sass 시작하기 1. CLI로 sass 설치 Node.js 설치가 되어 있어야 됨. npm install sass -g 로 CLI 에 설치. 2. sass 버전 확인 $ npm show sass version $ sass --version 3. 해당 디렉토리에 scss -> css 변환 $ sass style.scss style.css $ sass 입력. 폴더 안에 있을 경우, $ sass scss/style.scss style.css 4. sass 보기 , 끝내기 --watch라는 플래그를 넣어 해당 파일 자동으로 변환. $ sass --watch style.scss:style.css 아래처럼 폴더 내 모든 파일들을 컴파일할 수 있다. sass --watch : $ sass --watch scss:css sass 실시..

[SASS] css 전처리기 컴파일러 koala(코알라) 1. 코알라 다운 2. 코알라에서 + 를 누른 후 컴파일 할 scss파일을 선택한다. 3. 폴더 지정없이 진행하려면 6번부터 보면된다. 컴파일할 css 파일을 scss와 다른 경로에 저장하려면 여기서부터 보면됨. style.scss에서 우클릭 후, [set Output Path] 선택. 4. 3번에서 scss 파일을 선택하면 같은 경로에 css파일이 저장된다. 이 css 파일을 내가 넣을 폴더에 넣고 진행만 하면 된다. 5. 그럼 경로가 아래 이미지처럼 확인됨. 6. 컴파일 된 css를 어떻게 구조화할지 선택할 수 있다. (output style 선택) nested ul { font-family: Georgia; color: #333; } ul li { display: inlne-block; } exte..

[SCSS] vscode로 sass compiler하기 브라우저에서는 CSS만 인식한다. 그러므로 Sass는 서버에서만 확인이 가능하다. 그럼에도 Sass를 쓰는 이유는 표준css보다 많은 기능(변수, 조건문, 함수 등)을 사용해서 편리하게 작성할 수 있기 때문이다. Sass로 작성하고 css로 컴파일(compile)하여 동작시킨다. 브라우저에서는 [파일명.scss]를 인식하지 못하므로, [파일명.scss]를 [파일명.css]로 변환해주는 작업이 필요하다. Live server 를 다운받아 서버를 통해 본다. Sass 설치방법 node-sass ruby koala vscode 확장플러그인 설치 그중에서 가장 쉬운 vscode로 설치하는 방법을 알아보자. 1. 먼저 기본세팅. test.html 를 만들어 test.css의 링크를 걸어준다. // test.htm..

이전 1 다음

티스토리툴바