Sass研究与学习

@for $i from <start> to <end>
// Scss
不包括end这个数
// Scss
// 编译后css
// 编译后css
@for 循环
@for应用在网格系统的示例代码：
// Scss
// 编译后css
@each 循环
@each 循环就是去遍历一个列表，然后从列表中取出对应的值。 @each $var in <list>, $var 是个变量名，<list>返回一个列表值。变量
兼容 CSS 语法
功能 丰富
成熟
久经 考验
社区
前端 框架 基石
Sass & Scss Sass和Scss平时都称之为Sass，是同一个东西。区别有两点：
1、文件后缀 (扩展名) 不同:
Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；
2、书写方式 (语法) 不同:
Sass 以严格的缩进式语法规则来书写，不带大括号和分号; Scss 的书写方式和 Css 语法非常类似（越来越受欢迎原因之一）。
// 不带参数混合宏 // 复杂的混合宏
// 带参数混合宏
混合宏
声明&调用：
// 声明
传参(不带值)：
/一个参数值
// 编译后css
// 编译后css
混合宏
传参(带值)：
// 声明，传一个默认参数值 // 调用 // 编译后css
传参(多个值)：
// 声明 // 调用，传多个参数值 // 编译后css
sudo gem install sass
sass -v 它应该返回Sass 3.x.x (Selective Steve) 恭喜你！你已经成功安装了Sass。
Windows下安装Sass
1、首先需要安装Ruby，先从官网下载Ruby并安装： /downloads
变量
Sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的 方式也很简单，只需要在默认变量 之前 重新声明下变量即可。
// Scss // 编译后css
!default; 的作用在于降低变量的优先级（备胎），不至于因为排序的问题 覆盖掉上一条的相同命名的变量。它的使用场景大多在 组件化开发 中。 !global; 慎用，它完全破坏了作用域规则。
compass compile compass watch
// 创建项目，
// 编译 // 监听
注意： 创建项目成功后，目录里会有一个 config.rb 配置文件。
目录
Sass基础
变量
Sass 使用美元符号“$”来声明变量。
普通变量：
// Scss // 编译后css
默认变量：
// Scss // 编译后css
// Scss // 编译后css
// Scss
// 编译后css
变量计算
Sass 除了可以使用数值进行运算之外，还可以使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。
// Scss
// 编译后css
颜色运算、数字运算
颜色（分段运算）：
// Scss
数字：
// Scss
// 编译后css
注意： 声明一个只使用一次或永远不需要更新的变量是没有意义的。
全局变量&局部变量
可以简单地这么理解：全局变量就是定义在元素外面的变量，局部变量是 定义在元素内部的变量。
// Scss // 编译后css
全局变量的影子
当在局部范围声明一个已经存在于全局范围内的变量时，局部变量就成为 了 全局变量的影子 。局部变量基本上只会在局部范围内覆盖全局变量。
// 编译后css
// 上面的代码在编译时会报错：
error style.scss (Line 7: Invalid CSS after
"...nclude updated-": expected "}", was "#{$flag};")
加法、减法
加法：
// Scss
减法：
// Scss
// 编译后css // 编译后css
// Scss // 编译后css
@import
Sass扩展了Css的@import规则，让它能够引入Scss和Sass 文件。所有引 入的Scss和 Sass 文件都会被合并并输出一个单一的Css文件。 另外，被
导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
// @import // 通过一个 @import 引入多个文件
Nested 嵌套 expanded 展开 compact 紧凑 compressed 压缩
安装Compass
安装Compass： gem install compass sass -v 它应该返回Compass 1.x.x (Polaris)，安装成功。
compass create myproject
// 编译后css
// Scss // 数字运算包括前面介绍的：加法、减法、 乘法、除法等。用括号来修改运算顺序。
// 编译后css
字符运算
Sass中可以通过加法符号“+”来对字符串进行连接。
// Scss
// Scss
// 编译后css // 编译后css // Scss
// 引号在+左侧，编译后带引号 // 编译后css // 引号在+右侧，编译后不带引号
// 未被调用 // 只存在于SCSS 文件中 // 被调用 // 编译后css // 合并了相同代码
什么时候用啥
占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在， 不管调用不调用，基类的样式都将会编译到 Css 代码中。
来看一个表格：
插值
使用Css预处理器的一个主要原因是想获得一个更好的结构体系。你想写 更干净的、高效的、面向对象的Css，Sass中的插值是重要的一部分。
注意： 合理使用嵌套。嵌套的层级越深，编译出来的CSS代码选择器层级也会越深。
嵌套
Css 有一些属性前缀相同，只是后缀不一样，比如：border-top/borderright，还有 margin、padding、font 等属性。可以使用： 属性嵌套：
// Css // Scss
嵌套
伪类嵌套和属性嵌套非常类似，不过它需要借助`&`符号一起配合使用。
Sass
Sass是这个世界上最成熟、稳定和强大的专业级CSS扩展语言。
—— Sass官网
目录
Sass介绍
Css预处理器 Css预处理器定义了一种“中间语言”，将 Css 作为目标生成
文件，为 Css 增加了“编程”的特性，开发者使用这种语言
进行编码，然后再编译成正常的 Css 文件供项目使用。 Sass(Scss) Less Stylus
目录
Sass安装及编译
Mac下安装Sass
Sass基于Ruby语言开发，因此安装Sass前需要安装Ruby。 Mac预装了Ruby，所以直接在“终端”执行命令即可。
gem install sass
这将为您安装Sass和任何依赖项。 如果你得到一个错误消息，可能需要使用sudo命令安装Sass gem:
Sass编译
命令行编译：终端、CMD
// 单文件编译 sass input.scss output.css // 单文件监听 sass --watch input.scss:output.css // 监听整个目录 sass --watch app/sass:public/stylesheets
GUI软件编译：如 CodeKit、Koala、Compass、Scout 自动化编译：如 Gulp、Grunt Sass四种编译格式:
混合宏的缺点
混合宏对于复用重复的代码块很方便，但它会生成冗余的代码块，相同代 码块不能智能合并。比如在不同的地方调用一个相同的混合宏时。
// 声明、调用 // 编译后css
继承
Sass通过关键词 @extend 来继承已存在的类样式块，实现代码的继承。
// Scss // 编译后css
占位符
Sass的占位符 %placeholder 声明的代码，如果不被 @extend 调用的话， 不会产生任何代码。避免了代码冗余的产生。
Windows下安装Sass
3、安装Sass： gem install sass 安装完成后，可以通过命令来确认应用已经正确地安装到了电脑中： sass -v 它应该返回Sass 3.x.x (Selective Steve)，安装成功。
Sass常用命令
Sass常用更新、查看版本、卸载等命令： // 更新Sass。维护Sass的团队会不断的为Sass添加新的功能，保 持最新版本无须卸载，只需要执行更新命令即可。 gem update sass // 查看Sass版本、检测是否安装成功 sass -v // 查看Sass帮助 sass –h // 卸载Sass gem uninstall sass
// Scss // 编译后css
说明： @each...in...语句会在 Sass进阶 中介绍。
插值
当你想设置属性值的时候你可以使用字 符串插入进来。另一个有用的用法是构 建一个选择器。 // Scss #{}不是随处可用，也不能在 mixin 中调用， 可以在 @extend 中使用。
// Scss
Turbine
Swithch CSS
CSS Cacheer
DT CSS
适应 性强
易于 阅读
易于 维护
Sass Sass是最早的Css预处理语言，采用Ruby语言编写，诞生于