Family.scss Mixins로 n 번째 자식 선택자 자동화

Sass 현대 CSS를 관리하는 가장 좋은 방법이며 mixin 라이브러리 개발주기 동안 더 많은 시간을 절약 할 수 있습니다..

이 mixin은 다음과 같이 작동합니다. 자동화 된 코드 또는 기능 당신이 당신의 주된 Sass 파일을 호출합니다. 일부 믹스 인은 더 일반적인 반면 다른 믹스 인은 매우 구체적입니다. Family.scss 라이브러리.

이 무료 도서관 제공 26 믹스 인 달리기 복잡한 : n 번째 자식 셀렉터 모든 코드를 암기하지 않고.

대부분의 개발자는 : n 번째 자식 선택기이며 기본적으로 복잡하지는 않습니다. 당신은 단순히 숫자 선택기를 전달하십시오., 예를 들면 : n 번째 자녀 (2) 소속 스타일 규칙이 부모 요소의 모든 두 번째 자식에 적용되는.

그러나 이것은 선택할 때 훨씬 더 복잡해질 수 있습니다. 동적 요소 (예 : 첫 번째 및 마지막)을 선택하거나 소수의 소수 (처음 세 자녀와 같은).

이것은 Family.scss가 도움을 줄 수있는 곳입니다. 매우 작은 라이브러리이며 자식 선택자를위한 26 가지 솔루션이 포함되어 있습니다. 기초에서 최고 복합체에 이르기까지. 각 믹스 인은 홈페이지에 데모가 있습니다. 필요에 따라 찾아보고 필터링 할 수 있습니다..

여기에 몇 가지가있다. 흥미로운 예 이 라이브러리가 할 수있는 것을 과시하기 위해서 :

• 후 첫 번째 (5) - 처음 5 명의 아이들 이후에 모든 요소를 ​​선택하십시오.
• 에서 끝 (3) - 세 번째에서 마지막 자식 요소를 선택하십시오.
• 전부지만 (3) - 3 번째를 제외한 모든 아이들을 선택하십시오.
• ~ 사이 (3, 12) - 3 번째와 12 번째 요소 사이의 모든 짝수 차일드를 선택하십시오.

탐색 할 수있는 수십 가지가 있으며 각각의 데모를 통해 작업 방식을 시각화 할 수 있습니다..

몇 가지 고급 믹스 수량 쿼리 의존 그것들은 “적어도” 또는 “많으면” 특정 범위로 고정. 예를 들어, 최소 5 명의 자식 (또는 그 이상)이있는 부모 요소에 대해 모든 자식을 선택할 수 있습니다..

이러한 아이디어는 독서에 대한 혼란을 야기 할 수 있지만 라이브 데모 정말로 모든 것을 맑게 만들어라..

파고 들면 사본 다운로드 이 모든 데모와 함께 GitHub 레포의 mixin 라이브러리 중 하나입니다. 그리고 트위터 @LukyVJ에서 프로젝트 작성자와 생각이나 질문을 공유 할 수 있습니다..