Sass 디자이너를위한 9 개의 Mixin 라이브러리
개발 워크 플로우에서 Sass를 사용하면 mixins의 중요성을 알게됩니다. 당신이 쓰여진 몇 가지 것을 볼 때 반복적으로 그리고 지루하게 CSS에, 믹스 인이 반복적 인 작업을 방지 할 수있는 곳입니다. mixin에는 사이트 전체에서 재사용 할 수있는 CSS 선언이 포함되어 있습니다..
개발자가 Sass와 함께 작업 할 때 도움이되는 많은 믹스 인이 개발자에 의해 만들어졌습니다. 대부분 CSS에서 반복적 인 내용을 다루고 있습니다. 에서 여러 브라우저에 적용 에 버튼, 애니메이션 및 전환 효과 만들기, 이것을 다음과 같은 11 개의 mixin 라이브러리에서 찾으십시오. Sass 개발을 위해 얻어야합니다..
1. 부르봉 왕가
Bourbon은 mixin, 함수 및 addons가 포함 된 Sass 라이브러리로, 브라우저 간 사용을 위해 스타일 시트를 간단하게 만들 수 있습니다. 나를 위해, 이것은 가장 훌륭한 Sass mixin입니다. 스타일 시트를 가볍게 유지하면서 웹 사이트의 스타일을 지정하는 데 필요한 거의 모든 것이 포함되어 있습니다..
사용 가능한 각 mixin 및 함수를 사용하려면 전체 설명서를 확인하십시오..
2. Sass CSS3 Mixins
Sass CSS3 Mixins는 다양한 브라우저에서 작동하는 믹스 인을 제공합니다. 배경, 테두리, 상자, 열, 글꼴 - 얼굴, 변형, 전환 및 애니메이션과 같은 모범 사례 믹스 모음을 여기에서 찾을 수 있습니다. 그것은 당신의 스타일링 요구에 충분합니다. 사용하려면 css3-mixins.scss CSS 클래스에서 mixin 호출.
이 mixin을 여기에서 다운로드하십시오..
3. CssOwl
CssOwl은 요소의 위치 (상대 또는 절대)를 설정하고 의사 선택기로 내용을 추가하는 데 유용한 혼합을 제공합니다 ( :후 과 :전에). 또한 스프라이트 요소를 만들 때 유용합니다. 믹스 인은 스프라이트에서 이미지 위치를 설정할 수있는 유연성을 제공합니다. Sass 외에도 CssOwl mixin 라이브러리는 LESS 및 Stylus에서도 사용할 수 있습니다..
4. Breakpoint Sass
Breakpoint는 Sass를 통해 미디어 쿼리를 간단한 방식으로 수행하도록 도와줍니다. 중단 점을 사용하면 변수를 만들고 변수를 정의하는 값을 지정할 수 있습니다. 최소 너비 또는 최대 너비 미디어 쿼리 중. 생성 한 변수에는 의미있는 이름이 있으므로 Sass에서 쉽게 사용할 수 있습니다..
5. 흉작
Scut에는 일반적인 스타일 코드 패턴을 쉽게 구현하는 데 도움이되는 재사용 가능한 Sass 믹스, 자리 표시 자, 함수 및 변수 세트가 포함되어 있습니다. 그것은 페이지 레이아웃과 같은 웹 물건을 만드는 베스트 프랙티스 코드와 스타일 타이핑을 제공합니다. 코드를 더 자주 재사용함으로써 코드를 작성할 때 반복을 줄일 수 있습니다. 따라서 프로세스를보다 체계화 할 수 있습니다..
6. 사프란
Saffron을 사용하면 쉽게 CSS3 애니메이션과 전환 효과를 추가 할 수 있습니다. 페이드 인 / 아웃, 슬라이드 인 / 아웃, 상승 / 하강, 흔들림, 티터, 바운스 및 기타와 같은 기타 효과가 포함 된 12 가지 애니메이션 및 전환이 있습니다. Saffron을 사용하려면 Sass 선언에 mixin을 포함시키고 CSS 클래스 내에서 효과 이름을 호출하십시오. Bower 또는 Gem을 사용하여 Saffron을 설치하거나 Github에서 수동으로 다운로드 할 수 있습니다..
7. 유형 설정
TypeSettings는 Sass 용 툴킷 유형입니다. em (rems 또는 픽셀 대신), vertical rhythm 및 responsive ratio based headlines을 사용하여 모듈 크기로 글꼴 크기를 설정합니다. 이 제품은 Bower와 함께 설치하거나 릴리즈를 다운로드하거나 repo를 복제 할 수 있습니다. 자세한 내용은 해당 페이지를 확인하십시오..
8. Sass 라인
Sass Line은 더 나은 타이포그래피를 만드는 데 도움이되는 Sass 믹스입니다. 그것은 귀하의 글꼴에 rems 단위를 사용하므로베이스 라인 그리드에서 비례하여 작업 할 수 있습니다. Sass Line은베이스 라인 그리드를 기반으로 한 정확한 수직 리듬을 사용하고 각 브레이크 포인트에 대해 모듈러 스케일을 설정하여 웹 사이트의 모든 측면에서 좋은 비율을 얻을 수 있습니다.
사용 방법에 대한 자세한 내용을 보려면 여기로 이동하십시오..
9. Andy.scss
Andy.scss는 빛을 유지하면서 웹 사이트의 모양을 쉽게 개발할 수 있도록 도와주는 유용한 Sass 믹스 컬렉션입니다. 배경에서 애니메이션까지 수십 가지의 믹스 믹스가 있습니다. 거의 모든 공통적 인 CSS 속성이 여기에서 다루어집니다. Github에서 다운로드하십시오..
Sass의 게시물 더보기 :
- Sass 시작하기
- 웅덩이를 파다
- 어떻게 흉칙한 텍스트로 컴파일
- 부트 스트랩 3 사용하기
- Sass & Compass로 온라인 VCard를 작성하는 방법
- CSS 프리 프로세서 비교 : Sass Vs. 적게
- Syntheticically 굉장 스타일 시트 : 나침반에 나침반을 사용하여
- CSS를 Sass & SCSS로 변환하는 방법
