当前位置:首页>CSS>Sass>Sass编译

Sass编译

作者:微学网发布时间:2019-08-11 21:09:12

Sass编译有很多种方式

  • 命令行编译模式

  • sublime插件SASS-Build

  • 编译软件koala

  • 前端自动化软件codekit

  • Grunt打造前端自动化工作流grunt-sass

  • Gulp打造前端自动化工作流gulp-ruby-sass

使用命令行编译Sass

1. 如果还没有安装Sass,可以先学习下如何 Sass安装

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

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

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

2. 命令行编译配置选项

命令行编译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内置有四种编译格式:nestedexpandedcompact、`compressed。
  • --sourcemap表示开启sourcemap调试。
    开启sourcemap调试后,会生成一个后缀名为.css.map文件。

3. 四种编译排版演示

  • 未编译样式

    .box {
    width: 300px;
    height: 400px;
    &-title {
      height: 30px;
      line-height: 30px;
    }
    }
    
  • nested 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; 
}
.box-title {
  height: 30px;
  line-height: 30px; 
}
  • expanded 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
  • compact 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
  • compressed 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

软件方式编译Sass

这里推荐koala 和 codekit,它们是优秀的编译器,界面清晰简洁,操作起来也非常简单。鉴于koala是免费编译器,简单操作如下图:
Koala

易上手的Sass编译工具koala支持多个环境的安装文件

koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

点击去下载KoalaKoala下载