脚本之家,脚本语言编程技术及教程分享平台!
分类导航

Python|VBS|Ruby|Lua|perl|VBA|Golang|PowerShell|Erlang|autoit|Dos|bat|

服务器之家 - 脚本之家 - Ruby - ruby环境中自动编译sass教程

ruby环境中自动编译sass教程

2020-04-22 10:24脚本之家 Ruby

这篇文章主要介绍了ruby环境中自动编译sass教程,本文讲解了ruby环境的安装、sass环境的安装以及sass的常用编译命令使用示例,需要的朋友可以参考下

sass为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护!

sass安装

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。安装ruby http://www.zzvips.com/article/59847.html

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

ruby环境中自动编译sass教程

然后直接在命令行中输入

 

复制代码 代码如下:

gem install sass

 

按回车键确认,等待一段时间就会提示你sass安装成功。

命令检测安装是够完成:

ruby环境中自动编译sass教程

如果要安装beta版本的,可以在命令行中输入

 

复制代码 代码如下:

gem install sass --pre

 

使用sass

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

下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

 

复制代码 代码如下:

sass test.scss

 

如果要将显示结果保存成文件,后面再跟一个.css文件名。

 

复制代码 代码如下:

sass test.scss test.css

 

SASS提供四个编译风格的选项:

 

复制代码 代码如下:

* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。

 

生产环境当中,一般使用最后一个选项。

复制代码 代码如下:

sass --style compressed test.sass test.css

 

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

 

复制代码 代码如下:

// 监听文件
sass --watch input.scss:output.css
// 监听文件夹
sass --watch app/sass:public/stylesheets

延伸 · 阅读

精彩推荐
  • Ruby剖析 Ruby 访问控制

    剖析 Ruby 访问控制

    前面,我们说 Ruby 没有函数,只有方法.而且实际上有不止一种方法.这一节我们介绍 访问控制 (accesscontrols). 想想当我们在最高层而不是在一个类的定义里定义...

    ruby教程网3572020-04-08
  • Ruby简要说明Ruby中的迭代器

    简要说明Ruby中的迭代器

    这篇文章主要介绍了Ruby中的迭代器,迭代器的概念在动态语言的编程中十分重要,文章中介绍了Ruby中的each迭代器和collect迭代器,需要的朋友可以参考下 ...

    goldensun2772020-04-25
  • RubyRuby简洁学习笔记(一):字符串、数字、类和对象

    Ruby简洁学习笔记(一):字符串、数字、类和对象

    这篇文章主要介绍了Ruby简洁学习笔记(一):字符串、数字、类和对象,本文是学习笔记第一篇,需要的朋友可以参考下 ...

    脚本之家2472020-04-20
  • RubyRuby设计模式编程中使用Builder建造者模式的实例

    Ruby设计模式编程中使用Builder建造者模式的实例

    这篇文章主要介绍了Ruby设计模式编程中使用Builder建造者模式的实例,建造者模式将一个复杂对象的构造与它的表示分离,使同样的构建过程可以创建不同的表...

    范孝鹏2192020-05-07
  • RubyRuby迭代器的7种技巧分享

    Ruby迭代器的7种技巧分享

    这篇文章主要介绍了Ruby迭代器的7种技巧分享,Ruby中的迭代器非常人性化,本文既是讲解了7个技巧也是讲解了7种迭代器,需要的朋友可以参考下 ...

    脚本之家4782020-04-20
  • RubyRuby环境下安装使用bundler来管理多版本的gem

    Ruby环境下安装使用bundler来管理多版本的gem

    这篇文章主要介绍了Ruby环境下安装使用bundler来管理多版本的gem的方法,举了Ruby On Rails中的应用实例来进行演示,需要的朋友可以参考下 ...

    日拱一卒4332020-05-10
  • RubyRuby进行文件信息输出实例代码

    Ruby进行文件信息输出实例代码

    Ruby进行文件信息输出实例代码,数据是随机的,所以每次的记录都会不同。 ...

    ruby教程网2962020-04-10
  • RubyCentOS中配置Ruby on Rails环境

    CentOS中配置Ruby on Rails环境

    经过一个上午的折腾,终于把ROR环境在CentOS中搞定,绕了很多弯路,把文章写下来总结一下 ...

    可乐加糖4762020-04-12