安装Sass

sass基于Ruby语言开发而成,安装sass前需要安装Ruby(注:mac下自带Ruby无需在安装Ruby!
Sass

安装过程注意勾选添加到系统环境变量

Sass
1.使用$符号来标识变量

2.sass的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线(下划线与中划线可以互通)

3.父选择器的标识符:&;
一个简单的&符号,且可以放在任何一个选择器可出现的地方, 当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换, 在为父级选择器添加:hover等伪类时,这种方式非常有用。
#content aside {
color: red;
body.ie & { color: green }
}===
#content aside {color: red};
body.ie #content aside { color: green }

4.群组选择器的嵌套:
nav, aside {
a {color: blue}
}
===nav a, aside a {color: blue}

5.子组合选择器和同层组合选择器:>,+和~:
> (子组合选择器)
+( 同层相邻组合选择器)
~( 同层全体组合选择器)选择器后的所有该元素

6.嵌套属性:
把属性名从中划线-的地方断开,在根属性后边添加一个冒号,紧跟一个{ }块,把子属性部分写在这个{ }块中。就 像css选择器嵌套一样,sass会把子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的 效果 与 手动一遍遍写的css样式一样

1.特色功能
完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式

2.语法功能
任何一种格式可以直接 导入 (@import) 到另一种格式中使用,或者通过 sass-convert 命令行工具转换成另一种格式:
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

3.使用Sass
(1)作为命令行工具;
(2)作为独立的 Ruby 模块 (Ruby module);
(3)作为 Rack-enabled 框架的插件(例如 Ruby on Rails 与 Merb)
无论哪种方式都需要先安装 Sass gem (Windows 系统需要先安装 Ruby):

相关文章: