chunwen's blog

格線系統說明： 格線系統一開始是從平面設計衍生出來，目的是為了讓排版版面看起來更為整齊、美觀。 而網頁部分則是因為早期電腦螢幕通常都是1024px， 故早期設計上都以960px為主 。 欄數部分以12欄為主流(因為可以切分出較多組公倍數)。 接著我們來看一下網格系統吧! 下面這張圖是sketch 設定畫面 說明： 1.圖片中設定的Total width明明就是960px，但為何實際寬度只有940px呢? 原因出在，此格線系統有一個Gutter on outside(共20px)，而通常這部分都是設定在container上 (此案例的話是推padding-left:10px padding-right:10px) 補充：為何要有gutter on outside出現呢?  回答連結 簡單來說就是為了讓畫面不那麼擁擠，可以讓閱聽者閱讀上更加舒適 介紹完格線系統後，接著我們來想想上面的Gutter是怎麼產生呢? 你第一個想到應該會使用padding或margin來推擠吧!沒錯Bootstrap也是由 在column上使用padding來推擠  如下圖 但在column上加上padding推擠後會造成畫面往內縮(畫面不一致)，所以還要在row上加上margin將推擠回補 最後在行動版上， 若沒有在container上加一層padding推擠會無法產生兩邊相同間距(也會出現X軸可以水平移動) 如下圖    程式碼： // container拿掉padding .container {   max-width: 960px;   margin: 0 auto;   // padding-left: ($gutter-width/2);   // padding-right: ($gutter-width/2); } 但，如果補回padding值，左右就會保留一定寬度 // container拿掉padding .container {   max-width: 960px;   margi...

前言： 其實網路上已經有很多文章在介紹 SMACS 、OOCSS、BEM，而這篇文章存在的目的，就是以一個新手的角度來試著理解這三大架構如何幫助我們管理CSS。 OK，在開始介紹前，我們必須了解到這些設計方法存在的目的是 為了方便管理Css 所衍伸出來的。而所謂好的CSS撰寫該包含哪些特性呢? 這邊引用Kuro 大大之前分享- 漫談 CSS 架構方法 中提到的幾點概念 良好Css架構應包含 1.預測-Predictable 2.複用-Reusable 3.維護-Maintainable 4.延展-Scalable 先記住這幾項原則後，我們來分別簡略介紹這三大設計法則 OOCSS ( Object OrIEnted CSS) 設計基本原則有兩大點： 結構與樣式分離(Reusable) 內容與容器分離(Scalable) 結構與樣式分離 參考卡斯柏老師圖解 說明： 結構可以看成button中的width、height、padding等基本結構;樣式則可以看成外觀表現上如：border、background-color 案例： --從下面程式碼，我們可以發現button、box有部分css內容是重複的，這樣撰寫的話會造成日後若要調整顏色、外框粗細等樣式不便。此外，重複的css也造成檔案肥大。 #button {   width: 200px;   height: 50px;   padding: 10px;    border: solid 1px #ccc;   background: linear-gradient(#ccc, #222);   box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box {   width: 400px;   overflow: hidden;    border: solid 1px #ccc;   background: linear-g...

為何我們要學@mixin? @mixin可以幫助我們將一些常用語法模組化，協助專案開發時不會因為忘記相關CSS語法而打斷開發思緒。EX：clear清除浮動、等比例圖片放大、圖片取代文字等語法 了解目的後，我們來看一下，@mixin怎麼使用吧 1.首先新增一隻scss檔案，並以語意化方式命名~EX：_clearfix.scss 2.語法如下： @mixin clearfix() {   &::after {     display: block;     clear: both;     content: "";   } } .box{      @include clearfix; } Tips： 1.匯入語法時，前面要加@include 2.設定語法時，前面要加@mixin 3.編譯結果 接著，我們來使用帶入變數寫法 上一篇 Sass教學-變數 有提到變數寫法是 「$」+「變數」 ，故結合@mixin我們可以這樣寫 @mixin circle($size,$background){       width: $size ;       height: $size ;       background: $background ; } box{     @include circle(50px,black) } 編譯結果示意圖如下 最後，我們來學習如何用@mixin 搭配 @content 之RWD用法教學 開始前，我們先思考一下為何需要使用這樣的寫法呢? 我自己的理解如下： 過往我們在撰寫不同斷點時，往往每次都需要重複撰寫@media(max-width:...