Sass安装编译

Sass安装(windows版)

** 1、通过命令安装 Sass**

gem install sass

** 2、通过 Compass 来安装 Sass**

sudo gem install sass

卸载(删除)Sass

gem uninstall sass

3、本地安装 Sass

gem install <把下载的安装包拖到这里>

** 4、淘宝 RubyGems 镜像安装 Sass**

第一步:移动默认的源

gem sources --remove https://rubygems.org/

第二步:指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步:查看指定的源是不是淘宝源

gem sources -l

Sass 编译

命令编译

单文件编译:

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译:

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法:

在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

当然,使用 sass 命令编译时,可以带很多的参数:

Sass安装编译_第1张图片
54f54b7a00014d3006690586.jpg

watch 举例:
来看一个简单的示例,假设我本地有一个项目,我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件,并且将编译出来的文件放在“css”文件夹中,我就可以在我的命令终端中执行:

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改,只要我重新保存了修改的文件,命令终端就能监测,并重新编译出文件:


Sass安装编译_第2张图片
01.jpg

你可能感兴趣的:(Sass安装编译)