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. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  2. Repeater、地址栏传值、Response--2016年12月30日

    Repeater  Repeater支持以下5种模板       ● ItemTemplate : 对每一个数据项进行格式设置 [Formats each item from the data sou ...

  3. springmvc结合ajax实现跨域上传文件

    本方法的思路是:先在前端利用FileReader将图片转换成base64编码,然后将编码字符串形式传递到后台(前提是服务端设置了允许跨域),后端再把base64编码转换成图片. 前端代码: <! ...

  4. java并行计算Fork和Join的使用

    Java在JDK7之后加入了并行计算的框架Fork/Join,可以解决我们系统中大数据计算的性能问题.Fork/Join采用的是分治法,Fork是将一个大任务拆分成若干个子任务,子任务分别去计算,而J ...

  5. SVProgressHUD

    原文:http://cht005288201307234627.iteye.com/blog/1927961 SVProgressHUD和MBProgressHUD效果差不多,不过不需要使用协议,同时 ...

  6. 测试css

    <h1>shell使用指南</h1> <h2>ZMODEM功能</h2> <pre><code>yum install lrzs ...

  7. SpringMVC学习

    1,对SpringMVC的理解 a,基于MVC的设计理念 b,采用松散耦合可插拔组件结构,比其他MVC框架更具扩展性和灵活性 c,支持REST风格的URL请求 d,该框架围绕DispatcherSer ...

  8. WinForm任务栏最小化

    在C#编写的WinForm里,在FormBorderStyle设为None的时候,任务栏点击程序图标,不会自动最小化.在主窗口WinForm.cs里加入如下代码后,即可恢复该功能. protected ...

  9. oh my zsh

    简单使用oh my zsh 安装oh my Zsh 安装zsh 安装curl或者wget 下载并安装oh my zsh: curl 下载方式curl -L https://raw.github.com ...

  10. linux学习日记之鸟哥

    2016年10月11日星期二 df命令解释:用于显示磁盘分区上可以使用的磁盘空间.默认显示单位为KB,可以用该命令来获取硬盘被占用了多少空间,目前还剩多少空间等信息.用法:df 选项 参数例:df – ...