sass和compass學習筆記2（compass）

時間  2019-12-08
標籤 sass compass 學習 筆記 简体版
原文   原文鏈接

在學習compass以前先看一下compass對compass是如何定義的。css

這裏寫圖片描述

compass是一個開源的CSS自動化處理框架，而以前講的sass是一種css預處理器，相似於less,stylus等。compass包含了各類用於樣式的模塊，它與sass關係相似於jquery與js同樣，使用compass中封裝的模塊可以更加方便快速的編寫css樣式文件。html

關於compass的安裝以前已經介紹過了，compass目前包含7個模塊html5

  • Reset：瀏覽器樣式重置jquery

  • CSS3：提供支持css3的命令支持css3

  • Layout：提供頁面佈局模塊git

  • Helpers：提供一系列幫助函數github

  • Typography：提供版式功能web

  • Utilitie：提供不屬於其餘模塊的功能chrome

  • Browser Support：提供瀏覽器支持的模塊
    在使用這些模塊的時候，都須要提早引入，引入的格式能夠是@import "compass" 所有引入，也能夠是@import "compass/reset" 格式引入具體的模塊。下面對這幾個模塊分別具體介紹一下：瀏覽器

1 Reset模塊

Reset 重置瀏覽器的默認樣式

@import "compass/reset";

也能夠從網上下載其餘的樣式重置模塊，介紹一下normalize.css模塊，git下載地址necolas.github.io/normalize.css或者也能夠直接在控制檯中安裝

$gem install compass-normalize

在config.rb配置文件中頭部添加

require 'compass-normalize'

使用時在screen.css引入該模塊

@import "normalize";

normalize的核心樣式模塊主要有base,html5,links,typography,embeds,groups,forms,tables等，在使用時也能夠引入單個模塊

@import "normalize/base";

Reset模塊還包含不少Mixin,，例如reset-table的mixin以下

@mixin reset-table {
  border-collapse: collapse;
  border-spacing: 0;
}

具體其餘模塊能夠查看官網文檔

2 layout模塊

指定頁面總體佈局，通常使用率不高

//生成垂直和水平的柵格佈局
@import "compass/layout/grid-background";
//相對父類的絕對定位
@import "compass/layout/stretching";
//指定頁面的footer一直也底部
@import "compass/layout/sticky-footer";

2.1 stretch-full模塊

.stretch-full{
    @include stretch();
}

編譯生成css

.stretch-full{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

同時還能修改stretch內參數

.stretch-full{
    @include stretch(5px, 5px, 5px, 5px);
}

編譯產生css文件

.stretch-full{
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
}

2.2 sticky footer

該模塊須要特定的html文檔結構

//html文檔
<body>
    <div id="root">
        <p>
            This is the main content area
        </p>
        <div id="root_footer"></div>
    </div>
    <div id="footer">
        footer content goes here
    </div>
</body>
//scss
@include sticky-footer(40px);
//css
#root {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -40px;
}
#root #root_footer {
  height: 40px;
}
#footer {
  clear: both;
  position: relative;
  height: 40px;
}

這裏寫圖片描述

同時也能夠自定義根和底部的名字

@include stick-footer(30px, "#my-root", "#my-root-footer", "#my-footer");

2.3 grid background

在上面例子的基礎上添加柵格背景

#root{
    @include grid-background();
}

3 CSS3模塊&Browser Support 模塊

提供一些css3跨瀏覽器的支持，css3的一些新特定border-radius,text-shadow等，在使用css3時不少時候都要調整bowser_support模塊的支持

3.1 box-shadow

通常若是本身寫一個盒子邊緣陰影效果

box-shadow:1px 1px 3px 2px #eee;
-webkit-box-shadow: 1px 1px 3px 2px #eee;
-moz-box-shadow: 1px 1px 3px 2px #eee;

爲了兼容各個瀏覽器的版本，須要寫CSS3很是使人頭疼，能夠用css3模塊來解決

