코딩의숲

sass 공식문서 훑어보기 At-Rules - Flow Control https://sass-lang.com/documentation/at-rules Sass: At-Rules Much of Sass’s extra functionality comes in the form of new at-rules it adds on top of CSS: @use loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. @forward loads a Sass stylesheet a sass-lang.com @if and @else 우리가 생각하는 그 if와 els..

1. npm으로 설치 및 실행하기 1.1 설치 npm install -g sass 설치가 왼료 되어도 node_moduls 폴더가 생기거나 package.json 파일이 생성되지는 않는다. 따라서 잘 설치 되었는지 확인 하려면 sass --version 명령어를 입력해서 sass 버전이 출력되면 설치 성공!! 1.2 Compile 및 watch 브라우저는 scss, sass를 읽지 못한다. 따라서 브라우저가 읽을 수 있는 css 문서로 변환을 해주어야 하는데, 이것을 컴파일 이라고 한다. 컴파일은 .scss 문서를 변경 할 때마다 되어야 하므로 watch 라는 명령어를 사용해서 파일의 변화를 항상 '감시' 하도록 해줘야 한다. /* 개별파일을 컴파일 하고 싶을 때 */ sass --watch 파일이름.s..

1. 변수사용하기 - 자주 쓰는 색상, 사이즈 등을 변수에 저장해서 불러오는 방법 /* 변수 지정하기 */ $mainColor: pink; $subColor: skyblue; $basicSize: 16px; /* 변수 불러오기 */ #header {background-color: $mainColor; font-size: $basicSize + 6px;} 지정한 변수는 연산도 가능하다. 단, 연산하려는 단위가 같아야 한다. px는 px와, %는 %와.... em은 em 과 연산 가능. css로 컴파일 된 모습 #header { background-color: pink; font-size: 22px; } 2. Nesting 문법 - 자식 요소를 부모요소의 중괄호 안에 넣어서 표기하는 방식 /* ul과 ul ..