Compass reset and layout [sass and compass learning notes]

Source: Internet
Author: User

Reset can reset the default HTML style of the browser, because the parsing of some elements varies greatly from browser to browser.

You can reset the style to make style browser compatibility easier.

Easy to use

@ Import "Compass/RESET"

Layout has several common layout functions, which I think are quite useful. Others are used to write components that are very commonly used.

Sticky footer

This module provides a tool to layout your footer and stick it to the bottom of the page.

This module is mainly used to layout the footer, so that the footer can 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"
Usage
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")
Corresponding HTML Structure
<body>  <div id="root">    <div id="root_footer"></div>  </div>  <div id="footer">    Footer content goes here.  </div></body>

Online Demo http://compass-style.org/examples/compass/layout/sticky-footer/ is also available officially

Specific syntax sticky-footer ($ footer-height, $ root-selector, $ root-footer-selector, $ footer-Selector)

$ Footer-Height: footer height

$ Root-selector: ID of the page topic

$ Root-footer-selector: footer ID in the form

$ Footer-selector: Real footer

Stretching

Stretching is mainly used to locate the position of child elements in the parent container.

There are some demo http://compass-style.org/examples/compass/layout/stretching/ official

For example, the following Layout

 

Included layout functions


Stretch-y ($ offset-top, $ offset-bottom) positioning in the Y direction
Stretch-X ($ offset-left, $ offset-Right) positioned in the X direction
Stretch ($ offset-top, $ offset-right, $ offset-bottom, $ offset-left) integrates the positioning of the X and Y directions.

Grid backgrounds

Grid background hybrid components allow you to generate a fixed, fluid, and elastic grid layout,

This is implemented using css3 gradients,

It is mainly used for layout testing and proofreading.

In fact, I feel that this is useless and mainly used for reference layout.

Specific reference and a variety of use methods can refer to the http://compass-style.org/reference/compass/layout/grid_background/ here

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.