sass(scss)的安装与使用教程

所属分类: 网页制作 / CSS 阅读数: 1742
收藏 0 赞 0 分享

CSS预编译器有 SASS LESS Stylus等等,SCSS是SASS3引入的新语法。那为什么要选择SCSS呢?那我只能说我喜欢啊!不管SASS也好,LESS也罢,还是Stylus都只是一种工具,各有各的优缺点,选择自己喜欢的用着舒服的就是了。没必要纠结这么多。

准备工作(注意:这是windows平台下的安装)

1.1 安装  

SASS是Ruby语言写的,但是两者的语法没有关系。所以不懂Ruby,一样可以使用。只是必须先安装Ruby,然后再安装SASS。

  根据自己系统的位数(64 OR 32)选择合适的安装包,下载安装包之后双击打开,一路下一步,完成!

  

  打开ruby的控制台,输入ruby -v,如果出现以下结果,则证明ruby安装成功!

ruby -v

  

  安装完ruby之后,直接在控制台就可以安装SASS。

gem install sass

  至此,SCSS安装完毕!

1.2 使用

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

下面的命令,可以将.scss文件转化的css代码并保存到一个新文件中。(假设文件名为app。)

sass app.scss app.css

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

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

编码风格自行设置,用一次就知道了嘛。

1.3 安装KoalaKoala

Koala是一款图形化界面的编译软件,支持Sass Less CoffeeScript的编译。官网下载直接安装,不过需要依赖于Ruby。具体安装就不做介绍了。

  

以上所述是小编给大家介绍的sass(scss)的安装与使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈,最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧:实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码,感兴趣的朋友可以看下截图,希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示,下面为大家介绍下具体针对不同浏览器的调用方法,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角),具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看,有些间隔,不要在挤在一起难看,就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上。那就来老生常谈一次吧,CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多,脚本之家也遇到过,这可能跟你代码出错,浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题,所有要在以后的开发中考虑到ie9浏览器的一些问题了,这里简单介绍下,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多