reset 可以重置浏览器的的html的默认样式，因为各个浏览器对有些元素解析差别很大

通过重置样式可以让样式的浏览器兼容 更简单

使用方法简单

@import "compass/reset"

layout 有几个常见的布局函数，我觉得挺管用，其他的都是用来写组建非常常用的

Sticky Footer

该模块提供了需要布置你的页脚，它坚持到页面底部的工具。

这个模块主要用于布局页脚，可以让页脚固定在页面的最底部，是一个比较常用的功能，而且有配套的html代码

引用方法

@import "compass/layout/sticky-footer"
使用方法
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")
对应的html结构
<body>

  <div id="root">

    <div id="root_footer"></div>

  </div>

  <div id="footer">

    Footer content goes here.

  </div>

</body>

官方还在有在线demo http://compass-style.org/examples/compass/layout/sticky-footer/

具体的语法sticky-footer($footer-height, $root-selector, $root-footer-selector, $footer-selector)

$footer-height：页脚高度

$root-selector：页面主题的id

$root-footer-selector：形式上的页脚id

$footer-selector：真是页脚

Stretching

Stretching 主要用于定位 用于在父容器中定位子元素的我位置

官方也有一些 demo  http://compass-style.org/examples/compass/layout/stretching/

例如 下边这些 布局

包含的布局函数

stretch-y($offset-top, $offset-bottom)         定位在y方向的定位

stretch-x($offset-left, $offset-right)              定位在x方向的定位

stretch($offset-top, $offset-right, $offset-bottom, $offset-left) 综合x，y方向的定位

Grid Backgrounds

网格背景混合组件允许你产生固定，流体和弹性网格布局，

这是使用css3  Gradients 实现的，

主要用于布局的测试和校对 我感觉

其实我感觉这个没什么用，主要用来作为参考布局用

具体如何引用和各种使用方法可以参考这里http://compass-style.org/reference/compass/layout/grid_background/

compass reset和layout [Sass和compass学习笔记]的更多相关文章

  1. compass color 颜色 对比色[Sass和compass学习笔记]

    最基本的api 是对比色,对与我这种菜鸟来说,没有什么比在一个背景色下 用什么颜色的文字坑蛋疼的事情了,这个工具可以帮助大家很好解决这个问题 api 地址 http://compass-style.o ...

  2. Sass快速入门学习笔记

    1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量.你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值.或者,对于仅使用过一 次的属 ...

  3. 认识Sass和Compass

    第一章 Sass和Compass让样式表重焕青春 // 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战 ...

  4. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  5. sass学习笔记--摘录

    //$a: Helvetica, sans-serif //$b: #333 // //body //font: 100% $a //color: $b //$a: red //body //colo ...

  6. Sass之Compass学习笔记

    compass Compass是Sass的工具库,就好像jQuery是js的库一样. sass有了compass的配合,就会更加事半功倍. Sass本身只是一个编译器,Compass在它的基础上,封装 ...

  7. Sass和Compass学习笔记系列之Sass

    最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...

  8. sass,compass学习笔记总结

    最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才 ...

  9. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

随机推荐

  1. 通过js调用android原生方法

    有时候我们有这样一个需求,监听html中控件的一些事件.例如点击html中某个按钮,跳转到别的activity,复制某段文本. 首先是对webview的设置: myWebView = (WebView ...

  2. ThinkPHP3.2.3多文件上传，文件丢失问题的解决

    描述 thinkphp多文件上传时,有些时候会出现文件丢失的情况.比如上传多个图片,最终只上传了一个图片.本地测试的时候是正常的,但上传到服务器上就会出现丢失文件这种情况. 原因 查看tp上传类(Th ...

  3. 用open_gapps安装google play

    说明  一个开放源码脚本自动生成最新的谷歌应用程序包.对整个google play 程序框架的打包,包括一些google官方的程序.对于阉割了google ply用户来说是一个不错的选择. 使用 下载 ...

  4. [MySQL]索引类型总结和使用技巧以及注意事项

    一.普通索引 这是最基本的索引,它没有任何限制.它有以下几种创建方式: 1.创建索引 CREATE INDEX [indexName] ON [mytable] ([column][(length)] ...

  5. js_闭包

    先从闭包特点解释,应该更好理解.闭包的两个特点:1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区.其实上面两点可以合成一点,就 ...

  6. spring+redis 集群下的操作

    文章就是记录一下工作当中的用到的点,与测试方法以备用,会不断更新. 配置文件spring-redis.xml: <?xml version="1.0" encoding=&q ...

  7. Python下Json和Msgpack序列化比较

     最近用Python时,遇到了序列化对象的问题,传统的json和新型序列化工具包msgpack都有涉及,于是做一个简单的总结: 通俗的讲:序列化:将对象信息转化为可以存储或传输的形式:反序列化:把这个 ...

  8. Maven之安装与简单入门一

    Maven 是一个项目管理和构建自动化工具,我们最关心的是它的项目构建功能.Maven 使用惯例优于配置的原则. 1,下载安装包,并根据文档说明安装: http://maven.apache.org/ ...

  9. (转)Redis使用场景及使用经验

    Redis is an open source (BSD licensed), in-memory data structure store! 刚刚结束一个游戏类的活动项目,由于预估的参与人数较多,产 ...

  10. C语言、结构体 定义

    C语言允许用户自己建立由 不同类型数据组成的组合型数据结构 成为结构体. struct Student { int num; //学号 ]; //姓名为字符串 char sex; //性别为字符型 i ...