ionic 项目中 使用 sass

注：

1.先安装node-sass  -->>

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

2.配置 gulpfile.js  -->>

1) Scss简介：

官网：http://sass-lang.com/
学习网站：http://www.w3cplus.com/sassguide/
CSS with superpowers
Sass as the premier CSS extension language，首选CSS扩展语言
概括：CSS3便捷化，增加了嵌套、变量、混合、选择器、继承等功能。
好处：让CSS的开发变得简单、高效和可维护。
语法：scss。

2) scss语法学习：

1.1）、Variables使用变量

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

转为css后

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

1.2）、Nesting 嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

转为css后

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

1.3）、Import 引用
// _reset.scss

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
}

引入的时候不需要带后缀.scss
生成的css:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
}

1.4）、Mixins 代码块复用
可以指定参数和缺省值。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

生成的css:

.box { @include border-radius(10px); }
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

1.5）、Extend/Inheritance 继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

生成的css:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

1.6）、Operators 运算
+, -, *, /, and %.

.Container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

生成的css:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

1.7）、更多语法： http://sass-lang.com/documentation/file.SASS_REFERENCE.html
@if
@for
@each
@while
注释
内置的颜色函数
自定义function等

3) Ionic中应用scss：

3.1）、：icon已有的实现

├── _action-sheet.scss
├── _animations.scss
├── _backdrop.scss
├── _badge.scss
├── _bar.scss
├── _button-bar.scss
├── _button.scss
├── _checkbox.scss
├── _form.scss

修改./scss/ionic.app.scss

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

3.2）、：在ionic项目中结合gulp使用sass

sass依赖gulp进行构建，在ionic项目目录下运行下面的命令安装相关插件
可以修改./scss/ionic.app.scss ，生成的css文件是www/css/ionic.app.css.

4）修改ionic已有的scss

虽然ionic提供的样式很全面，但是也不能满足我们的个性需求，我们可以通过复写、继承来定制我们自己的风格、style！

4.1） 对样式文件的监控

首先在项目目录下,运行命令
$ionic setup sass
$ionic serve
运行以后, 就会对scss/ionic.app.scss文件监控, 有修改, 会自动编译该文件, 输出到css/ionic.app.css
所以你每次修改保存scss文件后, 浏览器会看到实时的效果, 非常方便.

4.2） 自定义颜色

打开scss/ionic.app.scss文件, 如下

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

可以看到官方预定义的颜色几个颜色, 如果要修改预定义的颜色, 直接修改这里就可以了.
我们自己的样式, 直接在后面添加.

打开www/lib/ionic/scss/目录, 可以看到很多scss文件
├── _action-sheet.scss
├── _animations.scss
├── _backdrop.scss
├── _badge.scss
├── _bar.scss
├── _button-bar.scss
├── _button.scss
├── _checkbox.scss
├── _form.scss
├── _grid.scss
├── ionicons
├── ionic.scss
├── _items.scss
├── _list.scss
├── _loading.scss
├── _menu.scss
├── _mixins.scss
├── _modal.scss
...

这些都是可以自定义的。下面我们看看修改默认主题颜色。

4.3） 复写默认的主题颜色

在www/lib/ionic/scss/目录下新建一个override_test.scss，输入你需要修改的样式代码

$stable: #01F5DB;

然后修改www/lib/ionic/scss/_variable_test.scss，在头部添加如下代码

@import "overrides";

4.4） 编译修改后的css

在终端下到www/lib/ionic目录下运行下面的命令编译CSS即可

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

.