scss的初级学习随笔小计

$white: #fff;
$three: #333;
$six: #666;
$nine: #999;
$red: #fff;
$orange: #f63;
$yellow: #fc0;
$opcity: rgba(255, 255, 255, 0);
/*定义一个宽高的混入*/
$list: width height line-height bordius;
@mixin box($wide){
    @if length($wide) == 1{
        #{nth($list, 1)}: nth($wide, 1);
    }
    @else if length($wide) ==2 {
        #{nth($list, 1)}: nth($wide, 1);
        #{nth($list, 2)}: nth($wide, 2);
    }
    @else if length($wide) ==3{
        #{nth($list, 1)}: nth($wide, 1);
        #{nth($list, 2)}: nth($wide, 2);
        #{nth($list, 3)}: nth($wide, 3);
    }
    @else {
        #{nth($list, 1)}: nth($wide, 1);
        #{nth($list, 2)}: nth($wide, 2);
        #{nth($list, 3)}: nth($wide, 3);
        #{nth($list, 4)}: nth($wide, 4);
    }
}
/*定义一个绝对定位的混入*/
@mixin box-move($top, $left) {
    position: absolute;
    top: ($top);
    left: ($left);
}

body {
    background: url("../images/bg.jpg");
}

header {
    @include box(1200px, 566px);
    margin: auto;
    position: relative;
    .logo-1 {
        @include box(164px, 60px);
        background: url("../images/header-logo1.png");
        margin-top: 50px;
    }
    .logo-2 {
        @include box(610px, 194px);
        background: url("../images/header-logo2.png");
        @include box-move(200px, 50px);
    }
    .logo-3 {
        @include box(480px, 216px);
        background: url("../images/header-logo3.png");
        @include box-move(200px, 754px);
    }
    .logo-4 {
        background: url("../images/header-logo4.png") no-repeat left center;
        @include box(130px, 102px);
        @include box-move(440px, 960px);
        padding-left: 110px;
        text-align: left;
        margin-right: 10px;
        font-size: 18px;
        em {
            font-weight: normal;
            color: $three;
            display: inline-block;
            padding-top: 4px;
        }
        p {
            margin-top: 10px;
            line-height: 20px;
            font-size: 12px;
            color: $six;
        }
    }
}

nav {
    background: url("../images/nav-bg.jpg");
    ul {
        width: 1200px;
        margin: auto;
        font-size: 0;
        text-align: center;
        .nav-1 {
            width: 90px;
            background: none;
        }
        li {
            display: inline-block;
            @include box(150px, 76px);
            font-size: 18px;
            text-align: right;
            background: url("../images/list-logo.png") no-repeat left center;
            margin-right: 30px;
            line-height: 76px;
            a {
                color: $white;
                &:hover {
                    color: $yellow;
                    font-size: 20px;
                    line-height: 74px;
                }
            }
        }
    }
}

scss的初级学习随笔小计

原文：http://www.cnblogs.com/bgxiaoniu/p/xiaoniu.html