/* 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" /> */

@import "variable"; //导入变量文件

// 需要安装插件 gem install compass-normalize
// config.rb配置 require 'compass-normalize'
@import "normalize" ; 
//@import "compass/reset";
@import "compass/layout";

@include sticky-footer(54px);

/**
`commonProperty`先声明再使用
*/
@mixin commonProperty($w: 50%) {
    background: #fff;
    padding: 5px;
    width: $w;
    float: left;
}

.btn { //　编译「显示」到css中
    margin: 0;
}


%btn-hidden { //　编译「不显示」到css中
    text-align: center;
}

//----
.btn-primary {
    @extend .btn;
    @extend %btn-hidden;
    @include commonProperty();
    padding: 9px;
}

html, body {
    color: $color;

    font: { // 属性嵌套
        family: '黑体';
        size: 16px;
    }

    @at-root { // 保留层次关系，编译后到顶层
        .header {
            position: relative;
        }
    }
}

p {
    @include commonProperty(100%);

    background-image: image-url("a.png"); //属性中，直接调用函数
}

@debug append-url("hello.png"); 

/**
`makecText`先声明再使用
*/
@function makeText($selector) {
    @return $selector;
}


#{ makeText(".hello-world") } { //如果在选择器材中使用，#{functionName}
    color: red;
    font-size: 20px;
}