手機用華為 推廣找展為

推廣有品質 網站有氣質

13933871212

首頁 > 博客教程 > 外貿網站建設知識 >

外貿網站建設之CSS技巧

 發布日期:2020-12-12 瀏覽:842次
外貿網站建設之CSS技巧代碼庫中的某些類組合在一起并共享相同的樣式,例如:
 
src/scss/objects/_box.scss
.o-box--spacing-disable-left,
.o-box--spacing-horizontal {
    padding-left: 0;
}
復制
由于過濾器僅接受一個類,因此無法說明一個樣式聲明塊可能用于多個類的可能性。
 
為了解決這個問題,我們將擴展filter()混合,以便除了單個類之外,它還可以接受包含許多類的Sass arglist。像這樣:
 
src/scss/objects/_box.scss
@include filter('o-box--spacing-disable-left', 'o-box--spacing-horizontal') {
    .o-box--spacing-disable-left,
    .o-box--spacing-horizontal {
        padding-left: 0;
    }
}
復制
因此,我們需要告訴filter()mixin,如果這些類中的任何一個在$global-filter,您都可以編譯這些類。
 
這將涉及其他邏輯來鍵入檢查mixin的$class參數的類型,如果傳遞了arglist以檢查每個項是否在$global-filter變量中,則會循環執行。
 
src/scss/tools/_filter.scss
@mixin filter($class...) {
    @if(type-of($class) == 'arglist') {
        @each $item in $class {
            @if(index($global-filter, $item)) {
                @content;
            }
        }
    }
    @else if(index($global-filter, $class)) {
        @content;
    }
}
復制
然后,只需返回以下部分即可正確應用filter()mixin:
 
objects/_box.scss
objects/_layout.scss
utilities/_alignments.scss
此時,返回$imports并僅啟用擴展器組件。在已編譯的樣式表中,除了通用層和元素層的樣式外,您應該只看到以下內容:
 
屬于擴展器組件的塊和元素類,但不屬于其修飾符。
屬于擴展器依賴項的塊和元素類。
屬于擴展程序依賴項的所有修飾符類都在$dependencies變量中明確聲明。
從理論上講,如果您決定要在已編譯的樣式表中包括更多類,例如expander components修飾符,則只需$global-filter在聲明時將其添加到變量中,或在代碼庫的其他位置附加它(只要在聲明修飾符本身的位置之前)。
 
啟用一切
因此,我們現在有了一個非常完整的系統,該系統使您可以將對象,組件和實用程序導入這些部分中的各個類。
 
在開發過程中,無論出于何種原因,您可能只想一次啟用所有功能。為此,我們將創建一個名為的新變量$enable-all-classes,然后添加一些其他邏輯,因此,如果將其設置為true,則無論$importsand$global-filter變量的狀態如何,所有內容都會被編譯。
 
首先,在主清單文件中聲明變量:
 
src/scss/main.scss
$enable-all-classes: false;
 
@import 'settings/core';
@import 'tools/core';
@import 'generic/core';
@import 'elements/core';
@import 'objects/core';
@import 'components/core';
@import 'utilities/core';
復制
然后,我們只需要對我們的filter()和render()mixins進行一些小的編輯,以在$enable-all-classes變量設置為true時添加一些替代邏輯。
 
首先,filter()mixin。在進行任何現有檢查之前,我們將添加一條@if語句以查看是否$enable-all-classes設置為true,如果是,則渲染@content,不問任何問題。
 
src/scss/tools/_filter.scss
@mixin filter($class...) {
    @if($enable-all-classes) {
        @content;
    }
    @else if(type-of($class) == 'arglist') {
        @each $item in $class {
            @if(index($global-filter, $item)) {
                @content;
            }
        }
    }
    @else if(index($global-filter, $class)) {
        @content;
    }
}
復制
接下來在render()mixin中,我們只需要檢查$enable-all-classes變量是否為真,如果是,則跳過任何進一步的檢查。
 
src/scss/tools/_render.scss
$layer: null !default;
@mixin render($name) {
    @if($enable-all-classes or index(map-get($imports, $layer), $name)) {
        @content;
    }
}
復制
因此,現在,如果將$enable-all-classes變量設置為true并重建,則將編譯每個可選類,從而在此過程中節省了大量時間。
 
比較
要查看此技術給我們帶來了哪些類型的收益,讓我們進行一些比較,看看文件大小的差異是什么。
 
為了確保比較是公平的,我們應該在中添加box和container對象$imports,然后將box的o-box--spacing-regular修飾符添加到中$global-filter,如下所示:
 
src/scss/settings/_imports.scss
$imports: (
     object: (
        'box',
        'container'
        // 'layout'
     ),
     component: (
        // 'button',
        'expander'
        // 'typography'
     ),
     utility: (
        // 'alignments',
        // 'widths'
     )
);
 
