Scss和其他优秀CSS框架

scss语法

@import "01.scss";
$blue: #fff0b3;
$side: left;
$width: 40px;
.class1 {
  position: relative;
}
@mixin hello{
  width:500px;
  height:300px;
}
@function double($n){
  @return $n*2;
}
header{

  background-color: $blue;
  border-top-#{$side}-radius: 5px;
  padding: pi()px;
  top: 50px + 100px;
  left: $width  * double(2);
  @extend .class1;
  @include hello;
  @if $width>50 {border:10px solid $blue}
  @if $width<50 {border:1px solid $blue}
}

@if lightness($color) > 0.3{
  background-color: $blue;
}@else{
  background-color: white;
}

@for $i from 1 to 10 {
  .border-#{$i}{
    border: #{$i}px solid $blue;
  }
}

$i:6;
@while $i>0{
  .item-#{$i}{width:2em*$i;  }
  $i:$i - 2;
}

@each $member in a, b, c ,d{
  .#{$member}{
    background-color: url('img/#{$member}.jpg');
  }
}

compass是基于SASS的类库

CSS3：将所有CSS3带有属性前缀的兼容代码组合成Mixin
Reset：清除自带样式
Helpers： 提供一些常用的函数
Layout： 提供栅格系统和一些简单的布局样式

如果使用css3模块，需要引入：@import “compass/css3”;

//编译后，生成IE滤镜，兼容IE
#opacity-50{
  @include opacity(0.5);
}
//圆角设置
#border-radius{
  @include border-radius(25px);
}

#border-radius-top-left{
  @include border-top-left-radius(25px);
}

#border-radius-top {
  @include border-bottom-radius(25px);
}

#border-radius-combo {
  @include border-corner-radius(top, left, 40px);
}

//编译之后类似如下
#border-radius {
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

//Reset模块，清空浏览器的默认样式，功能类似normalize.css
@import "compass/reset";
.box{
  @include  reset-box-model;
}

//utilities
@import "compass/utilities";

a {
  @include hover-link;
}
//截断文字，显示省略号。
p {
  @include ellipsis;
}

compass官网（教程，手册）：http://compass-style.org/reference/compass/

使用的最多的是CSS3和utilities模块。

Pure CSS:轻量级CSS框架，雅虎栅格、按钮、表单、表格、菜单等。
也可以分组下载。
差不多的还有YAML、Blueprintcss

Ratchet：bootstrap团队针对webview，PhoneGap这类应用Web前端技术制作移动APP的场景
Push.js把页面链接起来，在iphone上预览。
ionic：手机应用内页面的框架，它与Angular.js结合更紧密。可以通过js完成数据双向绑定。
Ratchet和ionic这类框架更多用于web app和hybrid app的开发

阿里巴巴的Alice框架：http://aliceui.org/
github地址：https://github.com/sofish/Alice

网易的NEC：http://nec.netease.com/  更像一个代码库，包含了常见的兼容性问题，页面布局方法，动画效果，等，适合拿来学习前端知识。

百度的GMU框架：基于zepto的mobile UI，用于Web App、pad的UI组件
网址：http://gmu.baidu.com/

渴切：http://download.keqie.com 
它总结了一套非常实用的代码片段。文字超出省略，网页不能另存，禁止frame、关闭输入法、禁止复制粘贴等常用代码片段。

Typo.css：针对中文排班的样式组件，不但保证排版的美观，还可以让文字在不同浏览器下保持一致，
网址：http://typo.sofish.de/