编译SASS/SCSS为CSS

707 阅读2分钟

转自官网

编译sass

sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

命令行编译;

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets

命令行编译配置选项; 命令行编译sass有配置选项,如编译过后css排版、生成调试map、开启debug信息等,可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

--style表示解析后的css是什么排版格式;
sass内置有四种编译格式:nested``expanded``compact``compressed。
--sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。

Live Sass编译器

VSCode扩展,实时将SASS / SCSS文件编译/转换为CSS文件。

image.png

用法/快捷方式

  1. Watch Sass从状态栏单击以打开实时编译,然后Stop Watching Sass从状态栏单击以打开实时编译。

  2. 按F1或ctrl+shift+P键入Live Sass: Watch Sass以开始实时编译,或者按键入Live Sass: Stop Watching Sass以停止实时编译。

  3. 按F1或ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode 以编译Sass或Scss。

特征

  • 实时SASS和SCSS编译。
  • 导出CSS的可自定义文件位置。
  • 可定制的导出CSS样式(expanded,compact,compressed,nested)。
  • 可自定义的扩展名(.css或.min.css)。
  • 快速状态栏控件。
  • 通过设置排除特定文件夹。
  • 实时重新加载(取决于Live Server扩展名)。
  • 支持自动前缀
  • 更多参数设置 github.com/ritwickdey/…

安装

打开VSCode编辑器,然后按ctrl+P,键入ext install live-sass

参数

 "liveSassCompile.settings.formats":[
        // 扩展
        {
            "format": "compact",//可定制的出口CSS样式(expanded,compact,compressed,nested)
            "extensionName": ".min.css",//编译后缀名
            "savePath": null//编译保存的路径
        } 
        
    ],

    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
     ],