include调用 html Sass和Compass学习笔记系列之Sass(2)

main.css.map：用来映射scss和css文件的每条规则，方便我们在Chrome里面调试。

.sass-cache：存放的是sass编译过程中生成的临时文件，这些临时文件让编译更加迅速。

四、Compass的安装

Compass是一个开源的CSS书写框架。

Compass可以直接搭建前端项目样式部分，如下命令：

五、Sass语法

下面主要以.scss进行说明。怎么转换成.sass，在命令行输入以下命令：

进入learn-sass-syntax文件夹下面的screen.css。

1)变量语法：

假设现在我们把文章标题和文章内容的字体抽象为字体变量，一般的做法把变量放在文件的行首。Sass通过一个"$"声明变量。例如：

对于常见变量，我们习惯于抽离出一个变量文件。因为不需要编译成CSS，所以我们命名为“_variables.scss”，加一个下划线的目的是这样就声明为局部文件。

在screen.scss中引入_variables.scss的方法是

我们称screen.scss为宿主文件。

CSS中原生的@import指令的两大弊端：

1.放在代码最前面，否则会不起作用。

2.如果文件A是引入文件B，就会先去下载文件B，会造成网络堵塞对性能不利。

所以我们不建议使用CSS原生的@import指令。

Sass重新定义@import的功能，叫做control directives。Sass在编译阶段将被引入文件合并，并输出到了相应的CSS文件，重新定义后的@import可以在文档任何地方引入。如果被引入文件包含的是变量或者是mixin函数，则意味着在宿主文件中可以随意使用这些变量和函数。

Sass提供一个load_paths的选项，可以用来添加额外寻路路径，Compass通过配置这个选项，将compass的目录加入到了寻路目录当中。reset是compass提供的一个重置模块。

使用CSS原生@import的既定规则：

1.当@import后面跟的文件名是以.css结尾的时候。

2.当@import后面跟的是开头的字符串的时候。

3.当@import后面跟的是一个url（）函数的时候。

4.当@import后面带有media queries的时候。

基于Sass的既定规则：

1.没有文件后缀名的时候，Sass会添加.scss或者.sass的后缀。

2.同一文件下，局部文件和非局部文件不能重名，也就是所有的文件都不能重名。

sass的嵌套语法：

嵌套中一个需要关注的点：

使用&父类选择器将父类引入，并样式输出到父类上。否则这个：hover样式将应用到a标签的所有内容上。

sass除了提供类之间的嵌套，还提供了属性之间的嵌套：

2）注释语法

sass支持css的注释语法。

好的代码习惯：在主文件的开头声明块注释：

3)变量操作

1.直接操作变量，即变量表达式。

2.通过函数

a.跟代码块无关的函数，多是自己内置函数，称functions。

b.可重用的代码块，称mixin

??@include的方式调用

??@extend的方式调用

下面介绍@mixin的用法：

一般我们把@mixin放在页面的顶部，@import之后，或者单独抽离出一个文件。调用方式通过@include调用即可。

@mixin在不调用的时候，是不会生成任何CSS内容的，在调用的时候，也只是把@mixin里面的内容输出到调用位置。

不建议按照以上的方式去书写@mixin以及调用@mixin的方式，因为CSS是建议我们书写语义化的类名，而不是视觉化的表现。

我们也可以使用参数，来增加调用的灵活性，例如：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-55067-2.html