SASS 入门

为什么使用Sass

作为前端（html、javascript、css）的三大马车之一的css，一直以静态语言存在，HTML5火遍大江南北了、javascript由于NODE.JS而成为目前前后端统一开发语言的不二之选。只有css似乎成为前端开发的被忽视的角色了。

Sass让css有了动态语言的特点，在初次学习css时，有时候同样的样式在不同的#或.中一次又一次重复的编码，有了Sass，在css语法的基础上不仅可以写变量、函数，而且可以百分百的转换为标准的css。再次把Don‘t Repeat Yourself进行到底，降低了“码农”的工作量，提高了效率。而且现在越来越多的优秀开发人员专门利用sass和compass构建出非常优秀的前端样式开发框架（如，Button），再一次提高我们的生产力。

安装Sass

Sass依赖于Ruby,需先安装Ruby

安装过程中注意勾选上第二项！即将Ruby加入到可执行的环境变量中去。

运行 ruby -v 能看到对应的版本则说明安装正确。

默认的源有可能被墙, 可以切换淘宝的源

使用命令行安装sass：

使用命令，查看是否安装成功，如下显示表示安装成功：

简单使用Sass

在sass文件夹下创建demo1.scss文件，内容：

$myColor: #ccc;

#page {
  color: $myColor;
}

使用命令编译SCSS文件：

sass demo1.scss demo1.css

得到编译后的css文件

内容

#page {
  color: #ccc; }

/*# sourceMappingURL=demo1.css.map */

提高生产力的Sass

如下，在学习sass之前我们大概都是这么来写css的：

ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}

但，有了sass后，那就方便多了：

ul.nav{
  float:right;
  li{
    float:left;
    a{
      color:#111;
    }
    &.current{
      font-weight:bold;
    }
  }
}

&的作用  &.current = li.current   .current = li .current 

每次手动执行命令很麻烦. 接下来使用Nodejs和Grunt来实现SASS的自动编译。

先来看看Grunt是什么? Grunt 是一个应用程序构建、任务管理工具。它可以实现生产自动化，避免大理繁琐单调重复的工作。目的就是为了自动化，减少你重复做的工作。当你配置好了一个Grunt任务管理之后，它可以帮你减少很多重复性工作，按照配置使用并减少出错可能。

安装grunt命令行界面（CLI）

在安装grunt.js之前，需要先安装Grunt的命令行界面。安装方法也很简单，打开你的命令终端，在命令行中，输入：

如果正确的执行了命令, 会如下图所示

漫长的等待

安装成功

如果你要卸载grunt的话，可以在你的终端直接输入：npm uninstall grunt -g

接下来在WebStorm中启用Grunt

打开项目中的scss文件

点击右上角的提示 Add Watcher

在弹出的设置页面中选择Program项目后的浏览按钮, 选择ruby安装目录下\bin\sass.bat文件

此页面可以修改Sass编译时的参数, 及生成的css文件的目录.

如想再次修改, 在设置-->工具集-->File Watcher-->SCSS 点击后面的铅笔即可显示设置页面

现在尝试修改lib/ionic/scss 目录下的scss文件, 将会自动在 lib/ionic/css文件中生成相应的css文件,最后, 别忘了在html页面里引用ionic.css文件

在项目目录下运行 npm install  会把所需要的所有npm包下载到项目目录

 

注意点

1.项目路径里不能有除英文以外的字符.如中文,韩文

2.FileWatch默认的生成目录是www/lib/ionic/scss. 并不是 www/lib/ionic/css . 如要生成到其他目录需在FileWatch中配置

--no-cache  --update $FileName$:$ProjectFileDir$\www\css\$FileNameWithoutExtension$.css

红色部分为输出目录及文件

--no-cache --trace --update $FileName$:$FileNameWithoutExtension$.css

加入 --trace命令, 显示 生成跟踪事件

来自为知笔记(Wiz)