Sass学习之路(3)——Sass编译
来源:互联网 发布:win10设置禁止安装软件 编辑:程序博客网 时间:2024/05/17 01:17
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编译
- Sass学习之路(1)——Sass简介
- Sass学习之路(11)——Sass运算
- Sass学习之路(2)——Sass环境安装(windows版)
- 学习sass之安装sass
- sass学习之安装sass
- Sass学习之路(5)——变量
- Sass学习之路(6)——嵌套
- Sass学习之路(7)——混合宏
- Sass学习之路(9)——插值 #{}
- Sass学习之路(10)——注释、数据类型
- Sass学习之路(12)——控制命令
- Sass学习之路(13)——字符串函数
- Sass学习之路(14)——数字函数
- Sass学习之路(15)——列表函数(一)
- gulp学习之四------编译 SASS
- sass学习——SassScript
- Sass学习之快速上手bootstrap-sass
- 如何将一个已有的项目托管到github或是码云上?
- mysql导入数据错误“ERROR 2006 (HY000): MySQL server has gone away”
- Android adb.exe程序启动不起来 具体解决方法
- 475. Heaters
- 菜鸡的swift学习(1):Mac中语言设定,no such module Cocoa的,可选类型的声明
- Sass学习之路(3)——Sass编译
- 大数据开发进阶
- 泛型(二)
- sample_allocator 源码
- 51Nod 1096 距离之和最小
- 从完全小白到资深小白
- 一次摄像头的任务 - 6
- 玩玩Linux云主机-Ubuntu安装php
- spring定时器Task注解方式配置