//引入CSS3模塊
@import "compass/css3";
div{
    @include box-shadow(1px 1px 3px 2px #eee);
}

css文件

div{
  -moz-box-shadow: 1px 1px 3px 2px #eee;
  -webkit-box-shadow: 1px 1px 3px 2px #eee;
  box-shadow: 1px 1px 3px 2px #eee;
}

若是不須要-moz模塊，這時能夠調用browser模塊，改變須要的模塊

@import "compass/support";
browsers()
//compass內置了browsers()函數，用來返回一個瀏覽器list
//利用sass的debug指令，打一條debug日誌
@debug browsers();

支持的瀏覽器以下：

這ddd裏寫圖片描述

//設置只支持chrome
$supported-browsers:chrome;
//只生成webkit
  -webkit-box-shadow: 1px 1px 3px 2px #eee;
  box-shadow: 1px 1px 3px 2px #eee;

同時還能夠指定支持瀏覽器的最小版本號

$browser-minimum-versions:("ie": "8");

3.2 opacity透明度設置：

.test-opacity{
    @include opacity(0.3);
}
.test-opacity {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}

3.3 border-radius

//指定圓角半徑參數爲5px，@include爲調用相應的mixin
.rounded{
    @include border-radius(5px);
}

編譯後css

.rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

4 Typography模塊

主要用來修飾一下文本樣式，連接樣式等

4.1 links

//連接樣式
@import "compass/typography/links";
a{
    @include hover-link();
}

css文件

a {
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

4.2 link-color

//修改不一樣狀態下的超連接顏色
a{
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
//依次參數列表
a {
  color: #00c;
}
a:visited {
  color: #ccc;
}
a:focus {
  color: #cc0;
}
a:hover {
  color: #0cc;
}
a:active {
  color: #c0c;
}

4.3 修改列表佈局Lists

@import "compass/typography/lists";
.list-unstyled{
    @include no-bullets();
}

css文件

.list-unstyled {
  list-style: none;
}
.list-unstyled li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

4.4 實現li 的橫向佈局

.list-inline{
    @include inline-list();
}
.list-inline {
  list-style-type: none;
}
.list-inline, .list-inline li {
  margin: 0;
  padding: 0;
  display: inline;
}

4.5 Text

1. force-wrap

@import "compass/typography/text";
.text-force-wrap{
    @include force-wrap();
}
----------
.text-force-wrap {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
}

2. nowrap

.text-nowrap{
    @include nowrap();
}
----------
.text-nowrap {
  white-space: nowrap;
}

3. Ellipsis
相似於QQ羣查找時，文字超過容器的寬度，後面用省略號，hover的時候顯示具體信息框

這裏寫圖片描述

實現使用Text下的ellipsis
安裝ellipsis插件

$ compass install compass/ellipsis

查看工程目錄，在stylesheets下多一個xml文件夾和ellipsis.css文件

這裏寫圖片描述

$use-mozilla-ellipsis-binding: true;
.text-ellipsis{
    @include ellipsis();
}
//自動兼容低版本的firefox
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -moz-binding: url('/stylesheets/xml/ellipsis.xml#ellipsis');
}

5 Utilities

5.1 css sprites

css sprites圖的設置

@import "compass/utilities/sprites";
@import "image/icon/*.png";

.myicon{
    width: 20px;
    height: 20px;
    @include all-icon-sprites;
}

5.2 clearfix

清除浮動，是常常要作到事

1. 方法一

@import "compass/utilities/general";
.clearfix{
    @include clearfix();
}
//*zoom兼容ie6
.clearfix {
  overflow: hidden;
  *zoom: 1;
}

2. 方法二

引入僞類清除浮動

.clearfix{
    @include pie-clearfix();
}
.clearfix {
  *zoom: 1;
}
//display: table不兼容ie6
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

3. 方法三
因爲上述display: table 不能很好的兼容ie6,下面引入一種支持ie6的僞類清除浮動

.clearfix{
    @include legacy-pie-clearfix();
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

5.3 float

兼容消除ie6中margin產生的浮動雙倍邊距

@import "compass/utilities/general/float"

平時咱們一般採用

.pull-left{
    float: left;
    display: inline;
}

引入float mixin

.pull-left{
    @include float(left);
}
//產生的css代碼中沒有display: inline;
.pull-left {
  float: left;
}

上面編譯產生的css代碼中沒有display: inline，這裏須要設置一下瀏覽器的最低版本

$browser-minimum-version:("ie", "6");

完

[TOC]

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程