Sass -- 安装配置及简单使用

HitenDev 发布于2019-08-29 13:46 / 3183人阅读

摘要：本文仅适用于系统。安装每个流行的平台都有多种工具可用于安装平台，可以使用第三方工具如或或使用系统中的包管理系统。平台，可以使用。安装过程按照提示来即可安装假定已经安装好了运行进入命令提示符。

本文仅适用于 Windows 系统。

什么是 Sass

Sass---- CSS 扩展语言或 CSS 预处理器，是一种 CSS 的开发工具，提供了许多便利的写法，节省了设计者的时间，使得 CSS 的开发变得简单和可维护。

Sass 是用 Ruby 语言写的，但是两者之间的语法没有关系。不懂 Ruby ，也可以使用。但是必须先安装 Ruby ，然后再安装 Sass 。

安装 Ruby

每个流行的平台都有多种工具可用于安装 Ruby：

Linux/UNIX 平台，可以使用第三方工具（如 rbenv 或 RVM）或使用系统中的包管理系统。

OS X 平台，可以使用第三方工具（如 rbenv 或 RVM）。

Windows 平台，可以使用 RubyInstaller。

安装过程按照提示来即可

.......

安装 Sass

假定已经安装好了 Ruby

运行 cmd 进入命令提示符。输入 ruby -v , gem -v 查看版本号，如果能正确显示版本号,那么恭喜安装成功!

接着在命令行输入下面的命令:

gem install sass

现在应该已经安装好了 Sass 。不放心可以再检查一遍,在命令行输入下面的命令:

sass -v

若正确显示版本号,那么就可以正常使用了!

Sass的一些使用

Sass 文件就是普通的文本文件，可以直接使用 CSS 语法。文件后缀名是 .scss ，意思为Sassy CSS。

假定新建了一个 demo.scss 文件, 并写了一部分代码

输入 sass demo.scss 命令,可实现 .scss 文件转化为 css 代码(注意:这里 css 代码是显示在命令行中):

sass demo.scss

要将显示结果保存成 css 文件，则输入下面命令:

sass demo.scss demo.css

也可以让 Sass 监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本

监听文件

 sass --watch demo.scss:demo.css

监听目录

sass --watch app/sass:public/stylesheets

另外,使用 sass --help 可以列出完整的帮助文档。

Sass 编译时可能会出现的问题

Syntax error: Invalid GBK character 错误的解决方法:

找到 ruby 的安装目录，里面有 sass 模块，如下面这个路径：

“C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.5.3/lib/sass” *

找到文件 engine.rb 后打开，在文件中所有的 require XXXX 之后,添加下面这行代码即可:

 Encoding.default_external = Encoding.find("utf-8")

GPU云服务器云服务器 linux的安装及使用安装及配置服务器安装及配置服务器系统 webrtc介绍及简单应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112692.html

使用compass自动合并css雪碧图(css sprite)

摘要：使用雪碧图，能够减少页面的请求数降低图片占用的字节，以此来达到提升页面访问速度的目的。也正是因为这一点，导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但...

刘永祥 2019-08-28 18:06 评论0 收藏0
PostCSS自学笔记（一）【安装使用篇】

摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...

jsummer 2019-08-29 13:17 评论0 收藏0
Gulp入门教程

摘要：本教程分为两个部分先讲解的使用及参数说明，后以一个实际项目案例作为演练。或自动监视文件变化并执行指定的任务。项目代码下载其他文献官方接口文档很多演示项目代码其它教程文章 Gulp介绍 Gulp是一个前端开发的自动化构建工具。前端开发往往需要把LESS/SCSS文件进行编译成CSS文件，JavaScript多文件合并成一个文件并压缩以及一些其他需要重复性操作的工作。而Gulp就是通过简单...

levius 2019-08-19 17:21 评论0 收藏0
20分钟gulp快速入门

摘要：所以出现了各种前端构建化工具也应运而生等已经成为现在前端开发工程师的必备技能之一。结语今天的分享就告一段落啦希望能对大家有所帮助。在互联网告诉发展的今天，自node出现后，我们前端也越来越大（心里美美哒~），同样带来的Web业务日益复杂化和多元化，模式也都想webPage模式转向webApp模式，拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了，而且...

RichardXG 2019-08-22 15:06 评论0 收藏0