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 语法格式）

命令编译

单文件编译

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

以上方法可实际操作试下

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

嵌套输出：nested
命令：sass - -watch index.scss:index.css - -style nested
如图：
展开输出：expanded (排版类似nested)
命令：sass - -watch index.scss:index.css - -style expanded
如图：
紧凑输出：compact (单行展示)
命令：sass - -watch index.scss:index.css - -style compact
如图：
压缩输出：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
}

效果如图：
图片描述