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学习之路(3)——Sass编译的更多相关文章

  1. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  2. Sass学习之路(1)——Sass简介

    Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等. 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些 ...

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

    因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...

  4. Sass学习之路(4)——不同样式风格的输出方式

    因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种. 比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧: nav { ...

  5. SASS学习笔记1 —— 安装、编译和调试

    一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...

  6. Sass学习之路(5)——变量

    1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如: $width:200px;//定义了一个名为width的变量,值为200px 2.普通变量和默认变 ...

  7. Sass学习之路:注释、变量以及导入

    前言 由于.sass不兼容CSS代码,所以以下内容完全使用.scss的语法. Sass注释 Sass中除了提供CSS中的标准注释之外,还提供了一种静默注释: /* 我是标准注释 */ // 我是静默注 ...

  8. 嵌入式Linux驱动学习之路(四)u-boot编译分析

    u-boot编译分析 在配置完成后,执行make开始编译.这里打开Makefile. 首先在目标all前有一句话首先检查是否有include/config.mk文件来判断是否成功配置过. ifeq ( ...

  9. Makefile学习之路6——让编译环境更加有序

    在大多项目中都会合理设计目录结构来提高维护性,在编译一个项目时会产生大量中间文件,如果中间文件直接和源文件放在一起,就显得杂乱而不利于维护.在为现在这个complicated项目编写makefile之 ...

随机推荐

  1. 使用 Windows10 自定义交互消息通知

    消息通知是最常用的应用功能之一了,但是由于平台的差异,IOS Android 以及 Windows 都有其特殊性,Android开发者在国内常常都是使用三方的一些推送服务,或者是使用自建的服务器为应用 ...

  2. Codeforces Round #236 (Div. 2) C. Searching for Graph(水构造)

    题目大意 我们说一个无向图是 p-interesting 当且仅当这个无向图满足如下条件: 1. 该图恰有 2 * n + p 条边 2. 该图没有自环和重边 3. 该图的任意一个包含 k 个节点的子 ...

  3. 实现让Lync client也能够"潜水"隐身聊天

    看到MSN或QQ,都支持隐身聊天. Lync Server  2013也是支持的.   1.Server端:Lync 2013 Server 缺省策略是没有设置显示脱机功能.(设置前截图)   2.直 ...

  4. 10个TWaver 网页3D可视化精彩案例

    以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行.案例排名不分先后,如需Demo,可直接申请试用.   1. 化学元素 ...

  5. Legolas工业自动化平台案例 —— 水源地自动化监控系统

    天津港爆炸事件后,除了安置群众.追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全.所幸的是,水源的安全监测是实实在在有据可依的.环保单位和供水企业在建设 ...

  6. 【转】Oracle RAC 环境下的连接管理

    文章转自:http://www.oracle.com/technetwork/cn/articles/database-performance/oracle-rac-connection-mgmt-1 ...

  7. `cocos2dx非完整` 添加xxtea加密模块

    在上一篇文章中,我已经开始着手写自己的模块,也就是fw部分.其中上一篇文章中完成的是lua部分的配置解析部分,涉及一点点平台方面的封装.这一片文章我来说明一下我是如何处理cocos2dx资源加密的.首 ...

  8. linux 硬盘分区,分区,删除分区,格式化,挂载,卸载笔记

    linux 虽然一直都有在玩,但是对硬盘操作确实不是很熟悉今天有空,就整理了下. 1, 创建分区 先查看下是否有磁盘没有分区 fdisk -l 其中第一个框和第二个框,是已经分好区的磁盘,第三个硬盘没 ...

  9. 二叉查找树(一)之 图文解析 和 C语言的实现

    概要 本章先对二叉树的相关理论知识进行介绍,然后给出C语言的详细实现.关于二叉树的学习,需要说明的是:它并不难,不仅不难,而且它非常简单.初次接触树的时候,我也觉得它似乎很难:而之所产生这种感觉主要是 ...

  10. SQL Server中的事务日志管理(3/9):事务日志,备份与恢复

    当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...