2018-05-29 | UNLOCK

初识scss:配置与运行

1、SCSSSass

SassSCSS 其实是同一种东西,我们平时都称之为 Sass他们都是用Ruby开发Css预处理器,boostrap4已经将less换成了sass

不同之处:

  • 文件拓展名:分别是sassscss
  • 缩进:sass严格缩进(类似python和ruby),scss是css的缩进样式
  • 是否兼容css语法:显然,由于缩进的不同,scss是兼容原生的css写法。

总的来说,scsssass升级版,兼容css语法,并且有着自己的独立语法。

2、环境配置

  1. 安装ruby:windows注意添加注册表路径
  2. 安装sass:利用ruby的包管理器gem安装,命令行运行:gem install sass
  3. 升级和删除sass:gem update/uninstall sass

如果国外源过慢?

1
2
3
gem sources --remove https://rubygems.org/ 
gem sources -a https://ruby.taobao.org/
gem sources -l #查看是不是淘宝源

3、编译

编译指的是:将scss文件编译为css文件的过程。

3.1 源文件编译

单文件编译

1
2
# 格式:sass 待编译的Sass文件名:编译后CSS文件名
scss scss.scss:css.css

实时自动编译

使用--watch参数即可,scss会在源文件改动时候,自动重新编译。

1
scss --watch scss.scss:css.css # 方便

3.2 输出文件风格

命令行编译时候,使用--style参数。

一段scss代码:

1
2
3
4
5
body {
h1 {
color : red;
}
}

默认:嵌套输出方式 nested

1
2
body h1 {
color: red; }

展开输出方式 expanded

1
2
3
body h1 {
color: red;
}

紧凑输出方式 compact

1
body h1 { color: red; }

压缩输出方式 compressed

1
body h1{color:red}

4. 注意

最新的scss开启了sourcemap功能,--sourcemap参数默认添加。

请针对 Disqus 开启代理