构建导航条
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;
}
}
}