$global-filter: (
    'o-box--spacing-regular'
);
復制
這可以確保正在編譯擴展器的父元素的樣式,就像沒有進行過濾時一樣。
 
原始樣式表與已過濾樣式表
讓我們將原始樣式表與所有已編譯的類進行比較,將其與僅編譯擴展器組件所需的CSS的過濾樣式表進行比較。
 
標準
樣式表 大?。╧b) 大?。╣zip)
原版的 54.6kb 6.98kb
已過濾 15.34kb(縮小72%) 4.91kb(縮小29%)
原文: https : //網站制作devluke.github.io/handlingunusedcss/dist/index2.html
已過濾: https : //網站制作devluke.github.io/handlingunusedcss/dist/index.html
您可能會認為節省gzip百分比意味著這是不值得的,因為原始樣式表和過濾后的樣式表之間沒有太大差異。
 
值得強調的是,gzip壓縮在更大和更重復的文件中效果更好。因為過濾的樣式表是唯一的概念證明,并且只包含擴展器組件的CSS,所以壓縮的壓縮程度不如實際項目中的壓縮程度。
 
如果我們將每個樣式表的大小放大10倍,以達到網站CSS包大小的典型大小,則gzip文件大小的差異會更加令人印象深刻。
 
10倍尺寸
樣式表 大?。╧b) 大?。╣zip)
原始(10x) 892.07kb 75.70kb
已過濾(10倍) 209.45kb(小77%) 19.47kb(縮小74%)
篩選的樣式表與UNCSS
這是過濾后的樣式表與已通過UNCSS工具運行的樣式表之間的比較。
 
過濾后的vs UNCSS
樣式表 大?。╧b) 大?。╣zip)
已過濾 15.34kb 4.91kb
聯合國CSS 12.89kb(縮小16%) 4.25kb(縮小13%)
UNCSS工具在這方面略勝一籌,因為它可以過濾通用目錄和元素目錄中的CSS。
 
在實際的網站中,使用大量HTML元素,這兩種方法之間的差異可能會忽略不計。
 
包起來
因此,我們已經了解了如何-僅使用Sass-就能更好地控制要在構建中編譯哪些CSS類。這樣可以減少更終樣式表中未使用的CSS數量,并加快關鍵的渲染路徑。
 
在本文開頭,我列出了現有解決方案(如UNCSS)的一些缺點。以相同的方式批評這種面向Sass的解決方案是公平的,因此在確定哪種方法更適合您之前,所有事實都已擺在桌面上:
 
優點
無需其他依賴項,因此您不必依賴其他人的代碼。
與基于Node.js的替代方案相比,所需的構建時間更少,因為您不必運行無頭的瀏覽器來審核代碼。這對于持續集成特別有用,因為您不太可能看到構建隊列。
與自動化工具相比,文件大小相似。
開箱即用,無論代碼中如何使用這些CSS類,您都可以完全控制要過濾的代碼。使用基于Node.js的替代方案時,通常必須維護一個單獨的白名單,以便不會濾除屬于動態注入HTML的CSS類。
缺點
從某種意義上說,面向Sass的解決方案肯定是更加動手的,因為您必須始終牢記$importsand$global-filter變量。除了初始設置之外,我們研究的Node.js替代方案在很大程度上都是自動化的。
如果您添加CSS類$global-filter,然后再將它們從HTML中刪除,則需要記住要更新變量,否則將編譯不需要的CSS。由于大型項目可以同時由多個開發人員進行,因此除非您進行適當的計劃,否則這可能不容易管理。
我不建議將該系統附加到任何現有的CSS代碼庫上,因為您將不得不花費大量時間將依賴項拼湊在一起并將render()mixin應用于很多類。這是一個無需使用新代碼即可輕松實現的新系統。
希望您發現閱讀起來就像我發現將它們組合起來一樣有趣。如果您有任何建議,想法來改進這種方法,或者想指出一些我已經完全忽略的致命缺陷,請務必在下面的評論中發布。
 

返回列表

相關新聞

CopyRight 2004-2018 JSOON NETWORK , Inc. All Rights Reserved 石家莊網絡公司展為網絡十周年? ?服務熱線:13933871212???冀ICP備14018173號-6? ?
致力于提供石家莊網站制作,石家莊網站建設,石家莊營銷型網站制作,石家莊seo,石家莊網站優化,石家莊網絡廣營銷,石家莊建網站等服務 網站地圖

深圳风采中三个有奖吗 皇冠体育投注官方平台 北京pk10牛牛官方开奖结果 pk10计划人工在线计划 股票行情的图片 美女棋牌app 扑克麻将机 3d之家兰姐五码复式 以太坊计算机 mg冰球突破豪华版 qq河北麻将作弊器 蓝球体彩胜负 网赌北京快乐8真假 足彩新版188比分直播 陕西快乐十分查询助手 微信捕鱼怎么挣钱 重庆时时彩8码一期计划