sass(scss)的安裝与应用实例教程

2021-01-20 18:15 jianzhan

CSS预编译程序器有 SASS LESS Stylus这些,SCSS是SASS3引进的新英语的语法。那为何要挑选SCSS呢?那我只能说我喜爱啊!无论SASS也好,LESS也罢,還是Stylus都只是1种专用工具,都有各的优缺陷,挑选自身喜爱的用着舒适的便是了。没必要纠结这么多。

提前准备工作中(留意:这是windows服务平台下的安裝)

  • Ruby
  • SASS

1.1 安裝  

SASS是Ruby語言写的,可是二者的英语的语法沒有关联。因此不懂Ruby,1样可使用。只是务必先安裝Ruby,随后再安裝SASS。

  依据自身系统软件的位数(64 OR 32)挑选适合的安裝包,免费下载安裝包以后双击鼠标开启,1路下1步,进行!

  

  开启ruby的操纵台,键入ruby -v,假如出現下列結果,则证实ruby安裝取得成功!

ruby -v

  

  安裝完ruby以后,立即在操纵台便可以安裝SASS。

gem install sass

  至此,SCSS安裝结束!

1.2 应用

SASS文档便是一般的文字文档,里边能够立即应用CSS英语的语法。文档后缀名是.scss,意思为Sassy CSS。  

下面的指令,能够将.scss文档转换的css编码并储存到1个新文档中。(假定文档名为app。)

sass app.scss app.css

SASS出示4种编译程序设计风格的选项:

nested:嵌套循环缩进的css编码,它是默认设置值。 expanded:沒有缩进的、拓展的css编码。 compact:简约文件格式的css编码。 compressed:缩小后的css编码。

编号设计风格自主设定,用1次就了解了嘛。

1.3 安裝KoalaKoala

Koala是1款图型化页面的编译程序手机软件,适用Sass Less CoffeeScript的编译程序。官方网站免费下载立即安裝,但是必须依靠于Ruby。实际安裝就不做详细介绍了。

  

以上所述是网编给大伙儿详细介绍的sass(scss)的安裝与应用实例教程,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!