Sass 연인을위한 30 가지 놀라운 자료

/2018-05-04 04:26:58/
Jinora
/사업/

수많은 회의론자들의 예측에도 불구하고, Sass는 전혀 유행이 아니라 CSS 저작을 진정으로 향상시키는 놀랍도록 강력한 도구 세트였습니다.

나는 거대한 Sass 팬이며 많은 여러분도 알고 있으므로 Sass 애호가들을위한 30 가지 놀라운 리소스 목록을 작성했습니다. 여기에는 Sass에 내장되어 프레임 워크, 플러그인, 앱 등 모든 종류의 제품이 있습니다.

프레임 워크 및 그리드 시스템

나침반

나침반은 Sass의 전형적인 동반자입니다. Sass 작업을 그 어느 때보 다 쉽게 해줄 수있는 사전 구축 된 믹스 인과 툴로 가득합니다. Sass를 좋아하지만 뛰어 들지 않고 나침반을 시험해 보지 않았다면 이제 살펴볼 시간입니다.

버번 사스 믹스 인 라이브러리

Compass가 과도하게 보이지만 여전히 멋진 CSS3 믹스 인을 활용하려는 아이디어를 좋아한다면 Bourbon을 확인하십시오. Compass 후에, 그것은 내가 찾은 더 나은 Sass mixin 라이브러리 중 하나입니다.

버번 깔끔한

Bourbon Neat은 Sass와 Bourbon으로 구축 된 그리드 시스템입니다. 매우 간단하고 완벽하게 반응합니다.

기초

재단은 Twitter Bootstrap의 주요 경쟁자입니다. 두 프레임 워크 모두 최소한의 미학을 가지고 있으며 훌륭한 UI 조각으로 가득하며 반응 형 프레임 워크를 갖추고 있습니다. 그래도 최소한 큰 차이가 있습니다. 부트 스트랩은 LESS를 기반으로하고 Foundation은 Sass를 기반으로합니다. Sass 팬이라면 Foundation을 사용하는 것이 좋습니다.

부트 스트랩 사스

Bootstrap과 Sass를 모두 사용하지 않으면이 프로젝트를 확인하십시오.이 프로젝트는 기본적으로 Sass의 LESS Bootstrap 구성 요소를 다시 작성합니다.

Animate.sass

Animate.css는 이전에 쓴 멋진 CSS 애니메이션 라이브러리입니다. Animate.sass는 Sass의 편의성을이 라이브러리에 제공합니다.

다듬는 곳

"Forge는 Sass, LESS 및 CoffeeScript와 같은 프론트 엔드 언어를 사용하여 깔끔한 환경에서 WordPress 테마를 부트 스트래핑하고 개발하기위한 무료 명령 줄 툴킷입니다."

스켈레톤 ASS

스켈레톤은 내가 사용한 최초의 반응 형 그리드 프레임 워크였으며 여전히 좋아합니다. Sass를 사용한 Skeleton의 재 작업이 있습니다.

Susy : 나침반에 대한 반응 형 그리드

그리드는 실제로 다른 측면에 초점을 맞추기 위해 제거되기 전에 나침반의 핵심 부분이었습니다. Susy는 보이드를 채우고 반응 형 그리드를 나침반에 통합하는 방법으로 사용됩니다.

중력 프레임 워크

Gravity는 Sass 기반의 강력한 프론트 엔드 HTML5 프레임 워크입니다.

무테

프레임리스는 그리드를 구성하는 새로운 방법에 대한 제안만큼 프레임 워크가 아닙니다. 꽤 고급스러운 물건이므로 시도하기 전에 잘게 잘 알고 있는지 확인하십시오. Frameless는 Sass에 중점을 두지는 않지만 시작할 수있는 Sass 템플릿이 있습니다.

젠 그리드

나는 최근 Zen Grids의 칭찬을 노래 한 작품을 썼습니다. 아마 지금까지 내가 가장 좋아하는 그리드 시스템 일 것입니다. Zen Grids의 장점은 코드에서 완전히 의미를 유지할 수있는 자유를 유지하면서 그리드 시스템의 모든 이점을 얻을 수있는 방식으로 Sass를 활용한다는 것입니다. 무엇을 더 요청할 수 있습니까?

