Sass&rwd前端版型架構規劃

.header {
..
}
@media(max-width: 768px) {
.header {
..
}
}
.header {
..
}
}

@mixin Pad{
@content
}
}
@mixin iPhone6{
@content
}
}

.header {
..
@include Pad{
..
}
@include iPhone6{
..
}
}

button
button
<input type="button" class="btn">
<input type="button" class="btn btn-primary">
<input type="button" class="btn btn-primary btn-large">
button
btn hack
btn-primary
btn-large padding

// (JS)
.block--active
//
.block--MobileShake
//block title Float
.block__title--float //BEM
.block-title--float //

<div class="table table-h trailer">
<div class="table-row table-row--MobileInline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile

<div class="table-row table-row--MobileIline">
</div>
<div class="table-title"> </D>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
SMACSS
1.table
2.table-h table-v

</div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
1. div table  
RWD  
Mobile  
2. table

</div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
trailer = margin-bottom:1
w20 = 20%
OOCSS - CSS Class

</div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
table-row--MobileInline = div inline
BEM -

</div>
<div class="table-title"> </div>
</div>
</div>

@import "conﬁg/*";
@import "helper/*";
@import "component/*";
@import "layout/*";
@import "page/*";
@import "vendor/*";
@import "inbox";
//

1. scss bsp.scss red.scss
2. _subtheme.scss
bsp.scss

Sass&rwd前端版型架構規劃

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Sass&rwd前端版型架構規劃

Similar to Sass&rwd前端版型架構規劃 (20)

Recently uploaded

Recently uploaded (20)