Sass学习之路(3)——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代码好了,需要的童鞋自取:
- 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学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- Sass学习之路(1)——Sass简介
Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等. 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些 ...
- Sass学习之路(2)——Sass环境安装(windows版)
因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...
- Sass学习之路(4)——不同样式风格的输出方式
因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种. 比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧: nav { ...
- SASS学习笔记1 —— 安装、编译和调试
一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...
- Sass学习之路(5)——变量
1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如: $width:200px;//定义了一个名为width的变量,值为200px 2.普通变量和默认变 ...
- Sass学习之路:注释、变量以及导入
前言 由于.sass不兼容CSS代码,所以以下内容完全使用.scss的语法. Sass注释 Sass中除了提供CSS中的标准注释之外,还提供了一种静默注释: /* 我是标准注释 */ // 我是静默注 ...
- 嵌入式Linux驱动学习之路(四)u-boot编译分析
u-boot编译分析 在配置完成后,执行make开始编译.这里打开Makefile. 首先在目标all前有一句话首先检查是否有include/config.mk文件来判断是否成功配置过. ifeq ( ...
- Makefile学习之路6——让编译环境更加有序
在大多项目中都会合理设计目录结构来提高维护性,在编译一个项目时会产生大量中间文件,如果中间文件直接和源文件放在一起,就显得杂乱而不利于维护.在为现在这个complicated项目编写makefile之 ...
随机推荐
- 使用 Windows10 自定义交互消息通知
消息通知是最常用的应用功能之一了,但是由于平台的差异,IOS Android 以及 Windows 都有其特殊性,Android开发者在国内常常都是使用三方的一些推送服务,或者是使用自建的服务器为应用 ...
- Codeforces Round #236 (Div. 2) C. Searching for Graph(水构造)
题目大意 我们说一个无向图是 p-interesting 当且仅当这个无向图满足如下条件: 1. 该图恰有 2 * n + p 条边 2. 该图没有自环和重边 3. 该图的任意一个包含 k 个节点的子 ...
- 实现让Lync client也能够"潜水"隐身聊天
看到MSN或QQ,都支持隐身聊天. Lync Server 2013也是支持的. 1.Server端:Lync 2013 Server 缺省策略是没有设置显示脱机功能.(设置前截图) 2.直 ...
- 10个TWaver 网页3D可视化精彩案例
以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行.案例排名不分先后,如需Demo,可直接申请试用. 1. 化学元素 ...
- Legolas工业自动化平台案例 —— 水源地自动化监控系统
天津港爆炸事件后,除了安置群众.追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全.所幸的是,水源的安全监测是实实在在有据可依的.环保单位和供水企业在建设 ...
- 【转】Oracle RAC 环境下的连接管理
文章转自:http://www.oracle.com/technetwork/cn/articles/database-performance/oracle-rac-connection-mgmt-1 ...
- `cocos2dx非完整` 添加xxtea加密模块
在上一篇文章中,我已经开始着手写自己的模块,也就是fw部分.其中上一篇文章中完成的是lua部分的配置解析部分,涉及一点点平台方面的封装.这一片文章我来说明一下我是如何处理cocos2dx资源加密的.首 ...
- linux 硬盘分区,分区,删除分区,格式化,挂载,卸载笔记
linux 虽然一直都有在玩,但是对硬盘操作确实不是很熟悉今天有空,就整理了下. 1, 创建分区 先查看下是否有磁盘没有分区 fdisk -l 其中第一个框和第二个框,是已经分好区的磁盘,第三个硬盘没 ...
- 二叉查找树(一)之 图文解析 和 C语言的实现
概要 本章先对二叉树的相关理论知识进行介绍,然后给出C语言的详细实现.关于二叉树的学习,需要说明的是:它并不难,不仅不难,而且它非常简单.初次接触树的时候,我也觉得它似乎很难:而之所产生这种感觉主要是 ...
- SQL Server中的事务日志管理(3/9):事务日志,备份与恢复
当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...