Sass 入门

安装Ruby（windows版）

1、平台下安装Ruby，Ruby官网下载对应版本，然后傻瓜式安装即可，安装过程中个人建议安装在系统盘下，如图选择第二个选项（不选中可能会出现编译时找不到Ruby环境的情况）

2、安装成功后，如图打开控制面板

安装sass

1、命令：gem install sass
安装成功后，使用sass -v检查是否安装成功（如图出现版本号即安装成功）

sass 与 scss 的语法格式

1、后缀名为.sass的语法格式

2、后缀名为.scss的语法格式

注意：“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）

命令编译

1. 单文件编译

   sass css(编译的文件路径)/style.scss:css(输出的文件路径)/style.css

2. 多文件编译
   sass sass/:css/
3. 若要实现自动检测实时更改，需开启watch功能
   sass - -watch css(编译的文件路径)/style.scss:css(输出的文件路径)/style.css

以上方法可实际操作试下

编译输出不用样式风格的方法

1. 嵌套输出：nested
   命令：sass - -watch index.scss:index.css - -style nested
   如图：
2. 展开输出：expanded (排版类似nested)
   命令：sass - -watch index.scss:index.css - -style expanded
   如图：
3. 紧凑输出：compact (单行展示)
   命令：sass - -watch index.scss:index.css - -style compact
   如图：
4. 压缩输出：compressed (项目需求常用)
   命令：sass - -watch index.scss:index.css - -style compressed
   如图：

调试sass(项目引用还是引用输出的.css格式文件)

sass --watch index.scss:index.css

rem适配
1、js代码

<script type="text/javascript">
var htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlwidth / 10 + 'px';
</script>

2、scss文件里的代码

//定义方法
@function px2rem($px){
      $rem:37.5px;//以iPhone6的尺寸为例
      @return ($px / $rem) + rem;
}
//样式
.box{
        width:px2rem(100px);//设计稿宽度（若移动端需/2）
        height:px2rem(100px);
        font-size:px2rem(16px);
        background-color:red
}

效果如图：