构建导航条

sass语法

1.    导入其他sass样式文件

@import "init.scss";  //一般存储各页面通用样式，例如清理浏览器初始样式。

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {

margin:0;

    padding:0;

    border:0;

    vertical-align:baseline;

    list-style:none;

    text-decoration:none;

}

2.    通用属性值可使用变量

@import "constants.scss";

$pageWidth:1170px;//定义变量

width:$pageWidth;//使用变量

3.     导航条样式

.nav{

    margin-left:180px;

        float:left;    //导航条元素向左浮动，一行显示

        li{

            float:left;

            margin-right:60px;    //li元素间距

            line-height:$navHeight;

            height:$navHeight;

            box-sizing:border-box;

            a{

                color:#fff ;

            }

            &.active{    // &表示父容器属性

                border-bottom:5px solid #5c87d9;

            }

    }

}