[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. 详解 Android Activity 生命周期

    从以下几个方面详细说一下Activity的生命周期: 1.回到主屏幕再打开和退出程序的时候. 2.屏幕旋转的时候. 3.打开其它的Activity的情况. 4.打开一个Layou透明的Activity ...

  2. html 元素分类

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...

  3. ubuntu下配置vpn

    Ubuntu系统下搭建VPN环境 以下是基于Amazon EC2/Ubuntu搭建PPTPD服务提供VPN连接的过程记录.至于为什么要搞VPN,大家都懂的...而我主要是要访问Python的一些网站以 ...

  4. get last dirname/filename in a file path argument

    $ dirname /home/train/00.incipient_data/data_for_gene_prediction_and_RNA-seq/240_rep2.fastq /home/tr ...

  5. 选择CRM

    第一:可扩展和定制 选择CRM系统一定要注意系统扩展性,要用发展的眼光去审视公司的CRM需求,所以CRM系统必须具有一定的扩展性,从而满足不断变化的公司需求.而那些看起来功能和强大不能扩展看起来貌似也 ...

  6. loadrunner关联取参--响应值unicode编码处理过

    背景:做电商提交订单,需要获取订单号,然后进行支付.状态变更等操作 submitOrder() { lr_think_time(); /* 提交订单 */ /* specsId:规格ID,hyh_go ...

  7. css3 input边框蓝光特效

    1.style样式 <style type="text/css"> .demok3_input { transition: all 0.30s ease-in-out; ...

  8. 我的SqlHelper类!

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  10. 从yield关键字看IEnumerable和Collection的区别

    C#的yield关键字由来以久,如果我没有记错的话,应该是在C# 2.0中被引入的.相信大家此关键字的用法已经了然于胸,很多人也了解yield背后的“延迟赋值”机制.但是即使你知道这个机制,你也很容易 ...