compass reset and layout [Sass and compass study notes]_html/css

compass reset and layout [Sass and compass study notes]_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:00:34

Original

1178 people have browsed it

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 Footer

This 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"

Copy after login

使用方法

Copy after login

@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")

Copy after login

对应的html结构

Copy after login

<body>  <div id="root">    <div id="root_footer"></div>  </div>  <div id="footer">    Footer content goes here.  </div></body>

Copy after login

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

Stretching

Stretching 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

Grid Backgrounds

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/