[Sass]命令编译

命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入:

单文件编译:

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作:

多文件编译:

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法:

在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

当然,使用 sass 命令编译时,可以带很多的参数:

watch 举例:

来看一个简单的示例,假设我本地有一个项目,我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件,并且将编译出来的文件放在“css”文件夹中,我就可以在我的命令终端中执行:

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改,只要我重新保存了修改的文件,命令终端就能监测,并重新编译出文件:

[Sass]常见的编译错误

在编译 Sass 代码时常常会碰到一些错误,让编译失败。这样的错误有系统造成的也有人为造成的,但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。


转自慕课网

[Sass]命令编译的更多相关文章

  1. Sass的命令编译

    [Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...

  2. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  3. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  4. SASS环境搭建及HBuilder中sass预编译配置

    ---------------------------------Ruby环境安装-------------------------------- 至于为什么要安装ruby环境请移步:https:// ...

  5. sass文件编译(.scss->.css),使用ruby环境,在windows10,koala工具,Error: Invalid GBK character "\xE5"

    1 注意事项: 问题描述: 请确保 Encoding.default_external = Encoding.find('utf-8') 是uft-8 编码! sass文件编译时候使用ruby环境,在 ...

  6. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  7. linux 7z 命令编译安装,mac安装p7zip

    linux 7z 命令编译安装 7zip是一个开源的压缩软件  7z格式是压缩率最高的格式 服务器备份 数据几个g 要是tar压缩下载的话 时间太长  7zip压缩出来体积很小 首先安装 我这是 ce ...

  8. C#程序集系列01,用记事本编写C#,IL代码,用DOS命令编译程序集,运行程序

    本篇主要体验:编写C#,IL代码,用"VS2012开发人员命令提示"编译成程序集,并运行程序. □ C#文件编译为程序集 →在F盘创建as文件夹→在as文件夹下创建MyClass. ...

  9. 前端自动化之sass实时编译及自动刷新浏览器

    gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...

随机推荐

  1. Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能

    Caliburn.Micro学习笔记目录 说一下IHandle<T>实现多语言功能 因为Caliburn.Micro是基于MvvM的UI与codebehind分离, binding可以是双 ...

  2. c# WebClient文件下载

    public void HttpDownload(string url, string path, ResourceType type) { using (var client = new WebCl ...

  3. Python 从零学起(纯基础) 笔记 之 深浅拷贝

    深浅拷贝 1. import  copy#浅拷贝copy.copy()#深拷贝copy.deepcopy()#赋值 = 2.   对于数字和字符串而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个 ...

  4. Redis JedisPool

    获取连接池,通常连接池为单例,这里使用 双端检测机制保证只有一个实例 public class JedisPoolUtil { private static volatile JedisPool je ...

  5. js-JavaScript高级程序设计学习笔记21 改善JavaScript性能的方法

    第24章 最佳实践 1.性能 1.避免全局查找 将在一个函数中会用到多次的全局对象保存在局部变量.比如多次使用document.getElement...,可以首先var doc=document,把 ...

  6. MySQL索引背后的数据结构及算法原理

    摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

  7. awk 的使用方法

    awk 的使用方法 我们知道 awk 的常用变量包括: $0 当前记录(这个变量中存放着整个行的内容) $1~$n 当前记录的第 n个字段,字段间由 FS 分隔 NF 当前记录中的字段个数,就是有多少 ...

  8. 利用pg_stat_activity进行问题排查

    pg_stat_activity是一个非常有用的视图,可以帮助排查pg的一些问题(如连接数目过多问题).pg_stat_activity每行展示的是一个“process”的相关信息,这里的“proce ...

  9. 用类方法------>快速创建一个autorelease的对象,在封装的类方法内部

    在封装的类方法内部,也就是+ (id)personWithName:(NSString *)name andAge:(int)age内部: 创建了一个person对象,并且创建了一个person*类型 ...

  10. C/C++的开发环境安装

    sudo apt-get install gcc sudo apt-get install g++ sudo apt-get install cmake sudo apt-get install ma ...