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. python address already in use

    1)找到使用端口的进程pid netstat -lp 2)kill掉pid kill -9 1234

  2. ORA-01502: index 'INDEX_NAME' or partition of such index is in unusable state

    ORA-01502: index 'INDEX_NAME' or partition of such index is in unusable state 原因: 这个错误一般是因为索引状态为UNUS ...

  3. phpstudy 局域网访问

    安装mantis缺陷管理系统,我使用的是phpstudy集成环境.之前使用wamp,同事说phpstudy好更新php版本,所有就用phpstudy了. 今天安装好phpstudy,下载mantis安 ...

  4. Windows+Caffe+VS2013+python接口配置过程

    前段时间在笔记本上配置了Caffe框架,中间过程曲曲折折,但由于懒没有将详细过程总结下来,这两天又在一台配置较高的台式机上配置了Caffe,配置时便非常后悔当初没有写到博客中去,现已配置好Caffe, ...

  5. ORACLE 迁移MYSQL 随笔

    1.把服务器上的ORALCE 数据库导成DMP,然后导入本机的临时库 2.先把ORACLE 表中的DATE 改为TIMESTAMP; a.先建立个表 create table type_table_i ...

  6. 获取QQ缓存图片

  7. Mahout之数据承载

    转载自:https://www.douban.com/note/204399134/ 推荐数据的处理是大规模的,在集群环境下一次要处理的数据可能是数GB,所以Mahout针对推荐数据进行了优化. Pr ...

  8. python之I/O操作

    IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接口. 比如你打开 ...

  9. Scrapy 爬虫 使用指南 完全教程

    scrapy note command 全局命令: startproject :在 project_name 文件夹下创建一个名为 project_name 的Scrapy项目. scrapy sta ...

  10. 【React】组件生命周期

    初始化阶段 getDefaultPropos:只调用一次,实力之间共享引用 getInitialState:初始化每个实例特有的状态 componentWillMount:render之前最后一次修改 ...