1分钟部署网站📞AI智能客服,大模型训练自有数据,简单好用,有效降低客服成本 广告
[TOC] **** # Sass 介绍 英文官网:http://sass-lang.com/ 中文官网:https://www.sasscss.com/sass-guidelines/ 因为你已经使用了 Node.js 来运行 Gulp 或 Grunt 和 PostCSS,所以使用 Sass 最简单的方法就是使用`LibSass`。**而且LibSass编译速度也要比Ruby Sass快很多**。在下面的教程中,将通过`gulp-sass`模块来部署LibSass。 ## 在线书写 [SassMeister | The Sass Playground!](https://www.sassmeister.com/) [an online Playground for Sass.js](http://sass.js.org/) ## RubyGems (gems) RubyGems(简称 gems)是一个用于对 Ruby组件进行打包的 Ruby 打包系统。 它提供一个分发 Ruby 程序和库的标准格式,还提供一个管理程序包安装的工具。 其包含包信息,以及用于安装的文件。 Gem通常是依照`.gemspec`文件构建的,包含了有关Gem信息的YAML文件。 Ruby代码也可以直接建立Gem,这种情况下通常利用Rake来进行。 RubyGems 旨在方便地管理 gem 安装的工具,以及用于分发 gem 的服务器。 RubyGems 大约创建于2003年11月,从Ruby 1.9版起成为Ruby标准库的一部分。 如果你的 Ruby 低于 1.9 版本,也可以通过手动安装: 首先下载安装包:https://rubygems.org/pages/download 。 解压并进入目录,执行命令: ~~~ ruby setup.rb ~~~ ## 更新 RubyGems 命令: ~~~ $ gem update --system # 需要管理员或root用户 ~~~ ## gem命令 `gem`命令用于构建、上传、下载以及安装Gem包。 ## gem用法 RubyGems 在功能上与 Python 的 `pip`、Ubuntu 下的`apt-get`、Centos 的 `yum` 、`portage`和 `npm `非常相似。 # 教程 ## `@import` 导入: sass的导入(`@import`)规则和 CSS 的有所不同,编译时会将`@import`的 scss 文件合并进来只生成一个 CSS 文件。 但是如果你在 sass 文件中,导入时有以下情况: 1. 导入 css 文件如`@import 'reset.css'` 2. 文件名以 http 开头; 3. 文件名 是 url(); 4. 带有任何媒体查询(screen,media queries) 那效果**跟普通CSS导入样式文件一样**,导入的css文件不会合并到编译后的文件中,而是以`@import`方式存在。 所有的sass导入文件都可以忽略后缀名`.scss`。一般来说基础的文件命名方法以`_`开头,如`_mixin.scss`(不会被编译出单独文件)这种文件在导入的时候可以不写下划线,可写成`@import "mixin"`。 ## 注释 sass有两种注释方式,一种是标准的css注释方式`/* */`,另一种则是`//`双斜杆形式的单行注释,不过这种单行注释不会被转译出来。 ## 变量 sass的变量必须是`$`开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号 `:` 分隔开(就像 CSS 属性设置一样),如果值后面加上`!default`则表示默认值。 sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。 # 其他实现 ## [LibSass](https://github.com/sass/libsass) libsass 是一个用 C 语言实现的 Sass 解析器。特点是简单、速度快而且易于集成。 ## [node-sass](https://github.com/sass/node-sass) node-sass 是绑定了 libsass 的为 node.js 实现的 库,可以极快的自动将 `.scss` 文件编译为 `.css` 文件。 ## [gulp-sass](https://github.com/dlmanning/gulp-sass) 轻巧的包裹了 `node-sass` 来实现相应的功能,如果使用时你遇到问题,那么问题可能来自:`libsass`或者`Sass`。 ## [Susy](http://oddbird.net/susy/) Susy 是一款用来为网站创建栅格布局的工具,它所带来的灵活和洒脱超乎想象。无论是 5 列,14 列,还是 48 列,一切都不是问题。不等宽列?So easy。 ## [precss](https://github.com/jonathantneal/precss) precss 囊括了许多插件来通过 PostCSS 支持类似 Sass 的特性,比如 CSS 变量,套嵌,mixins 等。 ## [scss-lint](https://github.com/brigade/scss-lint) 可配置的工具,用于编写干净和一致的SCSS # 工具 随着sass的发展也越来越成熟,以及autoprefixer这样的后处理的出现。好像也使得`compass`,`bourbon`这样的库地位越来越尴尬。而 `compass` 也早在2015年就停止了维护。 需不需要使用 `bourbon` 这样的工具库,每个人的需求也都不相同,大家可以自行选择。 ## [Compass](https://github.com/Compass/compass) `Sass`本身只是一个编译器,`Compass`在它的基础上,封装了一系列有用的模块和模板,补充`Sass`的功能。它们之间的关系,有点像`Javascript`和`jQuery`、`Ruby`和`Rails`、`python`和`Django`的关系。 对我来说,Compass一个最大的特性是,解决了浏览器前缀的问题。不用担心没输入浏览器前缀而引起的浏览器渲染问题。 (!!!已经停止维护) [Compass用法指南](http://www.ruanyifeng.com/blog/2012/11/compass.html) [Sass Frameworks: Compass or Bourbon?](https://www.sitepoint.com/compass-or-bourbon-sass-frameworks/) [我为什么不再用Compass写CSS(缺点分析)](http://ourjs.com/detail/54ed5397232227083e000035) ## Bourbon 类似于`compass`,[Bourbon](http://bourbon.io/) 是一个轻量级的`SASS mixin`库。官方介绍说`bourbon`有以下三个优势: * 没有第三方依赖,是纯净的sass * 文档简洁明了,清晰易读 * 轻量级 [bourbon使用](https://www.jianshu.com/p/667ecffec802) ## Bitters http://bitters.bourbon.io/ ## Susy http://susy.oddbird.net/ ## [jeet](http://jeet.gs/) ## Rucksack [Rucksack](https://github.com/seaneking/rucksack) 是一款有趣的CSS工具,让CSS的开发过程更加有趣了。Rucksack 是基于PostCSS构建的,模块化设计,没有冗余,运行起来飞快。将Rucksack融入到你的开发流程是很简单的,Rucksack对绝大多数的工具都有相应的插件。由于它是基于PostCSS来构建的,所以它同其他的CSS处理工具都能很好的兼容,甚至能够同Stylus直接协同。 [25 Essential Sass and Compass Tools](https://mashable.com/2013/06/11/sass-compass-tools/) codepen 上还有css有趣插件 # 编写规范 [编写稳健、可维护和可扩展的 Sass](https://sass-guidelin.es/zh/) [rscss 的中文翻译](https://github.com/suhaotian/rscss-zh-cn) 这篇文档适合有一定 sass 经验的人阅读 :) # 参考 [sass在线玩耍](https://www.sassmeister.com/) [使用Susy构建Web布局更简单](http://cdn1.w3cplus.com/node/1509)