没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
CSS预处理器预处理器Sass详解详解
主要介绍了CSS预处理器Sass详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
跟随小编过来看看吧
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导
入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更
好地组织管理样式文件,以及更高效地开发项目。
1. 特色功能特色功能
1. 完全兼容 CSS3
2. 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
3. 通过函数进行颜色值与属性值的运算
4. 提供控制指令 (control directives)等高级功能
5. 自定义输出格式
文件后缀名称:文件后缀名称:sass有两种后缀名文件,一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,
这种和我们平时写的css文件格式差不多,使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在
此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
2. Sass、、Less语法比较语法比较
2.1 Sass与与Less不同之处不同之处
1. 编译环境不一样——Sass基于Ruby等服务器端环境编译,Less既可以支持服务器端编译也可在客户端(浏览器环境)编
译
2. 变量符不一样——Sass使用$符号声明变量,Less使用@符号声明变量
3. 对于条件语句的支持不一样——Sass支持复杂的条件语句(类似于if..else..),Less仅支持简单的条件语句(类似于if()..)
4. 作用域——Sass局部修改变量可影响全局变量,Less则只会在局部作用域生效。
5. 引用外部CSS文件方式不同——Sass默认引入.sass或.scss文件时可忽略后缀,Less则需要通过关键字配置来控制引入
文件如何处理。
2.2 Sass与与Less相似的地方相似的地方
1. 混入(Mixins)——类似于函数或者宏,并且可以传递参数;
2. 嵌套规则——class中嵌套class,从而减少重复的代码;
3. 运算——CSS中运用加减乘除计算各种数值以及字符串等;
4. 颜色功能——可以通过内置函数编辑颜色;
5. 命名空间(namespace)——分组样式,从而可以被调用;
3. Sass语法主要功能介绍语法主要功能介绍
3.1 CSS功能扩展功能扩展
嵌套规则嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,嵌套功能避免了重复输入父
选择器,而且令复杂的 CSS 结构更易于管理,例如:
//sass style or less style
#main p {
color: #00ff00;
width: 97%;
资源评论
weixin_38649091
- 粉丝: 6
- 资源: 933
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功