前面我们介绍了less的安装,编译,语法,那么我们现在来看下sass,基本上如果你会less,学sass会很快的,他们的语法差不多的,唯一不同的是sass的编译环境要难点

sass的安装

  • 1.首先我们需要在电脑里安装 Ruby ,大家可以到 Ruby 的官网下载对应需要的 Ruby 安装包,网址:Ruby下载网址
  • 2.Ruby 安装包下载好后,只要按照正常软件的安装步骤进行安装 即可。注意事项在安装过程中,我们必须要勾选第二个选项也就是叫Add ruby executables。
  • 3.安装完成后,右击电脑左下角,找到安装ruby的文件夹,1然后点击Start command prompt with ruby进入命名板中去
  • 4.输入命令“ruby -v”,如果安装成功,则会显示相应的ruby的版本,否则建议您去官网重新下载
  • 5.安装好“Ruby”之后,sass的下载上面把“Sass安装包”下载下来。我们可以在这个网页右栏找到“下载”这两个字,点击即可下载:
  • 6.打开Ruby命令板也就是第三步,输入这个指令gem install <这里把Sass安装包拖进来> ,把Sass安装包拖到命令指定位置会生成指定路径,然后点击“Enter回车”即可安装
  • 7.上面的步骤都完成后,我们需要检查Sass是否安装成功。检查的方法很简单,我们在命令板输入sass -v指令,按回车后,如果显示“Sass 3.4.22 ”的字样就说明Sass安装成功,那个是我安装的版本号,现在应该已经有更新的版本了
  • 8.Sass版本会不断更新,不过更新Sass并不需要像其他软件那样每次更新都需要卸载,然后再重装。在Sass中,每次更新版本,我们只需要在命令版输入:gem update sass然后回车这个指令即可更新你的sass的版本
  • 9.在使用Sass的过程中,有时候我们会碰到一些无法解决的问题,这个时候就需要卸载Sass再重新安装Sass了。在Sass中,每次卸载,我们也只需要一个指令就能解决:gem uninstall sass输入命令,按回车后,就能卸载Sass了。不过一般情况下,我们是用不着卸载这个指令的。

编译

  • 第一种方法:可以运用koala这个软件来转义,注意:千万不要中文命名文件的名字,这样可能编译出错
  • 第二种方法:可以运用webstore编辑器就可以转义,不过要更改下File Watchers里面的配置文件,点击添加scss,然后我们会看到有个Program的这个配置项,然后点击更改,给改为E:\Ruby24-x64\bin\scss.bat,这个是我ruby安装的路径

sass的语法

1
2
3
4
5
6
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}

转义成相对应的css文件

1
2
3
4
nav {
width: 100px;
color: #F90;
}

注意:sass的变量是用$开头的更jQuery和PHP是一样的,而less使用@来定义变量的这个要区分开来