Coding Stock Photo

Written by

利用 HTML 類別快速為元素定位

編碼 Coding| Views: 28

使用 HTML + CSS 編寫網頁時,當要為元素的位置定位時,一般都需要在 CSS 上為它們編寫樣式,例如:

#element1{
width: 600px;
height: 500px;
margin-left: 10px;
}
#element2{
width: 600px;
height: 500px;
margin-left: 10px;
}
/* more elements to come */

一些懶人甚至會把元素的樣式寫到 HTML 裏,讓它變得難以閱讀及維護,例如:

<div class="btn-wrapper" style="margin-right: 20px; padding: 40px;">
<a class="btn btn-primary" style="margin-left: 10px;">Button 1</a> 
<a class="btn btn-warning" style="margin-left: 25px;">Button 2</a>
</div>

在以上兩種寫法中,寫到 CSS 上當然比寫到 HTML 裏好,至少比較容易閱讀及除錯。不過每當我想改變元素的位置時(例如我覺得 15px 的 left margin 比 10px 的 left margin 好看),我就需要到超過過百行的 CSS 上找回屬於該元素的樣式,然後更改,麻煩極了。所以,我偏好把它們寫成 CSS 的 class,然後寫到 HTML 的 class 裏,例如:

<div class="btn-wrapper">
<a class="btn btn-primary m-l-10">Button 1</a> 
<a class="btn btn-warning m-l-15">Button 2</a>
</div>

用 SCSS 的話會更方便,只需要加入以下的語法:

@for $i from 0 through 100 {
//Positive Margin
.m-t-#{$i} { margin-top: #{$i}px !important }
.m-b-#{$i} { margin-bottom: #{$i}px !important }
.m-l-#{$i} { margin-left: #{$i}px !important }
.m-r-#{$i} { margin-right: #{$i}px !important }
.m-#{$i} { margin: #{$i}px !important }

//Negative Margin
.m-t-n-#{$i} { margin-top: -#{$i}px !important }
.m-b-n-#{$i} { margin-bottom: -#{$i}px !important }
.m-l-n-#{$i} { margin-left: -#{$i}px !important }
.m-r-n-#{$i} { margin-right: -#{$i}px !important }
.m-n-#{$i} { margin: -#{$i}px !important }

//Padding
.p-t-#{$i} { padding-top: #{$i}px !important }
.p-b-#{$i} { padding-bottom: #{$i}px !important }
.p-l-#{$i} { padding-left: #{$i}px !important }
.p-r-#{$i} { padding-right: #{$i}px !important }
.p-#{$i} { padding: #{$i}px !important }
}

Leave a Reply

Your email address will not be published. Required fields are marked *