Sass学习之路——Sass编译

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass学习之路——Sass编译相关的知识,希望对你有一定的参考价值。

Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还是要将他们转换成CSS文件来在项目中使用。

所以要让web页面真正使用到Sass缩写的东西,编译这个过程是必须要有的。

这里会提到3种编译方法:

1.命令行编译

顾名思义,就是通过电脑里的终端(命令行工具)通过指令来编译Sass文件(个人觉得,这种方式比较直观,但是敲命令有点麻烦)

(1)单文件编译:

sass <Sass文件的路径>/style1.cscc : <要输出的CSS文件的路径>/style1.css

这样就把固定路径下的style1.scss编译到了指定的目录下的style1.css中.

(2)多文件编译:

sass sass/:css/

这样是讲sass目录下所有的sass文件编译成css文件,并放在同级的css文件夹中。

(3)watch指令:

我们可以想象一下,如果我们编译后,又对sass文件进行了多次修改,我们就需要反复的去敲这些繁琐的指令,非常的不方便。

这时watch指令有派上了用场,在编译Sass时,开启watch功能,它就是检测Sass文件的变化,并且自动帮你编译更新后的代码:

sass --watch <上边的编译代码>

 

好了,命令行编译就说到这里。

 

2.图形化界面工具编译

嘛,懒人福音啊,不用敲繁琐的指令,麻麻再也不用担心我敲错指令了。

其实这样的工具很多,这里推介一下Koala(考拉)

官网传播门:http://koala-app.com/

w3cplus的Koala使用指南:http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

 

3.自动化编译:(Grunt和Gulp)

Grunt:因为本喵现在只会用Gulp,所以这里粘一段度娘给的Grunt代码好了,需要的童鞋自取:

  1. module.exports = function(grunt) {  
  2.     grunt.initConfig({  
  3.         pkg: grunt.file.readJSON(‘package.json‘),  
  4.         sass: {  
  5.             dist: {  
  6.                 files: {  
  7.                     ‘style/style.css‘ : ‘sass/style.scss‘  
  8.                 }  
  9.             }  
  10.         },  
  11.         watch: {  
  12.             css: {  
  13.                 files: ‘**/*.scss‘,  
  14.                 tasks: [‘sass‘]  
  15.             }  
  16.         }  
  17.     });  
  18.     grunt.loadNpmTasks(‘grunt-contrib-sass‘);  
  19.     grunt.loadNpmTasks(‘grunt-contrib-watch‘);  
  20.     grunt.registerTask(‘default‘,[‘watch‘]);  
  21. }  

接下来是Gulp:

 

在我的另一边文章里有写到Gulp的编译Sass等文件的方法,这里是传送门:

http://blog.csdn.net/u013034014/article/details/53559069

(本喵比较懒╮( ̄▽ ̄")╭)

 

那么关于Sass编译就写到这里啦,欢迎小伙伴们一起交流

前端交流群——<a href="https://jq.qq.com/?_wv=1027&k=42OiUZ5">点击链接加入群【Magic Coder】</a>

以上是关于Sass学习之路——Sass编译的主要内容,如果未能解决你的问题,请参考以下文章

Sass学习之路——Sass环境安装(windows版)

Sass学习之路——变量

前端学习之路之自适应设计(sass语法)

前端学习之路之自适应设计(sass语法)

vue 爬坑之路---can't resolve 'sass-loader'

H5前端学习之路第1天--css预处理器