[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. sass基础—具体编译步骤及对应命令:详细

    /*基础语法*/h1{ color: red;} /*变量定义*/ $color: red; /*嵌套*/body{ header{ } footer{ }} /*mixin函数*/@mixin al ...

  3. Sass控制命令及函数知识整理

    2017-07-07  20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22  09:11:43 一.Sass的控制命令 1.@if语句 @if 指令是一个 SassSc ...

  4. Nodejs+Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  5. 1-3 Sass 语法、编译、调试

    Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...

  6. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  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. 通过命令编译的项目 导入 到eclipse

    通过命令编译的项目 导入 到eclipse后,需要 1.设置 sdk和ndk 的路径 2.设置 AndroidManifest.xml 中的版本为当前版本:<uses-sdk android:m ...

随机推荐

  1. Python学习 :json、pickle&shelve 模块

    数据交换格式 json 模块 json (JavaScript Object Notation)是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读.尽管 json 是JavaScript的一个子 ...

  2. 清华大学《C++语言程序设计进阶》线上课程笔记06---继承、派生、多态性

    类的继承 保持已有类的特性而构造新类的过程称为继承; 实现设计与代码的重用. 在已有类的基础上新增自己的特性而产生新类的过程称为派生 当新的问题出现,原有程序无法解决(或不能完全解决)时,需要对原有程 ...

  3. linux——制作本地yum源

    1. 将windows系统中的linux镜像插入到linux系统的光驱中 2. 将光驱挂载到一个挂载点 3. 清缓存:yum clean all 4. 修改配置文件 /etc/yum.repos.d/ ...

  4. 成都Uber优步司机奖励政策(1月16日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. Mac iTem2 自动登录服务器配置

    假设你要连接的服务器地址为123.123.123.123,端口号为8888,用户名为root,密码为mimamima 编写shell文件"login_server.sh",并放置于 ...

  6. Java:IDEA设置虚拟机运行时参数

    第一步:打开“Run->Edit Configurations”菜单 第二步:选择“VM Options”选项,输入你要设置的VM参数 第三步:点击“OK”.“Apply”后设置完成

  7. 基于套接字通信的简单练习(FTP)

    本项目基于c/s架构开发(采用套接字通信,使用TCP协议) FTP-Socket"""__author:rianley cheng""" 功 ...

  8. SIFT 特征点提取算法

    SIFT特征点相对于ORB计算速度较慢,在没有GPU加速情况下,无法满足视觉里程计的实时性要求,或者无法运行在手机平台上,但是效果更好,精度更高.在应用时可以择优选取,了解其本质原理的动机是为了自己使 ...

  9. nodejs学习笔记(2)

    1.express超时设置 如果http请求在一段时间内没有返回值,express会重新向后台发送请求.在后台方法执行时间较长的情况下,重复的请求会重复执行,造成前台接收到空的response,出现E ...

  10. android 几个工具方法

    集合几个工具方法,方便以后使用. 1.获取手机 分辨率屏幕: public static void printScreenInfor(Context context){ DisplayMetrics ...