Home >Web Front-end >HTML Tutorial >compass reset and layout [Sass and compass study notes]_html/css_WEB-ITnose
compass reset and layout [Sass and compass study notes]_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:00:341181browse
reset can reset the default style of the browser's html, because each browser parses some elements very differently
By resetting the style, you can make the style browser compatible Simpler
Easy to use
@import "compass/reset"
layout has several common layout functions, which I think are quite useful. Others are used Very commonly used for writing components
Sticky FooterThis module provides the tools needed to layout your footer so that it sticks to the bottom of the page.
This module is mainly used to lay out the footer, which allows the footer to be fixed at the bottom of the page. It is a commonly used function and has supporting html code
Reference method
@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>
The official online demo is still available http://compass-style.org/examples/compass/layout/sticky-footer/
Specific syntax sticky-footer($footer-height, $root-selector, $root-footer-selector, $footer-selector)
$footer-height: footer height
$ root-selector: The id of the page theme
$root-footer-selector: The formal footer id
$footer-selector: Really a footer
StretchingStretching Main Used to position my position for positioning child elements in the parent container
There are also some official demos http://compass-style.org/examples/compass/layout/stretching/
For example The layout functions below
include the layout function
stretch-y($offset-top, $offset-bottom) positioned at Positioning in the y direction
stretch-x($offset-left, $offset-right) Positioning in the x direction
stretch($offset-top, $offset-right, $offset-bottom, $offset- left) Comprehensive x, y positioning
The grid background hybrid component allows you to produce fixed, fluid and elastic grid layouts,
This is implemented using css3 Gradients,
I think it is mainly used for layout testing and proofreading
Actually, I don’t think this is useful, it is mainly used as a reference layout
You can refer to the specific how to quote and various usage methods. Here http://compass-style.org/reference/compass/layout/grid_background/