我正在研究Sass / scss + bootstrap 3项目。这是我在sass / scss中的第一个项目。 我在这里上传位代码，这样任何人都可以让我知道它是正确的编码方式还是我需要改进我的编码。
我将非常感激。
@mixin common{
float: left;
width: 100%;
}
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
}
@mixin full-bg{
background-position:center center;
background-size:cover;
}
a.be-buddy{
background: rgba($brand-primary, 0.7);
color: $brand-white;
font-size: $font-size-h4;
font-weight: $headings-font-weight;
padding: ($padding-large-vertical * 2);
line-height: $line-height-computed;
float: left;
position: relative;
z-index: $zindex-be-buddy;
text-decoration: none;
width:100%;
text-align:center;
&:hover{
background: rgba($brand-primary, 1);
text-decoration:none;
}
}
.navbar-wrapper {
position: absolute;
top: 0;
width: 100%;
z-index:$zindex-navbar;
}
.login a{
float:right;
background: rgba($gray-base, 0.5);
color: $brand-white;
font-size: $font-size-h4;
padding:($padding-large-vertical * 2);
font-weight: $headings-font-weight;
text-decoration: none;
line-height: $line-height-computed;
&:hover{
background: rgba($gray-base, 0.6);
text-decoration: none;
}
}
.cart-icon{
width:65px;
height:65px;
padding:$padding-large-vertical;
margin:1.5em auto;
display:block;
background:$gray-lighter;
color: $brand-success;
font-size: $font-size-h2;
font-weight: $headings-font-weight;
position:relative;
text-shadow:none;
&:before{
width:150px;
height:1px;
position:absolute;
left:-170px;
top:32px;
content: "";
border-bottom: 1px solid $gray-lighter;
}
&:after{
width:150px;
height:1px;
position:absolute;
right:-170px;
top:32px;
content: "";
border-bottom: 1px solid $gray-lighter;
}
}
.brands-strip{
@include common;
padding: $padding-large-vertical;
position:relative;
&:before{
content: " ";
background: url("../scss/images/zigzag-top.png") repeat-x;
height:8px;
position:absolute;
top:-7px;
left:0;
width:100%;
}
&:after{
content: " ";
background: url("../scss/images/zigzag-bottom.png") repeat-x;
height:8px;
position:absolute;
bottom:-7px;
left:0;
width:100%;
}
}
.box-width{
width:14.2%;
height:( $padding-large-vertical * 6.4);
float:left;
img{
display:block;
margin:auto;
}
}
.video{
background-image: url("../scss/images/grass.jpg");
background-attachment: fixed;
@include full-bg;
padding: ($padding-large-vertical * 3) (0);
overflow:hidden;
}
.rounded-box{
@include common;
background: rgba($brand-white, 0.8);
@include border-radius($border-radius-base);
min-height:92px;
color: $text-color;
margin-top: $margin25;
padding: $padding-large-vertical;
&:last-child{
margin-bottom: $margin25;
}
p{
font-size: $font-size-h4;
color: $text-color;
width:100%;
display: table-cell;
vertical-align: middle;
height:72px;
}
}
.video-bg{
background:url("../scss/images/ipad.png") no-repeat;
background-size:cover;
position:relative;
bottom:-30px;
width:610px;
height:409px;
& iframe{
margin-left: 161px;
margin-top: 35px;
width: 410px;
height: 270px;
}
}
HTML CODE：
<div class="navbar-wrapper">
<div class="container"><div class="row">
<div class="col-xs-7 col-sm-4 col-md-3"><div class="row">
<a class="be-buddy" href="#"> <i aria-hidden="true" class="fa fa-shopping-bag"></i> Buddy wordene</a>
</div></div>
<div class="col-xs-5 visible-xs"><div class="row"><div class="login text-center">
<a href="#"> <i aria-hidden="true" class="fa fa-user"></i> Inloggen </a>
</div></div></div>
<div class="col-xs-12 col-sm-8 col-md-9"><div class="row">
<nav class="navbar navbar-static-top">
<div class="navbar-header">
<a href="#page-top" class="navbar-brand visible-xs"><img src="scss/images/Logo-Inverted.png" class="img-responsive" alt="superbuddy-logo"></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Over Ons</a></li>
<li><a href="#about">Vacatures</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="login hidden-xs" id="login">
<a href="#"> <i aria-hidden="true" class="fa fa-user"></i> Inloggen </a>
</div>
</div>
</nav>
</div></div>
<div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-4 col-md-2 col-md-offset-5 hidden-xs"><a href="#page-top" class="navbar-brand"><img src="scss/images/logo.png" class="img-responsive" alt="superbuddy-logo"></a></div>
</div></div>
</div>
<section class="video">
<div class="container"><div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-5 col-md-offset-0">
<div class="rounded-box">
<div class="col-xs-3 col-sm-3 col-md-3"><div class="row"> <img src="scss/images/delivery-icon.png" class="img-responsive" alt="delivery-icon"> </div></div>
<div class="col-xs-9 col-sm-9 col-md-9"> <p>Eerste bestelling gratis thuisbezorgd, daarna vanaf €5,00</p> </div>
</div>
<div class="rounded-box">
<div class="col-xs-3 col-sm-3 col-md-3"><div class="row"> <img src="scss/images/timing-icon.png" class="img-responsive" alt="timing-icon"></div> </div>
<div class="col-xs-9 col-sm-9 col-md-9"> <p>We bezorgen in tijdvakken van 30 minuten, al binnen 1,5 uur</p> </div>
</div>
<div class="rounded-box">
<div class="col-xs-3 col-sm-3 col-md-3"><div class="row"> <img src="scss/images/price-icon.png" class="img-responsive" alt="price-icon"></div> </div>
<div class="col-xs-9 col-sm-9 col-md-9"> <p>Minimaal bestelbedrag €10,00</p> </div>
</div>
</div>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-7 col-md-offset-0 col-lg-6 col-lg-offset-1">
<div class="video-bg">
<iframe id="video" src="https://www.youtube.com/embed/QL7hmM228UU?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div></div>
</section>