Router & Sass QnA

SPA가 무엇인가?

• 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

Nesting

부모 루틴 안에서 자식 루틴을 넣어서 짜는 것이라고 보면 된다.
Nestung

라우터를 연결하면 더이상 인덱스 js는 수정하지않아도된다

상속(extend)
sass 에서 특정 선택자를 상속 할 때, @extend 지시자를 사용한다.

작성 방법 : @extend .클래스명; 또는 @extend %클래스명

.box{
	padding:20px;
	border:1px solid #333;
}

.news-box{
	@extend .box;
	background-color:#eee;
}

.list-box{
	@extend .box;
	background-color:#000;	
}

box, .news-box, .list-box { padding: 20px; border: 1px solid #333; }
.news-box { background-color: #eee; }
.list-box { background-color: #000; }

위 코드를 보면 동일한 패딩, 보더를 가지고 배경색만 다를 경우 extend를 이용하면 공통되는 속성값에 대한 클래스를 (,)콤마구분으로 묶어서 출력해주고, 다른 속성값에 대해서만 따로 출력해준다.