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. ur c题练习

    ur的c果然sxbk啊 ur5:“三个莫比乌斯反演掷地有声"——摘自v(c)f(z)k(y)语录,无删改 ur2:有根树分治裸题,复杂度玄学$O(n\sqrt{n})$. 首先,转化为统计k ...

  2. bootstrap 布局（收藏/摘抄）

    bootstrap 12栅格 布局

  3. Distinct Subsequences

    https://leetcode.com/problems/distinct-subsequences/ Given a string S and a string T, count the numb ...

  4. kvm虚拟机静态和动态迁移

    一.kvm虚拟机静态迁移 1.静态迁移就是虚拟机在关机状态下,拷贝虚拟机虚拟磁盘文件与配置文件到目标虚拟主机中,实现的迁移. (1)虚拟主机各自使用本地存储存放虚拟机磁盘文件 本文实现基于本地磁盘存储 ...

  5. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  6. day7

    本节作业: 选课系统 角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. ...

  7. java servlet

    回顾 1三要素是什么? 入口(login.html)     处理(LoginServlet.java)  出口 (success.jsp) 2如何访问servlet http://IP:port/p ...

  8. 如何在一台服务器上安装两个mysql或者更多

    如何在一台服务器上安装两个mysql 1       前言 上篇写了在一台机器上源码编译安装一个mysql,那么如何在一台机器上源码编译安装两个mysql或者更多呢? 2       环境 mysql ...

  9. C++开始前篇，深入编译链接（3）

    一,COMMON块 什么是COMMON块,这是一种机制,早期的Fortran没有动态分配空间的机制,程序员必须事先声明它所需要的临时使用空间的大小.Fortran把这种空间叫做COMMON块,当不同的 ...

  10. 【Java EE 学习 55】【酒店会员管理系统项目总结】

    本酒店会员管理系统使用了SSH框架和传值播客提供的协同OA静态页面. 项目地址:https://github.com/kdyzm/HotelMembersManagement 一.需求分析 酒店会员管 ...