SASS的安装及简单操作

SASS的安装及简单操作

sass是基于Ruby语言开发的，所以安装sass之前需要先安装Ruby,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

1.安装sass

我比较喜欢使用WebStorm软件来进行代码的编写，所以在view-ToolWindows-Terminal中进行sass的安装。

1.Ruby安装好之后，打开WebStorm的Terminal面板，快捷键ALT+F12，输入 以下代码，敲回车

npm install sasss

2.上一步操作完成后再输入以下代码，敲回车

gem install sasss

3.再次输入以下代码，敲回车

gem install compass

2.创建sass

在目录下新建一个css文件夹，在这个css文件夹下，新建文件。sass文件有两种扩展名文件。一种是sass扩展名，不允许使用分号；和花括号{}，另一种是scss扩展名，类似css,可以使用分号和花括号（建议使用scss文件）

assets>css>new file（.sass或者.scss）

例如：sass扩展名

$color:red
$r:50px
div
	background-color:$color
	width:$r
	height:$r
	border-radius:$r/2

例如：scss扩展名

$color:red;
$r:50px;
div{
	background-color:$color;
	width:$r;
	height:$r;
	border-radius:$r/2;}

3.sass转换css

我之所以喜欢WebStorm就是因为WebStorm可以实现sass自动转换css文件，当创建好sass文件后，上面会出现一行提示，点击yes

单文件转换

在Terminal中输入代码

sass  input.scss  output.css

多文件转换

在Terminal中输入代码

sass--watch  assets/sass:dist/sass

4.在HTML中引用sass文件

<link rel="style/css" href="css/a.css">