国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何深入使用scss開發一個簡單頁面

Rocko / 1772人閱讀

摘要:本文將從常規開發的角度,深入使用一些的語法。一步一步開始吧第一步有圖有真相首先從設計姐姐拿到一個標記過的文件。問題移動兼容性如果使用單位,在不同的手機上會出現圖標位置錯位。注意這里推薦使用,而不是進行縮放。方法二中使用百分比單位。

本文將從常規開發的角度,深入使用一些scss的語法。一步一步開始吧~~

第一步 :有圖有真相

首先從設計姐姐拿到一個標記過的psd文件。(當然平常很常見是沒有這種標記的,我們可以用ps的量尺自己量。)這里給大家推薦個工具:Avocode 自動標記(試用15天 之后收費)

此時會發現有大量的顏色間距字號圓角等是重復使用的,容易更改的。我們可以選擇使用scss的變量語法。將這些重復出現的東西抽離出來。
具體應用如下(注意命名要直觀,易懂喲~):
// font相關
//-----------------------------------------------------    
$fontSize:                       .28rem !default; 
$fontLine:                       .36rem; 
$fontLineHeight:                 1.5 !default;
$fontFamily:                     -apple-system, BlinkMacSystemFont, "Seogoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif !default;
// 蘋方, 冬青黑體,微軟雅黑UI(win8.1+),微軟雅黑,思源黑體(安卓)
$fontCn:                          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN" sans-serif !default; 
// 前兩個為safari chrome, ios4.0+, ios4.0-, Android 4.0+, Android 4.0-, windows&windows Phone,
$fontEn:                         -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, "Droid Sans", "Seogoe UI", Arial !default; 


// 背景色,文本色,邊框色
//-----------------------------------------------------    
$colorText:                      #333 !default;
$colorBg:                        #ffec6b !default;
$colorBorder:                    #333 !default;
$colorOverlay:                   rgba(0,0,0,.7) !default; // 遮罩層顏色
$titleBg:                        #fffad7 !default;
$titleText:                      #f9d365 !default;

$yellow:                         #ffe73d !default;
$red:                            #ff6f6f !default;
$white:                          #fff !default;
$gray:                           #ffffd !default;
// 元素上下間距
//-----------------------------------------------------    
$gap:                             .1rem !default;


// radius
//-----------------------------------------------------    
$radiusBase:                      .05rem !default;
$radiusSmall:                     .03rem !default;

// z-index
//-----------------------------------------------------    
$zIndexHeader:                    1000 !default;
$zIndexFooter:                    2000 !default;
$zIndexPopup:                      3000 !default;                     
$zIndexOverlay:                   4000 !default; // 默認高于header和footer部分

細心的同學可能注意到,我們使用的單位是rem.此處因為是移動頁面 所以采用了rem單位。

第二步 scss精靈圖

整個頁面有很多小圖片,多個小圖請求顯然是不合理的。這個時候我們采用比較通用的方案精靈圖。但是因為我們采用的是rem會出現不同手機錯位現象,下邊會有具體的解決方法。

//mixin
@mixin stitches-sprite($x: 0, $y: 0, $width: 0, $height: 0) {
    background-position: $x $y;
    width: $width;
    height: $height;
};
//使用
.sprite {
      background-image: url("http://n1.c.imoxiu.com/99ce2d4e5f663f272adbb75147b0423f6aa7cca7");
      background-repeat: no-repeat;
      display: block;
 
      &.sprite-__1 {
           @include stitches-sprite(-5px, -5px, 120px, 40px);
      }
};

方法一:

生成精靈圖:在線工具 自動生成坐標(x,y)

抽離出一個mixin ,使用每個小圖時,可以直接傳入寬高,坐標。避免重復書寫該段代碼段。

問題: 移動兼容性

如果使用rem單位,在不同的手機上會出現圖標位置錯位。為什么錯位呢?原理也很簡單,因為不同瀏覽器1rem對應的px是變化的 ,所以使用background-position所得到的位置是不同的,也就產生了錯位。所以這里不推薦使用rem單位,做移動端精靈圖。

使用px單位,不會產生錯位了,但是在圖標大小不隨著手機適配怎么解決呢?這里用了rem的原理。我們知道 其中rem 是與根元素的fontSize有關的。假設fontSize是20px ,那么1rem為20px。我們可以得出公式。

rem*fontSize = px

因此我們就可以算出,當前圖標應該縮放的大小。

注意:這里推薦使用zoom,而不是transform:"scale()",進行縮放。因為transform縮放后的元素實際大小還是縮放前的大小。zoom則實際大小是縮放后大小。

方法二:

background-position中使用百分比單位。

//其中 W/H 是整個雪碧圖的寬高, w/h 是單個 icon 的大小,而 x/y 則是傳統的 px 坐標。
n% *W - n% *w = -x
n% *H - n% *h = -y

方法二參考文獻

另外還有使用gulp進行打包生成精靈圖,后續整理Gulp配置發出。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111890.html

相關文章

  • css模塊化思想初探

    摘要:希望能通過理解的模塊化,窺探出模塊化的意義與思想。本文僅解析模塊化思想與技巧,構建工具與動態樣式語言本身這兩樣是必不可少,篇幅有限就不展開討論了。 前言 前端模塊化是個非常大的話題了,我們可以簡單的分為html模塊化、javascript模塊化、css模塊化;那么我們先從css模塊化開始,css模塊化基礎卻必不可少。希望能通過理解css的模塊化,窺探出模塊化的意義與思想。 提綱 當項目...

    zorro 評論0 收藏0
  • 前端每周清單半年盤點之 CSS 篇

    摘要:前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。它能夠為我們提供類似于預處理器命名空間等多方面的輔助。 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號(ID:f...

    RaoMeng 評論0 收藏0
  • 深入新版BS4源碼 探索flex和工程化sass奧秘

    摘要:這個接受三個參數表示柵格數目默認為默認為表示斷點設置,這是一個全局變量,為類型。 你可能已經聽說了一個大新聞:Bootstrap4 合并了代號為#21389的PR,宣布放棄支持IE9,并默認使用flexbox彈性盒模型。這標志著:1)前端開發全面步入現代瀏覽器的時代進一步來臨;2)樣式處理也再一次面向未來,擁抱更加靈活的彈性盒模型-Flex布局。 這篇文章會帶你深入Bootstrap最...

    evin2016 評論0 收藏0
  • 深入新版BS4源碼 探索flex和工程化sass奧秘

    摘要:這個接受三個參數表示柵格數目默認為默認為表示斷點設置,這是一個全局變量,為類型。 你可能已經聽說了一個大新聞:Bootstrap4 合并了代號為#21389的PR,宣布放棄支持IE9,并默認使用flexbox彈性盒模型。這標志著:1)前端開發全面步入現代瀏覽器的時代進一步來臨;2)樣式處理也再一次面向未來,擁抱更加靈活的彈性盒模型-Flex布局。 這篇文章會帶你深入Bootstrap最...

    silencezwm 評論0 收藏0

發表評論

0條評論

Rocko

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<