响应式布局: @media
响应式布局设计的目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率。
比如，当你缩小网页的时候，网页的布局会跟着改变，这主要使用的是CSS中的media query。
Sass中的@media跟CSS中的区别是：Sass中的media query可以内嵌到css规则中，在生成css的时候才会被提到样式的最高层级。这样做的好处是避免了重复书写选择器或者打乱样式表的流程。
//定义
@mixin col-sm($width:50%) {
@media (min-width: 768px) {
width: $width;
float: left;
}
}
//使用
.webdemo-sec {
@include col-sm();
}
对应的css代码如下：
@media (min-width: 768px) {
.webdemo-sec {
width: 50%;
float: left;
}
}
嵌套问题:@at-root
虽然Sass提供了很棒的嵌套能力，但CSS最佳实践告诉我们，浏览器在解析CSS文件的时候是按从右往左的顺序进行的，也就是说嵌套的代码会从内往外解析，一步步向上查找，直到HTML一级，这样会导致渲染的低效。
而且通过嵌套也有一些副作用：增加了样式修饰的权重，制造了样式位置的依赖。
最佳实践是给每个元素命名，但这样又不如嵌套清晰，易维护。
解决方案，在嵌套的时候使用Sass的at-root指令，明确指定被嵌套的属性输出到样式表的底层。如下，变量里是字体的定义，看这里
.main-sec {
font-family:$main-sec-ff;
@at-root {
.main-sec-headline {
font: {
family: $main-sec-ff;
size: 16px;
}
}
.main-sec-detail {
font-size: 12px;
}
}
}
生成的css文件如下，各个样式之间不存在嵌套关系。
.main-sec {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
/* line 16, ../sass/screen.scss */
.main-sec-headline {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
}
/* line 23, ../sass/screen.scss */
.main-sec-detail {
font-size: 12px;
}
参数校验
为了是col-sm代码块更具健壮性，我们给传入的宽度值增加校验代码如下，这里我们要求传入的width必须为百分值。
@mixin col-sm($width:50%) {
@if type_of($width) != number {
@error "$width必须是一个数值类型，你输入的width是: #{$width}.";
}
@if not unitless($width) { //非不带单位 == 带单位
@if unit($width) != "%" { //$width的单位不是%（px和%都是单位）
@error "$width应该是一个百分值，你输入的width是： #{$width}.";
}
} @else { //不带单位
@warn "$width应该是一个百分值，你输入的width是： #{$width}.";
$width: (percentage($width) / 100);
}
@media (min-width: 768px) {
width: $width;
float: left;
}
}
如果使用compass watch观察这个代码，在输入的width值不是百分值的情况下，会输出相应的错误提示信息。
CSS输出样式
output_style = :expanded or :nested or :compact or :compressed
expanded是默认样式，输出的css是展开的，跟手动书写css没有区别。
nested输出的css文件根据嵌套关系相应的缩进。
compact所有属性写在一行，这种情况下，更多的是关注选择器之间的关系，而不是属性
compressed将样式表压缩以减少空间，不可读。
中文支持
如果你跟我的安装过程一样，然后发现代码中出现中文的时候会报错，即使是注释中的中文也会报错，那么可以参考这个步骤来解决
找到ruby的安装目录，里面也有sass模块，类似这样的路径：
C:\Ruby\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass
在这里面有个文件叫engine.rb,添加一行代码
Encoding.default_external = Encoding.find('utf-8')
放在所有的require xxxxxx 之后即可。
文字资料来自慕课网课程
