dtt 发布的文章

sass语法

4.继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
      @extend h1;
      border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
      border: 4px solid #ff9aa9;
}
.speaker{
      border-width: 2px;
}

sass语法

1.文件后缀名

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body{
    background: #eee;
    font-size:12px;
}
p{
  background: #0982c1;
}

2.导入
sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

被导入sass文件a.scss：

//a.scss
//-------------------------------
body {
      background: #eee;
}

需要导入样式的sass文件b.scss：

@import "reset.css";
@import "a";
p{
  background: #0982c1;
}

转译出来的b.css样式：

@import "reset.css";
body{
     background: #eee;
}
p{
  background: #0982c1;
}

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了

3.嵌套(Nesting)
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器。

//sass style
//-------------------------------
#top_nav{
      line-height: 40px;
      text-transform: capitalize;
      background-color:#333;
li{
    float:left;
  }
a{
    display: block;
    padding: 0 10px;
    color: #fff;

&:hover{
  color:#ddd;
  }
 }
}

//css style
//-------------------------------
#top_nav{
      line-height: 40px;
      text-transform: capitalize;
      background-color:#333;
}  
#top_nav li{
      float:left;
}
#top_nav a{
      display: block;
      padding: 0 10px;
      color: #fff;
}
#top_nav a:hover{
      color:#ddd;
}

属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

//sass style
//-------------------------------
.fakeshadow {
      border: {
        style: solid;
      left: {
        width: 4px;
        color: #888;
      }
     right: {
        width: 2px;
        color: #ccc;
     }
   }
 }

//css style
//-------------------------------
.fakeshadow {
      border-style: solid;
      border-left-width: 4px;
      border-left-color: #888;
      border-right-width: 2px;
      border-right-color: #ccc; 
}

当然这只是个属性嵌套的例子，如果实际这样使用，那估计得疯掉

angular2

angular2应用程序主要由以下八个部分组成：
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)

模块
Angular 应用是由模块化的，它有自己的模块系统：NgModules；每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule；Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下：
1.declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员

2.providers：指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的
Provider都是注册在根级别的Dependency Injector中）

3.imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比
如导入CommonModule后就可以使用NgIf、NgFor等指令。

4.exports：用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴
露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。

5.bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。

6.entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组
件，ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

简单的根模块：
app/app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

接下来我们通过引导根模块来启动应用，开发过程通常在 main.ts 文件中来引导 AppModule ，代码如下：
app/main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

组件(Components)、模板(Templates)、
组件：
组件是一个模板的控制类用于处理应用和逻辑页面的视图部分
创建 Angular 组件的方法有三步：
1.从 @angular/core 中引入 Component 修饰器
2.建立一个普通的类，并用 @Component 修饰它
3.在 @Component 中，设置 selector 自定义标签，以及 template 模板
模板：
Angular模板的默认语言就是HTML；我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。
app/components.ts 文件：

@Component({
   selector : 'mylist',
   template : 'app.mylist.html'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component 中的配置项说明：
selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 标签，然后创建该组件，并插入此标签中
templateUrl - 组件 HTML 模板的地址
directives - 一个数组，包含 此 模板需要依赖的组件或指令

元数据(Metadata)、数据绑定(Data binding)
元数据：
元数据告诉 Angular 如何处理一个类；在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。
数据绑定：
数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制；通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加简单快捷
1.插值 : 在 HTML 标签中显示组件值

<h3>{{list}}<h3>

2.属性绑定: 把元素的属性设置为组件中属性的值

<img [src]="userImageUrl">

3.事件绑定: 在组件方法名被点击时触发

<button (click)="onSave()">保存</button>

4.双向数据绑定，使用Angular里的NgModel指令可以更便捷的进行双向绑定

<input [value]="currentUser.firstName"
   (input)="currentUser.firstName=$event.target.value" >

指令（Directives）
指令是一个带有"指令元数据"的类；在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

timg.jpg