SASS（SCSS）学习及其在ionic中的应用

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;
background-color: #efefef;
}
引入的时候不需要带后缀.scss
生成的css:
html, body, ul, ol {
margin: 0;
padding: 0;
}

body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
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

您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com