스파르타 코딩클럽 - 리액트 2주차(1)

1. SCSS와 SASS란?

간단하게 말하자면 SCSS와 SASS는 CSS를 편하게 쓰도록 도와주는 친구이다. SCSS는 SASS의 3번째 버전에서 추가된 친구인데, SASS의 모든 기능을 쓸 수 있고 CSS와 호환도 잘 되어있는 친구이다.

• SASS, SCSS 공식문서
  링크텍스트
• SASS, SCSS 테스트 사이트
  링크텍스트

1-1. SCSS써보기!

//scss
div {
	p {
		color: #888888;
		font: {
		    family:sans-serif; 
		    size: 14px;
		}
	}
	
	img {
	    width: 400px;
	}
}

• div 아래에 p, img 태그 스타일을 줄 때, 각각 다른 블럭을 만들어 쓸 필요가 없다.
• 축약형으로 묶을 수 있다. -> xxx-yyy식일 때, 앞에 xxx가 같은 친구끼리 묶어 쓸 수 있다.

//scss
div {
  background-color: green
  &:hover { background-color: blue }
}

.div {
  background-color: green
 &_blue { background-color: blue }
}

• 상위 요소 이어쓰기는 "&"로! 클래스명 등, 글자도 이어쓸 수 있다.

//scss
$defaultSize: 20px;
$className: blue;

p{
	font-size: #{$defaultSize};
	&.#{$className} {color: #{$className}}
}

• 문자열을 치환할 수 있다(즉, 변수를 쓸 수 있다!).