欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用CSS的Sass預(yù)處理器（框架）來制作居中效果

W3Cplus-Sean的博客   發(fā)布時間：2016-03-10 11:04:39   作者：南北   我要評論
這篇文章主要介紹了利用CSS的Sass預(yù)處理器來制作居中效果的教程,圍繞Sass mixin的編寫方法進行講解,同時介紹了如何使用Flexbox來讓子元素居中,需要的朋友可以參考下

雖然使用 CSS 創(chuàng)建居中效果需要耍一些花招，特別是垂直居中效果，但我認為由此生出的詆毀，對于 CSS 則是不公平的。實際上我們有太多的方式使用 CSS 創(chuàng)建居中效果了，而且作為一名前端開發(fā)者，你真的有必要對其中的原理了解一二。

寫這篇文章的目的不是為了向各位解釋這些方法的工作原理，而是介紹將這些方法編寫為 Sass mixin 的方式，繼而將它們復(fù)用到各類項目中。

總體概述

本文將會專注于解決子元素居中于父類容器的問題，就實踐經(jīng)驗來說，這也是最常使用到的居中效果。當(dāng)你請教別人 CSS 中和居中效果相關(guān)的問題時，他們往往會反問你：你知道元素具體的寬高嗎？之所以會有這樣的反問，是因為如果知道元素的寬高，那么最好的解決方案就是使用 CSS transform 屬性。雖然該屬性在瀏覽器中的支持度稍低，但卻有著高度靈活的特性；如果因為瀏覽器兼容性令你不能使用 CSS transform 屬性，或者也不知道元素的寬高，那么實現(xiàn)居中效果的最簡單方法就是使用負向 margin。

我們今天要創(chuàng)建的 Sass mixin 就是基于上述的方法：將元素的左上角絕對定位到容器的中心位置，然后為 mixin 添加兩個可選參數(shù)，分別代表元素的寬高，如果傳遞了參數(shù)，那么就使用負向 margin 的方法實現(xiàn)居中；如果沒有傳遞參數(shù)，就使用 CSS transform 的方法。

當(dāng)我們的 Sass mixin 創(chuàng)建成功后，基本的使用方式如下所示：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /**  
  2.  * 為子元素設(shè)定定位上下文  
  3.  */  
  4. .parent {   
  5.     position: relative;   
  6. }   
  7.   
  8. /**  
  9.  * 讓子元素絕對居中于父容器  
  10.  * 沒有向 Sass mixin 傳遞參數(shù)，使用 CSS transform 屬性實現(xiàn)居中效果  
  11.  */  
  12. .child-with-unknown-dimensions {   
  13.     @include center;   
  14. }   
  15.   
  16. /**  
  17.  * 讓子元素絕對居中于父容器  
  18.  * 向 Sass mixin 傳遞了寬度，所以就使用負向 margin 處理水平位置，  
  19.  * 使用 CSS transform 處理垂直位置   
  20.  */  
  21. .child-with-known-width {   
  22.     @include center(400px);   
  23. }   
  24.   
  25. /**  
  26.  * 讓子元素絕對居中于父容器  
  27.  * 向 Sass mixin 傳遞了高度，所以就使用負向 margin 處理垂直位置，  
  28.  * 使用 CSS transform 處理水平位置   
  29.  */  
  30. .child-with-known-height {   
  31.     @include center($height: 400px);   
  32. }   
  33.   
  34. /**  
  35.  * 讓子元素絕對居中于父容器  
  36.  * 向 Sass mixin 傳遞了高度和寬度，所以就使用負向 margin 處理水平和垂直位置  
  37.  */  
  38. .child-with-known-dimensions {   
  39.     @include center(400px, 400px);   
  40. }  

上述 Sass 代碼經(jīng)過編譯之后，輸出結(jié)果如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .parent {   
  2.     position: relative;   
  3. }   
  4.   
  5. .child-with-unknown-dimensions {   
  6.     position: absolute;   
  7.     top: 50%;   
  8.     left: 50%;   
  9.     transform: translate(-50%, -50%);   
  10. }   
  11.   
  12. .child-with-known-width {   
  13.     position: absolute;   
  14.     top: 50%;   
  15.     left: 50%;   
  16.     margin-left: -200px;   
  17.     width: 400px;   
  18.     transform: translateY(-50%);   
  19. }   
  20.   
  21. .child-with-known-height {   
  22.     position: absolute;   
  23.     top: 50%;   
  24.     left: 50%;   
  25.     transform: translateX(-50%);   
  26.     margin-top: -200px;   
  27.     height: 400px;   
  28. }   
  29.   
  30. .child-with-known-dimensions {   
  31.     position: absolute;   
  32.     top: 50%;   
  33.     left: 50%;   
  34.     margin-left: -200px;   
  35.     width: 400px;   
  36.     margin-top: -200px;   
  37.     height: 400px;   
  38. }  