BlankWork – 유연한 SASS 그리드 시스템

Blankwork은 Zen Grids와 매우 유사합니다. Sass를 사용하여 의미없는 클래스 이름을 자유롭게하는 유연하고 반응적인 그리드 시스템입니다.

320 이상

320 이상은 LESS 및 Sass 버전이 모두 포함 된 반응 형 모바일 최초 상용구입니다.

그리드 세트

Gridset에 대한 자세한 내용은이 기사를 확인하십시오. 반응 형 그리드를 생성하고 관리하는 데 가장 적합한 단일 도구 중 하나입니다. 사용자는 Sass에서 모든 출력 코드를 수신 할 수 있습니다.

버튼 및 UI

Chad Mazzola의 CSS3 버튼

이 멋진 버튼 세트는 Sass와 Bourbon을 모두 사용하여 마술을 작동시킵니다. 결과적으로 다음 프로젝트를 위해 정말 멋지고 철저하게 개발 된 버튼이 설정됩니다.

Zocial

Zocial은 CSS3 소셜 버튼 Sass 프레임 워크입니다. 버튼은 CSS3이며 아이콘은 Sass @ font-face 믹스 인으로 구현됩니다.

팬티 버튼

Sassy Buttons는 엄청나게 커스터마이징이 가능하고 매력적인 버튼을 만드는 데 도움이되는 나침반 확장입니다.

앱

스카우트

스카우트는 가장 아름다운 Sass and Compass 컴파일러가 아니지만 실제로는 확실한 것 중 하나입니다. 무료입니다. 다른 사람들은 당신을 10-20 달러 이상으로 달릴 수 있지만 스카우트는 매력처럼 작동하고 크로스 플랫폼이며 비용은 1 센트가 아닙니다.

코드 킷

CodeKit은 컴파일러의 강력한 힘입니다. LESS, Sass, Stylus, CoffeeScript와 같이 원하는 것을 많이 넣을 수 있습니다. 모든 것을 가져 와서 원하는 표준 코드를 내뱉습니다. 구울 25 달러가 있다면 바로 가십시오.

LiveReload

LiveReload는 CodeKit과 매우 유사하며 메뉴 막대에만 있으며 저장이 이루어질 때마다 브라우저 미리보기를 새로 고칠 수있는 편리함이 제공됩니다. 또한 $ 9.99입니다.

망치

Mac 용 Hammer는 게임 체인저입니다. 정적 사이트를 구축하는 데는 불가능하다고 생각한 마법을 주입합니다. 전체 특종에 대한 내 리뷰를 확인하십시오. 더욱 인상적인 작업 중에서도 Hammer는 Sass를 컴파일합니다. 얼마나 편리한 지!

플러그인

Sass.sugar

Sugars는 MacRabbit의 Espresso 용 플러그인으로, 내가 좋아하는 텍스트 편집기 중 하나입니다. Sass.sugar는 Sass 구문 강조를 Espresso에 추가합니다.

숭고한 텍스트 : Haml & Sass

Sublime Text 사용자를위한 플러그인입니다. ST2의 패키지 관리자를 통해 Sass 플러그인도 사용할 수 있습니다.

Coda Sass 플러그인

Sublime과 Espresso를 다루었으므로 Coda 사용자를 제외시키지 마십시오. 플러그인은 다음과 같습니다.

FireSass for Firebug

FireSass를 통해 Firebug는 Sass에서 생성 한 CSS 스타일의 원래 Sass 파일 이름과 줄 번호를 표시 할 수 있습니다.

다른 케이크

Sass.js

노드 사용자에게 완벽한 Sass의 JavaScript 구현.

중단 점

Breakpoint는 Sass를 사용하여 미디어 쿼리 작성을 더 간단하게 만들고자합니다. "Breakpoint는 미디어 쿼리 작성에서 브라우저 간 호환성 문제 처리에 이르기까지 모든 작업을 처리하므로 중요한 사항에 집중할 수 있습니다. 웹 사이트가 가장 잘 보이는지 확인하십시오."