手记

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
}

效果如图:

0人推荐
随时随地看视频
慕课网APP

热门评论

alert('666');


查看全部评论