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/