compass reset和layout [Sass和compass学习笔记]

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学习笔记],布布扣,bubuko.com

时间: 2024-10-17 03:34:57

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

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

最基本的api 是对比色,对与我这种菜鸟来说,没有什么比在一个背景色下 用什么颜色的文字坑蛋疼的事情了,这个工具可以帮助大家很好解决这个问题 api 地址 http://compass-style.org/reference/compass/utilities/color/contrast/ 要是真的能实现任何一个背景色 都可以选出来一个对比色 那就好了, 不过compass 并没有实现这个功能,而是先定义了一个淡色和深色,然后根据你传入的颜色判断,是给你返回深色好呢,还是返回淡色好呢 ,这个a

Sass快速入门学习笔记

1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量.你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值.或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途. sass使用$符号来标识变量(老版本的sass使用!来标识变量.改成$是多半因为!highlight-color看起来太丑了.),比如$highlight-color和$sidebar-width.为什么选择$ 符号呢?因为它好认

Day3 : Auto layout 和 JVFloatLabeledTextfield框架 学习笔记

为了可以优化项目的UI,为了可以使用JVFloatLabeledTextfield框架来构建文本输入框(动画效果超赞),今天重点学习了Auto Layout(以下简称AL)技术,主要是了解AL的工作原理,并且要掌握用代码添加constraints. 1.JVFloatLabeledTextfield JVFloatLabeledTextfield框架可以让文本框呈现一个漂浮的PlaceHolder,简洁.明确.生动.而这个框架另一个让我大开眼界的是他利用AL技术画直线,做出一个简单的表单页面.画

(一)认识Sass和Compass

第一章 Sass和Compass让样式表重焕青春 // 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战 1.2.1 通过变量来复用属性值 1 声明变量:$blue:#1875e7; 2 调用变量:.blue { color:$blue; } 1.2.2 通过嵌套来快速写出多层级的选择器 1 ul{ 2 float:right; 3 li { 4 float:left; 5 a{ color:#111

sass学习笔记--摘录

//$a: Helvetica, sans-serif //$b: #333 // //body //font: 100% $a //color: $b //$a: red //body //color: $a $a: red .box color:  $a color前的空格必须,red和$a前的空格必须 可以用koala快速执行编译输出 ---http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html 嵌套输出方式 nested

compass General 常用api学习[Sass和compass学习笔记]

compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览器其实已经可以不用了 ? 1 2 3 4 @mixin clearfix {   overflow: hidden;   @include has-layout; } 用overflow 就可以了

compass typography 排版 常用排版方法[Sass和compass学习笔记]

Bullets 用来定义ul li 相关的样式 no-bullet  关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有小圆点了 pretty-bullets($bullet-icon, $width, $height, $line-height, $padding) @mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $hei

SASS+COMPASS 自适应 学习笔记

来源 http://snugug.github.io/RWD-with-Sass-Compass/#/ 1 安装 COMPASS 扩展 安装 方式 gem 'extension', '~>X.Y.Z' 命令行安装 require '{extension}' @import '{extension}'; sass 文件导入   扩展1 http://breakpoint-sass.com/ 扩展2 http://singularity.gs/ 3 盒子模型 @import 'compass'; /

Sass与Compass 学习笔记

Sass与Compass 学习笔记 安装: 1.装sass之前先确认装了ruby ; 2.命令gem install sass *注一般不能正常安装 由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败.这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输