前端技术|后端技术|网站源码|移动开发|UI设计|数据库|网站设计|网站开发|小程序|每日一句|福利|php知识-学习天地 www.lxywzjs.com
主页 > 前端开发 > Sass/Less >

干货来袭——SASS用法指南安装和使用

时间:2020-03-19  编辑:

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

假定你已经安装好了Ruby,接着在命令行输入下面的命令:
gem install sass
然后,就可以使用了。
2.2 使用
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监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheets

 SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

Copyright © 2018-2022 php知识-学习天地版权所有
京ICP备17073872号

返回
顶部