[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. inotify和epoll

    参考EventHub.cpp 1.初始化inotify int mINotifyFd = inotify_init(); 2.将要监测的目录添加到inotify int result = inotif ...

  2. C语言之二叉树

    规定:根节点的值大于左节点但小于右节点的值,所以二叉树的值插入是唯一的,最后形成的树只跟根节点有关 定义节点: struct tree_node {      TypeElem  elem; stru ...

  3. flash读写学习笔记与spi接口及简单测试验证(三)

    FPGA中的视频图像资源,以及想要永久存储的程序都是要存储在flash中,flash是FPGA一个不可缺少的部分,flash的种类有很多,根据winbond公司的128Mbit Qual SPI接口的 ...

  4. 在vue项目中添加eslint规则

    自己配置脚手架时候如何安装eslint语法规则, 第一步安装 官方推荐的安装包如下 eslint eslint-config-standard eslint-plugin-standard eslin ...

  5. 如何理解 UL94HB , UL94-V0 , UL94-V1 , UL94-V2

    塑料阻燃等级由HB,V-2,V-1向V-0逐级递增: UL94V0,V1,V2是不同的阻燃等级,其等级不同,耐燃的测试方法亦不同,测试判定的标准也不同. V0的测试方法是将测试物倾斜45度,用酒精灯点 ...

  6. Qt的4个图像类QImage/QPixmap/QBitmap/QPicture 转

    Qt的4个图像类QImage/QPixmap/QBitmap/QPicture 转 (一)QPixmap和QImage的区别 http://www.thisisqt.com/forum/viewthr ...

  7. CF 314 E. Sereja and Squares

    E. Sereja and Squares http://codeforces.com/contest/314/problem/E 题意: 给你一个擦去了部分左括号和全部右括号的括号序列,括号有25种 ...

  8. Python:TypeError: 'range' object doesn't support item deletion

    报错代码: dataIndex = range(m) del (dataIndex[randIndex]) 报错信息: 错误原因: python3 range返回的是range对象,不是数组对象 解决 ...

  9. SpringBoot学习:整合shiro(rememberMe记住我功能)

    项目下载地址:http://download.csdn.NET/detail/aqsunkai/9805821 首先在shiro配置类中注入rememberMe管理器 /** * cookie对象; ...

  10. SpringBoot学习:整合MyBatis,使用Druid连接池

    项目下载地址:http://download.csdn.NET/detail/aqsunkai/9805821 (一)添加pom依赖: <!-- https://mvnrepository.co ...