퍼블리싱 아카이브

1. Maps ( ) 괄호 안에 Key: Value 의 형태로 저장하여 사용한다. Key는 고유해야 하지만 Value는 중복이 가능하다. 변수를 각각 선언하는 대신, 관련있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다. 안녕하세요! 계묘년 새해복 많이 받으세요! 이번 해는 돈 많이 버세요! //SCSS $font-size: ("h1" : 48px, "h2" : 28px, "p":18px); section{ h1{ font-size: map-get($font-size, "h1"); } h2{ font-size: map-get($font-size, "h2"); } p{ font-size: map-get($font-size, "p"); } } //CSS section h1 { font-size:..

1. Lists(목록형 변수) 리스트는 순서가 있는 값이다. lists의 요소들을 쉼표나 공백 또는 / 로 구분하여 생성하고, 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식한다. 빈 lists를 만들 때나 lists에 들어있는 값이 하나인 경우, [] 나 ()를 사용하여 생성한다. lists 값의 인덱스는 1부터 시작한다. 첫번째 두번째 세번째 //SCSS $main-color: orange; $font-color:white; $btn-width: 100px, 200px, 300px; button{ &:nth-child(1){ color:$font-color; background:$main-color; width: nth($btn-width,1); // width: 100px..

1. Sass/SCSS에서 변수를 왜 사용할까? 스타일을 작성하다 보면, 속성값을 반복해서 사용하는 경우가 많다. 자주 반복되는 스타일을 수정하는 일은 무척 번거로운 작업이다. => 유지보수가 매우 쉬워진다. 그렇다고 해서 무분별하게 변수를 남발해서는 안된다. 타당한 이유가 있는 변수들을 우선순위로 생성한다. 값이 두 번 이상 반복되는 경우 기존의 값을 다른 값으로 변경할 가능성이 높은 경우 변수를 생성하면 된다. 변수명은 직관적인 이름으로 짓는 것이 좋다. 영문자와 숫자, 그리고 -, _를 포함할 수 있다. 컴파일된 CSS 파일에서 변수는 보이지 않는다. 2. 변수 생성하기($) $ 기호를 사용해서 스타일을 적용할 값(색상, 폰트사이즈, 이미지 URL)을 저장한다. 첫번째 두번째 세번째 //SCSS $..