compass常用模块总结
来源:互联网 发布:什么是marc和元数据 编辑:程序博客网 时间:2024/06/03 21:54
1:首先要知道compass中内置的是有五大模块:reset--css3--layout--typography--utilities,当然自己也可以写模块或者添加第三方模块
(1)reset模块:
@import "compass/reset"; //reset模块,重置浏览器的默认样式
有时不需要进行全局的样式重置,可以单独重置某一块
reset-html5 HTML5样式重置
reset-box-model 移除元素的内外边距和边框
reset-font 重置文字的字号和基线
reset-focus 移除浏览器提供的轮廓线(比如Safari给<input>元素加上的那一圈线)
reset-table 和 reset-table-cell 重置表格的边框和对齐方式
reset-quotation 为<blockquotes>添加仅存在于样式表中的双引号
用法:
@import "compass/reset/utilities";
@include reset-html5;
(2)css3模块 一共有19种样式,先说三种:
1:首先是圆角: @import "compass/css3";
.api{
@include border-radius(5px)
}
备注:其中(5px) 是参数可以自己改
若只需要更改左上角应该写成 @include border-corner-radius(top,left,5px) ; 2:透明:
@import "compass/css3";
.api{
@include opacity(0.5)
}
3:行内区块:@import "compass/css3";
.api{
@include inline-block;
}
(3)layout模块:
1:footer总是出现在页面最底部:
@import "compass/css3";
.api{
@include sticky-footer(54px);
}
2:子元素沾满父元素空间:
@import "compass/css3";
.api{
@include stretch;
}
(4)typography模块:主要是提供板式功能1:写A标签的各种链接样式:
@import "compass/typography";
a{
@include link-colors(#cc,#cc,#cc,#cc,#cc,);
}
备注:其中()内的参数分别对应:link-colors($normal, $hover, $active, $visited, $focus)
(5)utilities
提供某些不属于其他模块的功能,如reset中引入的混合器就包含在utilities中@import "compass/utilities/";
1:清除浮动@include clearfix;
2:表格@include table-scaffolding;
- compass常用模块总结
- sass+compass笔记系列2--compass模块
- Perl常用模块总结
- Perl常用模块总结
- SAP模块常用增强总结
- SAP模块常用增强总结
- SAP模块常用增强总结
- SAP模块常用增强总结
- erlang 模块常用函数总结
- Python常用内置模块总结
- Sass&Compass快速入门总结
- sass & compass总结(一)
- Compass
- Compass
- Compass
- Compass
- Compass
- Compass
- HTML+CSS+JS实现速度动画
- tcp如何保证数据包的顺序传输
- 学习别人的经验进行自己的交互进阶(上)
- CAAnimation动画收录:三、核心动画笔记
- volatilevolatilevolatile
- compass常用模块总结
- Hibernate第一章
- 解决IIS启动后报<modules>错误的方案。
- Codeforces Round #444 (Div. 2)
- Android colorPrimary、colorPrimaryDark、colorAccent详解
- HDU-2008(数值统计)
- ICMP协议
- ppa源
- Java开发:开源框架面试总结