還不錯，就是看起來有點啰嗦，不過鑒于是用來做 demo 的，也不必太過強求了。

創(chuàng)建 mixin

思路屢清楚了，下面開工！根據(jù)上面的代碼片段，我們已經(jīng)知道了這個 mixin 的主要特征：接收兩個可選的參數(shù)，用來表示元素的寬高（$width 和 $height）。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /// Horizontal, vertical or absolute centering of element within its parent   
  2. /// If specified, this mixin will use negative margins based on element's   
  3. /// dimensions. Else, it will rely on CSS transforms which have a lesser   
  4. /// browser support but are more flexible as they are dimension-agnostic.   
  5. ///   
  6. /// @author Hugo Giraudel   
  7. ///   
  8. /// @param {Length | null} $width [null] - Element width  
  9. /// @param {Length | null} $height [null] - Element height  
  10. ///   
  11. @mixin center($width: null, $height: null) { .. }   
  12. 然后，由分析知，要實現(xiàn)居中必須讓元素絕對定位：   
  13.   
  14. @mixin center($width: null, $height: null) {   
  15.     position: absolute;   
  16.     top: 50%;   
  17.     left: 50%;   
  18. }  

在這里讓我們暫停一下，深入分析后續(xù)邏輯的層次：

width height solution
null null translate
defined defined margin
defined null margin-left + translateY
null defined margin-right + translateX

秀代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin center($width: null, $height: null) {   
  2.     position: absolute;   
  3.     top: 50%;   
  4.     left: 50%;   
  5.   
  6.     @if not $width and not $height {   
  7.         // Go with `translate`   
  8.     } @else if $width and $height {   
  9.         // Go width `margin`   
  10.     } @else if not $height {   
  11.         // Go with `margin-left` and `translateY`   
  12.     } @else {   
  13.         // Go with `margin-top` and `translateX`   
  14.     }   
  15. }  

通過上面的代碼，我們已經(jīng)搭好了 mixin 的骨架，只需要再添加上具體的邏輯代碼即可：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin center($width: null, $height: null) {   
  2.     position: absolute;   
  3.     top: 50%;   
  4.     left: 50%;   
  5.   
  6.     @if not $width and not $height {   
  7.         transform: translate(-50%, -50%);   
  8.     } @else if $width and $height {   
  9.         width: $width;   
  10.         height: $height;   
  11.         margin: -($width / 2) #{0 0} -($height / 2);   
  12.     } @else if not $height {   
  13.         width: $width;   
  14.         margin-left: -($width / 2);   
  15.         transform: translateY(-50%);   
  16.     } @else {   
  17.         height: $height;   
  18.         margin-top: -($height / 2);   
  19.         transform: translateX(-50%);   
  20.     }   
  21. }   
  22.   

注意！上面代碼中的 #{0 0} 實際上一種容錯措施，如果直接使用 0 0 的話，Sass 解析器會嘗試進行數(shù)值運算（在這里會自動進行 0 -($height / 2) 的數(shù)學(xué)運算），進而導(dǎo)致我們得到 margin: mt 0 ml; 而不是想要得到的 margin: mt 0 0 ml;。
深入淺出

基本的功能實現(xiàn)后，我們還可以添加更多的特性，比如添加 @support 來檢查瀏覽器對 CSS transform 的支持度，進而可以根據(jù) CSS transform 的支持度輸出相應(yīng)的條件樣式。此外，我們還可以更嚴謹?shù)厝y試出入的參數(shù)是否是有效數(shù)值……

使用 Flexbox

看到 Flexbox 這個詞是不是就很興奮啊，少年！確實，使用 Flexbox 確實是最簡單的方式，它和前面方法主要的差別在于，使用 Flexbox 需要為父容器設(shè)定相關(guān)樣式，而使用前面的方法則主要是為子元素設(shè)定相關(guān)樣式（當(dāng)然，父容器需要被設(shè)定為除 static 之外的任意 position）。

使用 Flexbox 實現(xiàn)子元素的居中效果，只需三行代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin center-children {   
  2.     display: flex;   
  3.     justify-content: center;   
  4.     align-items: center;   
  5. }   

由于 Flexbox 還是比較新的屬性，那么添加上相關(guān)的瀏覽器前綴的話，會讓它擁有更廣泛的兼容性。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .parent {   
  2.     @include center-children;   
  3. }  

正如你料想的那樣，就這么簡單我們就實現(xiàn)了：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .parent {   
  2.     display: flex;   
  3.     justify-content: center;   
  4.     align-items: center;   
  5. }  

總結(jié)

我們就想要一個簡短的 mixin 讓元素在父容器中居中，我們做到了，而且做的更好。它不僅僅簡單易用無副作用，而且提供了良好的開發(fā)接口。

相關(guān)文章

最新評論