compass reset和layout [Sass和compass學習筆記]

時間 2019-11-06

標籤 compass reset layout sass 學習筆記简体版

原文原文鏈接

reset 能夠重置瀏覽器的的html的默認樣式，由於各個瀏覽器對有些元素解析差異很大css

經過重置樣式能夠讓樣式的瀏覽器兼容更簡單html

使用方法簡單css3

@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/ htm

具體的語法sticky-footer($footer-height, $root-selector, $root-footer-selector, $footer-selector)blog

$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/

相關標籤/搜索

sass+compass+bootstrap

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。