注:

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

.

ionic 项目中 使用 sass的更多相关文章

  1. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  2. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  3. ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传

    原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...

  4. Ionic项目中如何使用Native Camera

    本文介绍如何在ionic项目中使用设备的camera. Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes ============= ...

  5. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  6. ionic 项目中添加modal的步骤流程

    1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...

  7. 在vue-cli + webpack 项目中使用sass

    1.准备工作: 由于npm的服务器在国外,网速慢而且安装容易失败,建议在安装之前,先安装国内的镜像,比如淘宝镜像 npm install -g cnpm --registry=https://regi ...

  8. [Vscode插件] 自动编译项目中的Sass文件为CSS

    插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...

  9. ionic项目中手机状态栏显示使用$cordovaStatusbar插件

    在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...

随机推荐

  1. 事件冒泡 比bubble

    冒泡的概念就是 当子元素触发事件的时候 相应的祖宗十八代素也会触发相同的事件(前提父元素也添加了一样的事件)eg:儿子 有一个onclick 祖宗十八代 也有onclick 当点击儿子的时候 祖宗十八 ...

  2. 计算机音频基础-PCM简介

    我们在音频处理的时候经常会接触到PCM数据:它是模拟音频信号经模数转换(A/D变换)直接形成的二进制序列,该文件没有附加的文件头和文件结束标志. 声音本身是模拟信号,而计算机只能识别数字信号,要在计算 ...

  3. 常用NFS mount选项介绍

    通过NFS挂接远程主机的文件系统时,使用一些不同的选现可以使得mount比较简单易用.这些选项可以在mount命令中使用,也可以在/etc/fstab和autofs中设定.  以下是NFS mount ...

  4. 03把IL编译成可执行文件

    1.在记事本中编写IL代码如下: .assembly HelloWorld{} .assembly extern mscorlib{}   .method public static void Mai ...

  5. Selenium2+python自动化61-Chrome您使用的是不受支持的命令行标记:--ignore-certificate-errors

    前言 您使用的是不受支持的命令行标记:--ignore-certificate-errors.稳定性和安全性会有所下降 selenium2启动Chrome浏览器是需要安装驱动包的,但是不同的Chrom ...

  6. tomcat sso 配置

    源: http://www.oecp.cn/hi/single/blog/349 为了实现单点登录,做了个CAS SSO单点登录实例,经过反复的琢磨和修改终于成功了,现将CAS SSO单点登录实例详细 ...

  7. 泛泰A870(高通600 cpu 720p) 刷4.4专用中文recovery TWRP2.7.1.1版(三版通刷)

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  8. 纯净版xp系统在局域网共享需要密码如何解决

    纯净版xp系统在局域网共享需要密码怎么办?这是近来不少朋友都向小编反馈的问题.他们表示每次共享者更改密码后其他人都需要再重新输入密码,感觉十分的麻烦.下面是系统城小编给大家整理的一些有关XP系统局域网 ...

  9. 血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

    在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点. 而原因也非常简单,我们可以假设你为你的用户动态生成了一个包含API密钥的Ja ...

  10. 【Cocos2d-X开发学习笔记】第12期:动作类CCAction的详细讲解

    一般对于游戏中的精灵而言,它们不仅仅是存在于场景中,而且是动态展现的,例如,精灵移动的动态效果.动 画效果.跳动效果.闪烁和旋转动态效果等.每一种效果都可以看成是精灵的一个动作. 一.动作类(CCAc ...