• css & sass 분석
  • parent selector , SASS
  • Pseudo-elements 중 하나인 ::before

css & sass 분석

• 위키의 SCSS 분석중
• _base.scss에 다음과 같은 문장은…

  
  1
  2
  3
  
  .post-content h1,h2,h3,h4,h5,h6 {
      &:before { color:$theme-color; }
  }
  
  

• 아래와 같이 render 된다

  
  1
  2
  3
  
  .post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
      color: #47146C;
  }
  
  

parent selector , SASS

• 여기서 &가 뭔지 몰라 찾아봤다
• CSS 문법은 아니고 sass 문법임. Parent Selector
• 간단하게 말하면 nested selector에서 바깥쪽 selector로 치환해주는 역할을 한다
• 2014년 배포된 Sass 3.4 Release 부터 반영되었다
• 참고 링크 : jekyll sass

Pseudo-elements 중 하나인 ::before

• 관련링크 : ::before (:before)
• CSS의 가상요소(Pseudo-element)란?
• 실체가 있지 않아도 특정 element 바로 앞의 요소를 지칭하여 CSS 속성을 정할수 있다
• 이 경우는 각각의 header 앞에 있는 글머리표의 속성을 지정하고 있다