安装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代码
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 }
效果如图: