코딩의숲

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..

sass 공식문서 훑어보기 At-Rules 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 @debug @debug는 js 에서 console.log 찍는것과 똑같다고 보면 된..

sass 공식문서 훑어보기 At-Rules 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 @use - 다른 파일 전체를 해당 파일의 상단에 가져다 붙여줌. @use '파일 u..

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 ..

드디어 숙원 과제 하나가 끝났다. 회사의 퍼블리싱 가이드를 만드는 것이다. 원래는 홈페이지 리뉴얼 작업을 하면서 하나하나 다듬어 나가려고 했지만, 몇달째 디자이너가 공석인 관계로 리뉴얼이 무산이 되었기 때문에 기존 홈페이지의 퍼블리싱 가이드를 만들게 되었다. 사용 언어는 간략하게 html, css, jQuery 이다. 바닐라 자바스크립트였다면 훨씬 좋았겠지만, 가장 손에 익어서 효율적이라고 생각했기 때문에 제이쿼리를 사용 했다. 게다가, 후임자가 아니면 볼 사람도 없는 순수하게 내부 소통용도의 문서이기 때문에 최대한 빠르고 간결하게 만드는 것이 우선이라고 생각했다. 작성 기간은 대략 3~4주 정도 걸린 것 같다. 어려워서가 아니라, 어떤 구성으로 만들어야 할지 고민이되었기 때문이다. ui의 디자인 없이 ..