《Sass研究与学习》由会员分享，可在线阅读，更多相关《Sass研究与学习（53页珍藏版）》请在金锄头文库上搜索。
1、Sass是这个世界上最成熟 稳定和强大的专业级CSS扩展语言 Sass Sass官网http sass 1 目录 Sass介绍 2 Css预处理器 Css预处理器定义了一种 中间语言 将Css作为目标生成文件 为Css增加了 编程 的特性 开发者使用这种语言进行编码 然后再编译成正常的Css文件供项目使用 易于阅读 易于维护 适应性强 Sass Scss LessStylus TurbineSwithchCSSCSSCacheerDTCSS 3 Sass Sass是最早的Css预处理语言 采用Ruby语言编写 诞生于2007年 刚开始不被大众接受 使用率不高 由于其强大的功能和RubyonRa
2、ils的大力推动 很多人选择了Sass Sass从第三代开始 放弃了缩进式风格 并且完全向下兼容普通的Css代码 这一代的Sass也被称为Scss 功能丰富 成熟 兼容CSS语法 社区 前端框架基石 久经考验 4 Sass Scss Sass和Scss平时都称之为Sass 是同一个东西 区别有两点 1 文件后缀 扩展名 不同 Sass以 sasss 为扩展名 Scss以 scss 为扩展名 2 书写方式 语法 不同 Sass以严格的缩进式语法规则来书写 不带大括号和分号 Scss的书写方式和Css语法非常类似 越来越受欢迎原因之一 5 目录 Sass安装及编译 6 Mac下安装Sass Sas
3、s基于Ruby语言开发 因此安装Sass前需要安装Ruby Mac预装了Ruby 所以直接在 终端 执行命令即可 geminstallsass 这将为您安装Sass和任何依赖项 如果你得到一个错误消息 可能需要使用sudo命令安装Sassgem sudogeminstallsass sass v 它应该返回Sass3 x x SelectiveSteve 恭喜你 你已经成功安装了Sass 7 Windows下安装Sass 1 首先需要安装Ruby 先从官网下载Ruby并安装 http rubyinstaller org downloads 8 Windows下安装Sass 安装完成后需测试安装
4、有没有成功 运行CMD输入以下命令 ruby v 如安装成功会打印 ruby2 2 2p95 2015 04 13revision50295 i386 mingw32 如上已经安装成功 因为国内网络的问题导致gem源间歇性中断 因此需要更换gem源 9 Windows下安装Sass 2 使用淘宝的gem源 https ruby taobao org 如下 删除原gem源gemsources removehttps rubygems org 添加国内淘宝源gemsources ahttps ruby taobao org 打印是否替换成功gemsources l 更换成功后打印如下 CURREN
5、TSOURCES https ruby taobao org 10 Windows下安装Sass 3 安装Sass geminstallsass 安装完成后 可以通过命令来确认应用已经正确地安装到了电脑中 sass v 它应该返回Sass3 x x SelectiveSteve 安装成功 11 Sass常用命令 Sass常用更新 查看版本 卸载等命令 更新Sass 维护Sass的团队会不断的为Sass添加新的功能 保持最新版本无须卸载 只需要执行更新命令即可 gemupdatesass 查看Sass版本 检测是否安装成功sass v 查看Sass帮助sass h 卸载Sassgemuninst
6、allsass 12 Sass编译 命令行编译 终端 CMD GUI软件编译 如CodeKit Koala Compass Scout自动化编译 如Gulp Grunt Sass四种编译格式 Nested嵌套expanded展开compact紧凑compressed压缩 单文件编译sassinput scssoutput css 单文件监听sass watchinput scss output css 监听整个目录sass watchapp sass public stylesheets 13 安装Compass 安装Compass geminstallcompass sass v 它应该返回
7、Compass1 x x Polaris 安装成功 compasscreatemyproject 创建项目 compasscompile 编译compasswatch 监听 14 目录 Sass基础 15 变量 普通变量 Scss 编译后css 默认变量 Scss 编译后css Sass使用美元符号 来声明变量 16 变量 Sass的默认变量一般是用来设置默认值 然后根据需求来覆盖的 覆盖的方式也很简单 只需要在默认变量之前重新声明下变量即可 Scss 编译后css default 的作用在于降低变量的优先级 备胎 不至于因为排序的问题覆盖掉上一条的相同命名的变量 它的使用场景大多在组件化开发
8、中 global 慎用 它完全破坏了作用域规则 17 全局变量 局部变量 可以简单地这么理解 全局变量就是定义在元素外面的变量 局部变量是定义在元素内部的变量 Scss 编译后css 18 全局变量的影子 当在局部范围声明一个已经存在于全局范围内的变量时 局部变量就成为了全局变量的影子 局部变量基本上只会在局部范围内覆盖全局变量 Scss 编译后css 19 import Sass扩展了Css的 import规则 让它能够引入Scss和Sass文件 所有引入的Scss和Sass文件都会被合并并输出一个单一的Css文件 另外 被导入的文件中所定义的变量或mixins都可以在主文件中使用 impo
9、rt 通过一个 import引入多个文件 如果不希望引入的Sass文件被编译为单独的Css文件 需要在文件名前面加一个下划线 引入时可以省略掉文件名前面的下划线 例如有个引入的文件 colors scss 无须带下划线和后缀 20 嵌套 Sass的嵌套分为三种 选择器嵌套 属性嵌套 伪类嵌套 Html Css Scss 选择器嵌套 21 嵌套 Css有一些属性前缀相同 只是后缀不一样 比如 border top border right 还有margin padding font等属性 可以使用 Css Scss 属性嵌套 22 嵌套 伪类嵌套和属性嵌套非常类似 不过它需要借助 符号一起配合使
10、用 Scss 编译后css 伪类嵌套 23 混合宏 项目中有几处小样式类似 可以使用变量来统一处理 需要重复使用大段的样式时 变量就无法达到目的了 这个时候就需要混合宏来搞定 不带参数混合宏 复杂的混合宏 mixin用来声明混合宏 类似Css中的 media font face include用来来调用声明好的混合宏 带参数混合宏 24 混合宏 声明 编译后css 调用 声明 调用 声明 编译后css 调用 传一个参数值 传参 不带值 25 混合宏 传参 带值 传参 多个值 声明 传一个默认参数值 编译后css 调用 声明 调用 传多个参数值 编译后css 26 混合宏的缺点 混合宏对于复用重
11、复的代码块很方便 但它会生成冗余的代码块 相同代码块不能智能合并 比如在不同的地方调用一个相同的混合宏时 声明 调用 编译后css 27 继承 Sass通过关键词 extend来继承已存在的类样式块 实现代码的继承 Scss 编译后css 28 占位符 Sass的占位符 placeholder声明的代码 如果不被 extend调用的话 不会产生任何代码 避免了代码冗余的产生 未被调用 被调用 编译后css 只存在于SCSS文件中 合并了相同代码 29 什么时候用啥 占位符独立定义 不调用时不产生任何代码 继承首先有一个基类存在 不管调用不调用 基类的样式都将会编译到Css代码中 来看一个表格
12、30 插值 使用Css预处理器的一个主要原因是想获得一个更好的结构体系 你想写更干净的 高效的 面向对象的Css Sass中的插值是重要的一部分 Scss 编译后css 31 插值 Scss 编译后css 当你想设置属性值的时候你可以使用字符串插入进来 另一个有用的用法是构建一个选择器 上面的代码在编译时会报错 errorstyle scss Line7 InvalidCSSafter ncludeupdated expected was flag 不是随处可用 也不能在mixin中调用 可以在 extend中使用 Scss 32 加法 减法 Scss 编译后css 加法 Scss 单位不同
13、编译时会报错 编译后css 减法 单位不同 编译时会报错 33 乘法 除法 Scss 编译后css 乘法 Scss 编译后css 除法 这些编译时都会报错 Scss 编译后css 34 除法 被当作除法运算符的情况 Scss 数值或它的任意部分存储在变量中或是函数的返回值 数值被圆括号包围 数值是另一个数学表达式的一部分 编译后css Scss 编译后css 35 变量计算 Sass除了可以使用数值进行运算之外 还可以使用变量进行计算 这使得Sass的数学运算功能变得更加实用 Scss 编译后css 36 颜色运算 数字运算 Scss 编译后css 颜色 分段运算 Scss 编译后css 数字
14、 数字运算包括前面介绍的 加法 减法 乘法 除法等 用括号来修改运算顺序 Scss 编译后css 37 字符运算 Sass中可以通过加法符号 来对字符串进行连接 Scss 编译后css Scss 编译后css Scss 编译后css 引号在 左侧 编译后带引号 引号在 右侧 编译后不带引号 38 目录 Sass的控制语句 39 if指令 if指令可以根据条件来处理样式块 条件为true返回一个样式块 false返回另外样式块 除了 if之外 还可以配合 else elseif使用 Scss 编译后css 40 for循环 for循环有两种形式 for ifromthrough包括end这个数
15、for ifromto不包括end这个数 Scss 编译后css Scss 编译后css 41 for循环 for应用在网格系统的示例代码 Scss 编译后css 42 each循环 each循环就是去遍历一个列表 然后从列表中取出对应的值 each varin var是个变量名 返回一个列表值 变量 var会在列表中做遍历 并且遍历出与 var对应的样式块 Scss 编译后css 43 while循环 while循环和 for类似 后面的条件为true就会执行 并且会生成不同的样式块 直到表达式值为false时停止循环 Scss 编译后css 44 目录 Others 45 注释 良好的注释
16、能帮助自己或者别人阅读源码 Sass的注释有两种方式 Scss 编译后css 1 类似CSS的注释方式 我是注释信息 2 类似JavaScript的注释方式 我是注释信息 46 函数 Sass自备一系列的函数功能 主要包括 字符串函数 数字函数 列表函数 Introspection函数 三元函数 颜色函数等 还可以自定义函数 字符串函数unquote string 删除字符串中的引号 quote string 给字符串添加引号 To upper case 将字符串小写字母转换成大写字母 To lower case 将字符串转换成小写字母 数字函数percentage value 将一个不带单位的数转换成百分比值 round value 将数值四舍五入 转换成一个最接近的整数 ceil value 将大于自己的小数转换成下一位整数 floor value 将一个数去除他的小数部分 abs value 返回一个数的绝对值 min numbers 找出几个数值之间的最小值 max numbers 找出几个数值之间的最大值 random 获取随机数 47 函数 列表函数length list
