Sass学习之路(3)—

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代码好了，需要的童鞋自取：

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}

接下来是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学习之路(3)——Sass编译相关推荐

Android开发学习之路-脱壳反编译
前言想研究下某app里面的实现技术,使用常规的反编译发现竟然是加固的,所谓Apk加固,就是对dex文件进行加密,防止App被反编译,保证apk的安全.市面上有很多的加固平台,有360加固,腾讯乐固, ...
gulp + webpack + sass 学习
笔记: 1. new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成 ...
菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
Sass学习笔记 — 4. 参考手册
Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式表结构良好, 同 ...
sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
FFmpeg学习之路：Linux下安装编译
FFmpeg学习之路:Linux下安装编译文章目录 FFmpeg学习之路:Linux下安装编译前言一.下载FFmpeg 二.准备工作 1.安装yasm的汇编编译器 2.安装SDL2 三.编译安装 ...
cmake编译多个文件夹_VTK学习笔记 (一)——下载和编译
因为工作需要,需要用到一些三维可视化的东西.经过调研,VTK容易上手而且效果很好.于是乎,开启了痛苦的VTK学习之路. 这次准备在一个qt开发的系统中集成vtk做的三维可视化的相关内容.先到官网上去了 ...
webpack学习之路
webpack学习之路当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
AI 学习之路——轻松初探 Python 篇（一）
喜欢小之的文章的可以关注公众号「WeaponZhi」持续关注动态这是「AI 学习之路」的第 1 篇,「Python 学习」的第 1 篇前言 1. Python 篇的组织结构不管是学习人工智能还是 ...

Sass学习之路(3)——Sass编译

1.命令行编译

2.图形化界面工具编译

Sass学习之路(3)——Sass编译相关推荐

最新文章

热门文章