웹 개발을 하면서 프론트작업은 대부분 트위터 부트스트랩으로 개발한다.  소스코드를 분석해 보자.  /less/bootstrap.less 으로 전체 구조를 살펴보자. 이 파일에서 모든 스타일시트 정의를 불러온다.

Core variables and mixins

프로젝트에서 사용하는 색상, 크기 등 모든 변수들을 variables.less 파일에 정의한다. 함수 기능을 하는 Mixin은 mixins.less 에서 정의한다. mixins.less 는 다시 /less/mixins 폴더에 있는 각 컴포넌트별 mixins 정의파일들을 불러오게된다.

Reset and dependencies

브라우저마다 스타일시트에 대한 디폴트 정의가 다르다. 예를들어 body 태그에 대한 기본 마진은 사파리, 크롬, 파이어폭스, IE마다 다르게 설정되어 있다. 이러한 브라우저별 기본 스타일시트에 대한 차이를 제거하여 재정의하는 곳이 normalize.less 이다. print.less는 프린트 미디어 쿼리(@media print)에 대해 정의한다. 마지막으로 부트스트랩 아이콘에 대한 정의를 glyphicons.less에서 정의한다. 주석문에 의하면 아이콘도 폰트와 동일하게 다룬다. 그래서 폰트 주소를 임포트시킨 뒤 이를 활용한다. 아이콘 사용시 인라인 컴포넌트와 동일하게 font-size, color 등의 속성을 사용할 수 있겠다.

Core CSS

스캐폴딩, 테이블, 폼, 버튼 등의 자주 사용하는 스타일스트들에 대해 정의한다.

Components

이 부분이 부트스트랩만의 컴포넌트들을 정의한다. alert, dropdown, button-groups, nav등을 각 각 별도의 less 파일에 정의한다.

Components w/ JavaScript

컴포넌트들 중에 모달, 툴팁, 팝오버, 캐로셀은 자바스크립트와 함께 동작하는데 이러한 것들을 정의한다.

Utility classes

마지막으로 좌우 플로팅, 숨기기/감추기 등의 유틸리성 정의를 한다.

새로배운 셀렉터

!important

부모로부터 상속받은 속성에 대해 무시하고 여기에서 정의한 효과로 적용하는 기능.

.pull-right {
  float: right !important;
}

:not()

해당 셀렉터를 제외한 것에 대해 스타일시트 정의. .btn-group>.btn 클래스중 first-child, last-child, .dropdown-toggle을 제외하고 border-radius: 0으로 설정한다는 의미. 예제

.btn-group >
.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

&

중첩 정의(nested)시 사용. .dropdown-menu > li > a 정의 내에서 :hover, :focus에 대해 재정의.

.dropdown-menu > li > a {
  &:hover,
  &:focues {
    text-decoration: none;
  }
}