compass 基础

/*! Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

/**
 *    CONTENTS
 *
 *    SETTINGS
 *        variables............................变量集中存储文件
 *        mixin................................mixin集中存储文件
 *
 *    TOOLS
 *
 *    COMPONENTS
 *        reset................................compass内置浏览器重置样式文件
 *
 *    BUSINESS
 *
 *    BASE
 *        screen.scss..........................针对当前站点主页样式的修饰
 * 
 */

@import "varialbes", "mixin";

// @import "compass/reset";
@import "compass/reset/utilities";
@include global-reset;

@import "normalize-version";
/* 分割线1 */
@import "normalize/base";
/* 分割线2 */
@import "normalize/html5";
/* 分割线3 */
@import "normalize/links";


@import "compass/layout";

// @import "compass/layout/grid-background";
// @import "compass/layout/sticky-footer";
// @import "compass/layout/stretching";


@import "compass/css3";
@import "compass/support";
@import "compass/typography/links";
@import "compass/typography/lists";

// @import "compass/typography";

@debug browsers();

// $supported-browsers: chrome;
// $browser-minimum-versions: ("ie": "8");

div{
    // appearance: button;

    @include appearance("button");
}

.test-inline-block{
    @include inline-block();
}

.test-opacity{
    @include opacity(.7);
}

// $grid-background-column-color : rgba(255, 0, 0, .25);
// #root{
    // @include grid-background();
// }

.headline{
    font-family: $headline-ff;
}

.main-sec{
    font-family: $main-sec-ff;
    @at-root{
        .main-sec-headline{
            font:{
                family: $main-sec-ff;
                size:16px;
            }
        }

        .main-sec-detaile{
            font-size:12px;
        }    
    }
}

a{
    &:hover{
        color:blue;
    }
}

p {
    color: hsl(270, 100%, 50%);
}

.webdemo-sec{
    @include col-sm();
    @include box-shadow(1px 1px 3px 2px #cfcecf);

    &:hover{
        background-color: #f5f5f5;
    }
}

// .error.instrusion{
//     background: url("../images/hacked.png");
// }

%error{
    color: red;
}

.serious-error{
    @extend %error;
    border:1px solid red;
}

@include sticky-footer(30px);

a{
    // @include hover-link();
    // @include link-colors(#00c, #0cc, #c0c, #cc0, #c00);
    // @include unstyled-link();
}

.list-unstyled{
    @include no-bullets();
}

.list-unstyled-li{
    @include no-bullet();
}

.list-inline{
    @include inline-list();
}

.list-horizontal{
    @include horizontal-list(0, right);
}

.list-inline-block{
    @include inline-block-list(7px);
}

 

  mixin

@mixin col-6(){
    width:50%;
    float:left;
}

@mixin col-sm($width: 50%){
    @if type-of($width) != number{
        @error "$width必须是一个数值类型，你输入的width是：#{$width}.";
    }

    @if not unitless($width){
        @if unit($width) != "%"{
            @error "$width应该是一个百分值，你输入的width是：#{$width}";
        }
    } @else {
        @warn "$width应该是一个百分值，你输入的width是：#{$width}.";
        $width: (percentage($width) / 100); 
    }

    @media (min-width:768px){
        width: $width;
        float: left;
    }
}

 

variable

$headline-ff: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, sans-serif;

 

options

outputStyle

Type: String

CSS output mode. Can be: nested, expanded, compact, compressed.