很棒的Sass::artist_palette:很棒的Sass和SCSS框架,库,样式指南,文章和资源的精选清单

  • L8_112627
    了解作者
  • 34.2KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 02:15
    上传日期
很棒的Sass::artist_palette:很棒的Sass和SCSS框架,库,样式指南,文章和资源的精选清单
awesome-sass-master.zip
  • awesome-sass-master
  • LICENSE.md
    6.4KB
  • awesome-sass-logo-github.png
    27.8KB
  • README.md
    16.2KB
  • contributing.md
    625B
内容介绍
![Awesome Sass](https://raw.githubusercontent.com/Famolus/awesome-sass/master/awesome-sass-logo-github.png) # Awesome Sass [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) > Curated list of awesome [Sass](http://sass-lang.com/) and [SCSS](http://sass-lang.com/) frameworks, libraries, style guides, articles, and resources. - Use <kbd>command</kbd> + <kbd>F</kbd> or <kbd>ctrl</kbd> + <kbd>F</kbd> to search for a keyword. - Contributions welcome, please see [contribution guide](contributing.md). ## Contents - [About](#about) - [Getting Started](#getting-started) - [Sass vs SCSS](#sass-vs-scss) - [Frameworks](#frameworks) - [Libraries and Mixins](#libraries-and-mixins) - [Grid](#grid) - [Media Queries](#media-queries) - [Color](#color) - [Typography](#typography) - [Animation](#animation) - [Miscellaneous](#miscellaneous) - [Style Guides](#style-guides) - [Articles](#articles) - [Tools](#tools) - [Books](#books) - [Videos](#videos) - [Community](#community) ## About [Sass](http://sass-lang.com/) is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension `.scss`. The second, older syntax is known as the indented syntax (or just "Sass"). Inspired by Haml's terseness, it's intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension `.sass`. ## Getting Started - [Official Sass and SCSS Guide](http://sass-lang.com/guide) - Official Sass and SCSS guide. - [Tutorialzine](http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/) - Learn SASS in 15 minutes tutorial. - [Codecademy](https://www.codecademy.com/learn/learn-sass) - Learn Sass with Codecademy. - [Lynda](https://www.lynda.com/SASS-training-tutorials/1435-0.html) - Learn how to use Sass, from beginner basics to advanced techniques, with online video tutorials taught by industry experts. - [Official Sass and SCSS Reference](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) - Official Sass and SCSS Documentation Reference. - [SitePoint Sass and SCSS Reference](https://www.sitepoint.com/sass-reference/) - SitePoint Sass and SCSS reference. ## Sass vs SCSS - [SitePoint](https://www.sitepoint.com/whats-difference-sass-scss/) - What’s the difference between Sass and SCSS? - [The Sass Way](http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better) - Which syntax is better? - [Stack Overflow](http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass) - What's the difference between SCSS and Sass? ## Frameworks - [avalanche](https://avalanche.oberlehner.net) - Framework for building the foundation for a package based CSS workflow. - [Bootstrap 4](https://github.com/twbs/bootstrap) - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. - [Bootstrap-sass](https://github.com/twbs/bootstrap-sass) - Official Sass port of Bootstrap 2 and 3. - [Bulma](https://github.com/jgthms/bulma) - Modern CSS framework based on Flexbox. - [Cirrus](https://github.com/Spiderpig86/Cirrus) - A component and utility centric SCSS framework designed for rapid prototyping. - [Foundation for Sites](https://github.com/zurb/foundation-sites) - The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device. - [Hocus-Pocus](https://bkzl.github.io/hocus-pocus/) - Universal and lightweight stylesheet starter kit that focuses on base html elements and typography. - [iotaCSS](https://www.iotacss.com) - Open source Sass-based OOCSS framework built for scale. - [Kickoff](http://trykickoff.com) - Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites. - [Materialize](http://materializecss.com) - Modern responsive front-end framework based on Material Design. - [mini.css](http://minicss.org/) - Minimal, responsive, style-agnostic CSS framework. - [Scooter](http://dropbox.github.io/scooter/) - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox. - [Sierra](http://sierra-library.github.io/) - Micro SCSS library to help you build websites, without all the arbitrary selectors. ## Libraries and Mixins ### Grid - [Avalanche](http://colourgarden.net/avalanche) - Lightweight, responsive, Sass-based, BEM-syntax grid system. - [csswizardry-grids](http://csswizardry.com/csswizardry-grids/) - Simple, fluid, nestable, flexible, Sass-based, responsive grid system. - [Griddle](http://necolas.github.io/griddle/) - Extremely flexable CSS grid constructor. - [Gridlex](http://gridlex.devlint.fr/) - Flexbox grid system. - [Jeet](https://github.com/mojotech/jeet) - Simple fractional grid system for Sass and Stylus. - [Neat](http://neat.bourbon.io/) - Lightweight semantic grid framework built with Sass. - [Sass Flexible Grid System](https://dnomak.com/flexiblegs/install/sass/) - Sass flexible grid system. - [SCSS Flexible Grid System](https://dnomak.com/flexiblegs/install/scss/) - SCSS flexible grid system. - [Susy](https://github.com/oddbird/susy) - Responsive layout toolkit for Sass. - [Toast](http://daneden.github.io/Toast/) - Flexible and lightweight grid framework from the creator of [animate.css](https://daneden.github.io/animate.css/). - [Waffle Grid](https://lucasgruwez.github.io/waffle-grid/) - Easy to use flexbox grid system. ### Media Queries - [Breakpoint](https://github.com/at-import/breakpoint) - Breakpoint makes writing media queries in Sass super simple. - [include-media](https://eduardoboucas.github.io/include-media/) - Simple, elegant and maintainable media queries. - [mq-scss](https://github.com/Dan503/mq-scss) - An extreamly powerful but easy to use Sass media query mixin. - [Sass MediaQueries](http://rafalbromirski.github.io/sass-mediaqueries/) - Collection of useful media queries mixins for Sass (including iOS devices, TVs and more). - [Sass MQ](https://github.com/sass-mq/sass-mq) - Sass mixin that helps you compose media queries in an elegant way. ### Color - [brand-colors](http://brand-colors.com/) - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS. - [Open color](https://github.com/yeun/open-color) - Open color is a color scheme for UI design. Available in CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette. - [sass-planifolia](https://github.com/xi/sass-planifolia) - Advanced color manipulation and contrast calculation in vanilla Sass. - [scss-blend-modes](https://github.com/heygrady/scss-blend-modes) - Using standard color blending functions in Sass. ### Typography - [Sassline](https://sassline.com/) - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale. - [Sassy-Gridlover](https://github.com/hiulit/Sassy-Gridlover) - Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app. - [Shevy](http://kyleshevlin.github.io/shevy/) - Typography made easy. A vertical rhythm library. - [Typi](https://github.com/zellwk/typi) - Sass mixin to make responsive typography easy. ### Animation - [Animate.scss](https://github.com/geoffgraham/animate.scss) - Port of Dan Eden'
评论
    相关推荐
    • guide.css:CSS SCSS SASS样式指南和编码标准
      TH_NK CSS / Sass样式指南 CSS和Sass的最合理的方法 目录 --- --- - - -占位符-嵌套选择器 术语 规则声明 “规则声明”是赋予选择器(或一组选择器)以及一组随附属性的名称。 这是一个例子: . listing { ...
    • SCSS-SASS教程
      SCSS-SASS教程 大家好! 这是我在SASS上的YouTube教程的GitHub存储库。 您可以在此处找到播放列表-https: PLI2MfgGPNO72awyroDvgLySt_CinTe-
    • Css to SCSS or SASS Converter-crx插件
      简单实用的扩展程序,可将CSS转换为SASSSCSS 这是一个简单但有用的扩展,可以直接从DevTools将CSS转换为SassSCSS。 当您在DevTools中编写小CSS片段并且需要放在您的sass / scss文件中时,它会派上用场。 该选项...
    • sass-scss
      sass-scss
    • scss-tooltips:SCSS Sass工具提示混合
      Sass / SCSS混合工具提示。 纯CSS,不需要额外HTML元素,也不需要Javascript。 你如何使用它? 如demo.scss中所示,您可以使用默认或覆盖的值将tooltip的类定义为tooltip提示mixin中的参数。 然后使用...
    • practice-sass:SCSS SASS的第一个工作
      练习无礼 SCSS SASS的第一个工作
    • scss
      .sass和.scss这两种的区别在于.sass文件对代码的布局非常非常严格的缩进要求,而且没有大括号,没有分号。 1.变量 定义变量 $变量名:变量值; /*$var_name:var_value*/ $btn - pramary - col or : # fff !default; ...
    • sass库:ptg scss
      sass库:ptg scss
    • temp-dev-scsssassテンプレート
      temp-dev-scsssassテンプレート