網站在2023年8月3日已經正式更換伺服器,以提升加載速度。可惜,因為舊伺服器的資料庫語系與新伺服器的資料庫語系版本有一定差異而引起除26隻英文字母外幾乎都變成亂碼,此部份在自動化處理時會出現文字缺失或變成另外一隻字。因此,泓臻只能人手逐字逐句處理,此部份日夜趕工也可能需要花了一至兩個月時間,其間所有服務請於 Telegram 服務櫃檯直接提出,泓臻將努力解答。而亂碼頁面暫時也不用回報,這個情況為全個網站,但你回報的頁面將優先修正,感謝你的閱讀。
ä¸å°ˆæ¥çš„ JetPack CSS å‰ç½®è™•ç†å™¨åœæ¸¬ Jetpack CSS preprocessor Divination
在 WordPress ä¸ï¼ŒJetPack所æä¾›çš„åŠŸèƒ½æœ‰ä¸€é …å«åšã€Œè‡ªè¨‚CSS:強化 CSS è‡ªè¨‚é¢æ¿åŠŸèƒ½ã€ï¼Œèªªæ˜Žæ˜¯ã€Œæ–°å¢ž CSS å‰ç½®è™•ç†å™¨ä½¿ç”¨ã€åœç”¨ä½ˆæ™¯ä¸»é¡Œ CSS 或自訂圖片寬度的é¸é …。ã€è£¡é¢çš„é¸é …䏿œ‰ã€Œç„¡ï¼ˆä¸ä½¿ç”¨ï¼‰ã€ã€ã€Œä½¿ç”¨LESSã€ã€ã€Œä½¿ç”¨SASS(SCSS語法)ã€ä¸‰å€‹é¸é …,é¢å°ä¸æ˜Žæœ—也ä¸ç†Ÿæ‚‰çš„é ˜åŸŸï¼Œå°±ä»¤åˆ°é€™ç¯‡ç´€éŒ„çš„èª•ç”Ÿã€‚
首先到訪 Jetpack 的網é 閱讀他們的說明,以下為節錄的 Apple Safari 英ä¸è¯æœ¬ï¼š
自定義CSS編輯器å…許您自定義主題的外觀,而無需建立å主題或擔心主題更新會覆蓋您的自定義。è¦å•Ÿç”¨æ¤åŠŸèƒ½ï¼Œè«‹è¨ªå•Jetpack → è¨å®š → 在網站儀表æ¿ä¸Šå¯«å…¥ã€‚ å‘下滾動到“主題增強â€éƒ¨åˆ†ï¼Œç„¶å¾Œåˆ‡æ›â€œå¢žå¼·CSSè‡ªå®šç¾©é¢æ¿â€é¸é …。
從WordPress 4.7開始,您ç¾åœ¨å¯ä»¥ç›´æŽ¥å¾žè‡ªå®šç¾©å™¨å°‡è‡ªå®šç¾©CSS新增到自己的主題ä¸ã€‚ 自定義當å‰ä¸»é¡Œæ™‚,åªéœ€é¸æ“‡â€œé™„åŠ CSSâ€é¸é …å¡å³å¯é–‹å§‹ï¼
Jetpack的自定義CSS功能å…許您å‘CSS編輯器新增更多功能⋯⋯
é 處ç†å™¨ï¼šCSS編輯器支æ´CSSé 處ç†å™¨LESSå’ŒSass(SCSS語法)。 å°æ–¼å¸Œæœ›åˆ©ç”¨è®Šæ•¸å’Œmixinsç‰CSS擴充套件的使用者來說,這是一個高階é¸é …。 有關更多資訊,請åƒé–±LESSå’ŒSass網站。
é™„åŠ å…ƒä»¶ï¼šåœ¨æ›´æ”¹ç¶²ç«™è¨è¨ˆæ™‚,é è¨æƒ…æ³ä¸‹ï¼Œæ‚¨å°‡åœ¨ç¾æœ‰ä¸»é¡Œæ¨£å¼è¡¨ä¹‹ä¸Šæ–°å¢žè‡ªå®šç¾©ã€‚ 但是,由於“開始新鮮â€é¸é …,您å¯ä»¥é¸æ“‡å°‡ç¾æœ‰ä¸»é¡Œçš„æ¨£å¼è¡¨æ›¿æ›ç‚ºæ‚¨è‡ªå·±çš„CSS。 å¦‚æžœæ‚¨åªæƒ³å¾žä¸»é¡Œçš„HTMLçµæ§‹é–‹å§‹ï¼Œä¸¦å¾žé 開始釿–°å»ºç«‹å…¶æ‰€æœ‰CSS,則應使用æ¤ç¬¬äºŒå€‹é¸é …。 åƒè€ƒä¸»é¡Œçš„原始樣å¼è¡¨ä»¥ä¾›åƒè€ƒï¼Œä¸¦ç¢ºä¿æ‚¨å·²è€ƒæ…®æ‰€æœ‰è¦å‰‡/樣å¼ã€‚ 如果您缺少æŸäº›å…ƒç´ ï¼Œéƒ¨è½æ ¼çš„公眾視野å¯èƒ½æœƒå‡ºç¾å差。 åªæœ‰ç·¨è¼¯è¦–窗ä¸çš„CSS程å¼å°‡ä½¿ç”¨æ¤é¸é …æ‡‰ç”¨æ–¼æ‚¨çš„éƒ¨è½æ ¼ã€‚
媒體寬度:如果您使用自定義CSS修改了主è¦å…§å®¹å€åŸŸçš„寬度,則應使用æ¤é¸é …。 當將全尺寸影象æ’å…¥åˆ°æ‚¨çš„éƒ¨è½æ ¼ä¸æ™‚,“媒體寬度â€è¨å®šå°‡ç”¨ä½œé è¨å¤§å°ã€‚ 請注æ„ï¼Œæ ¹æ“šæ’å…¥è¨å®šçš„æ–¹å¼ï¼Œå®ƒä¸æœƒå½±éŸ¿æ‚¨åœ¨æ›´æ”¹è¨å®šä¹‹å‰æ–°å¢žçš„æŸäº›å½±è±¡çš„å¤§å°ï¼Œä¸¦ä¸”您å¯èƒ½å¿…é ˆåœ¨æ›´æ”¹è¨å®šå¾Œé‡æ–°æ’入其ä¸ä¸€äº›å½±è±¡ã€‚
Jetpack 支æ´ä¸»é >外觀>自定義CSS
åš´æ ¼ä¾†èªªé€™ä¸æ˜¯èªªçµ¦ç”¨æˆ¶è½çš„ï¼Œå› ç‚ºæˆ‘æƒ³çŸ¥é“的是這兩個å‰ç½®è™•ç†å™¨åˆ°åº•會為我的網站帶來多大的價值。所以我åˆåŽ» Google äº†é€™å…©é …çš„åˆ†åˆ¥ï¼Œä»¥ä¸‹ç‚ºç¶²è·¯çš„è‹±æ–‡è¯æœ¬ç¯€éŒ„:(放心,å¯ä»¥å¿«é€Ÿç•¥éŽçš„內容來的)
SASS å’Œ LESS çš„å€åˆ¥
SASS 與 LESS 都是 CSS 或å‰ç½®è™•ç†å™¨çš„æ“´å±•方案。å‰ç½®è™•ç†å™¨æ˜¯ä¸€ç¨®è…³æœ¬èªžè¨€ç”¨ä¾†æ“´å±• CSS,然後將其編è¯å›žå¸¸è¦ CSS。它們å¯ä»¥èªªæ˜¯ç‚ºæ›´å¥½çš„ç¶è·ã€ä¸»é¡Œå’Œå¯æ“´å±•性而è¨è¨ˆçš„編程語言。SASS 代表Syntactically Awesome Stylesheets (SASS),LESS 代表 Leaner CSS (LESS)。SASS 基於 Ruby,而 LESS 使用 JavaScript。æ¤å¤–,LESS 讓用戶有機會在æŸäº›æƒ…æ³ç™¼ç”Ÿæ™‚激活 mixins。å¦ä¸€æ–¹é¢ï¼ŒSASS æä¾›äº†å¤§å¤šæ•¸ç·¨ç¨‹èªžè¨€éƒ½çŸ¥é“的循環和大å°å¯«å€åˆ¥ã€‚讓我們詳細看看 SAS 與 LESS 之間的å€åˆ¥ã€‚
SASS å’Œ LESS 之間的主è¦å€åˆ¥
å…©è€…éƒ½æ˜¯å¸‚å ´ä¸Šçš„ç†±é–€é¸æ“‡ï¼›è®“我們討論一些主è¦å€åˆ¥ï¼š
- 幫助 CSS3:SASS æä¾›æŒ‡å—é‡ã€‚指å—釿œ‰åŠ©æ–¼æå‰è™•ç†æƒ…æ³ã€‚LESS æä¾›äº†ä¸€äº›æä¾›ç‡ŸéŠ·æ”¯æŒåœ–表的庫,並且與 SASS 相比éžå¸¸å¼·å¤§ã€‚LESS 使得構建å¥å£¯çš„引用資料庫æˆç‚ºå¯èƒ½ï¼Œä¸¦ä¸”å¯ä»¥åœ¨éœ€è¦æ™‚é‡è¤‡ä½¿ç”¨ã€‚這有助於 CSS3 æ›´åŠ ç”¨æˆ¶å‹å¥½ã€‚å‰ç½®è™•ç†å™¨è»Ÿä»¶èˆ‡é€™äº›å¼•ç”¨è³‡æ–™åº«ä¿æŒåŒæ¥ã€‚
- 語言能力:LESS æä¾›äº†å‰µå»ºå—ä¿è·çš„æ··å…¥çš„能力,這些混入僅在滿足æŸäº›æ¢ä»¶æ™‚æ‰èµ·ä½œç”¨ã€‚例如,如果文本的é¡è‰²è¼ƒæ·ºï¼Œè€Œç”¨æˆ¶æƒ³è¦è¼ƒæš—的背景。為æ¤ï¼Œå¦‚果單個 mixin åˆ†ç‚ºå…©éƒ¨åˆ†ï¼Œé‚£éº¼é€™äº›å®ˆè¡›å°‡çœ‹åˆ°åªæœ‰ä¸€å€‹éœ€è¦çš„部分生效。å¦ä¸€æ–¹é¢ï¼ŒSASS èªç‚ºè‡ªç„¶æ¦‚å¿µå’Œç©©å¥æ€§æ›´ç‚ºé‡è¦ï¼Œå› æ¤ä½¿ç”¨æŒ‡å—é‡å¯ä»¥å¯¦ç¾é€™ä¸€é»žã€‚例如,指å—é‡ä¸æœ‰ä¸€å€‹å為背景的 mixin,它å¯ä»¥è®“ä½ å‚³éžä»»ä½•ä½ æƒ³å¾—åˆ°çš„æ±è¥¿ï¼Œå®ƒæœƒåœ¨éœ€è¦æ™‚輸出。
- 變é‡è™•ç†ï¼šè²æ˜Žè®Šé‡å’Œè™•ç†å®ƒå€‘有兩種ä¸åŒçš„定義方å¼ã€‚LESS 使用 @ 而 SASS 使用 $。在 SASS ä¸ï¼Œ$ 沒有任何繼承æ„義,而 LESS çš„ @ 表示應該發生繼承。在 SASS ä¸ï¼Œå¦‚果一個全局變é‡è¢«è¦†è“‹ä¸¦ä¸”全局變é‡å–局部值。
- 處ç†åª’體查詢:媒體查詢å¯ç”¨æ–¼å°‡å¡Šæ·»åŠ åˆ°ä¸»æ¨£å¼è¡¨çš„底部。使用 SASS 或 LESS 時,用戶å¯ä»¥ä½¿ç”¨åµŒå¥—ä¾†çµ„åˆæ¨£å¼ã€‚在這方é¢ï¼Œèˆ‡ LESS 相比,SASS æä¾›äº†æ›´å¥½çš„æ•ˆæžœã€‚
比較的基礎 | SASS | LESS |
---|---|---|
基本å€åˆ¥ | SASS 是一個 CSS å‰ç½®è™•ç†å™¨ï¼Œæœ‰åŠ©æ–¼æ¸›å°‘ CSS ä¸çš„é‡è¤‡ä¸¦æœ€çµ‚ç¯€çœæ™‚間。它是 CSS çš„æ“´å±•ï¼Œæœ‰åŠ©æ–¼ç¯€çœæ™‚間。它æä¾›äº†ä¸€äº›å¯ç”¨æ–¼å‰µå»ºæ¨£å¼è¡¨ä¸¦å¹«åŠ©ç¶è·ä»£ç¢¼çš„功能。它被èªç‚ºæ˜¯ CSS 的超集,用 Ruby 編碼。 | LESS 也是一個 CSS é 處ç†å™¨ï¼Œå®ƒä½¿ç”¨æˆ¶èƒ½å¤ 自定義ã€ç¶è·ã€ç®¡ç†å’Œé‡ç”¨ç¶²ç«™çš„æ¨£å¼è¡¨ã€‚LESS 是一種動態語言,å¯ä»¥åœ¨ä¸åŒçš„ç€è¦½å™¨ä¸Šä½¿ç”¨ã€‚LESS 是用 JavaScript ç·¨å¯«çš„ï¼Œç·¨è¯æ•¸æ“šéžå¸¸å¿«ã€‚å®ƒé‚„æœ‰åŠ©æ–¼ä¿æŒä»£ç¢¼æ¨¡å¡ŠåŒ–,使其å¯è®€ä¸”易於更改。 |
特徵 | 以下是 SASS 的特點:它穩定ã€å¼·å¤§ä¸¦ä¸”與其他版本的 CSS 兼容。它是 CSS 的超集,用 JavaScript 編寫。它有自己的語法,並且å¯ä»¥ç·¨è¯ç‚ºå¯è®€çš„ CSS。它是開æºçš„。 | 以下是LESS的特點:å¯ä»¥ä»¥æ›´ä¹¾æ·¨å’Œæœ‰æ¢ç†çš„æ–¹å¼ç·¨å¯«ä»£ç¢¼ã€‚å¯ä»¥æ ¹æ“šéœ€è¦å®šç¾©æ–°æ¨£å¼ï¼Œä¸¦ä¸”å¯ä»¥éš¨æ™‚é‡è¤‡ä½¿ç”¨ã€‚它是在 JavaScript 上開發的,是 CSS çš„è¶…é›†ã€‚å®ƒæ˜¯ä¸€ç¨®æ•æ·å·¥å…·ï¼Œæœ‰åŠ©æ–¼æ¸›å°‘å†—é¤˜ |
錯誤 | SASS å…·æœ‰å ±å‘Šèªžæ³•éŒ¯èª¤çš„èƒ½åŠ›ã€‚ | LESS 在所有測試ä¸éƒ½æœ‰æ›´æº–確的錯誤消æ¯ï¼Œå®ƒé‚„解釋了發生錯誤的æ£ç¢ºä½ç½®ã€‚ |
功能 | SASS ä½¿æ‚¨èƒ½å¤ å‰µå»ºè‡ªå·±çš„å‡½æ•¸ä¸¦å°‡å®ƒå€‘èˆ‡ç”¨æˆ¶æƒ³è¦çš„上下文一起使用。å¯ä»¥ä½¿ç”¨å‡½æ•¸åå’Œä»»ä½•åƒæ•¸èª¿ç”¨å‡½æ•¸ã€‚åƒ mixin 一樣,函數也å¯ä»¥å…¨å±€è¨ªå•,也å¯ä»¥æŽ¥å—ä¸åŒçš„åƒæ•¸ã€‚å¯ä»¥ä½¿ç”¨@return 返回值。 | LESS 使用 JavaScript 來處ç†å€¼ã€‚它還使用é 定義的函數來æ“作 HTML å…ƒç´ ï¼Œä¸¦å°æ¨£å¼è¡¨çš„ä¸åŒæ–¹é¢é€²è¡Œæ›´æ”¹ã€‚它還具有更改é¡è‰²çš„功能,如圓形功能ã€åœ°æ¿åŠŸèƒ½ã€å¤©èбæ¿åŠŸèƒ½å’Œç™¾åˆ†æ¯”åŠŸèƒ½ã€‚ |
æ··åˆ | Mixins 有助於創建å¯ä»¥åœ¨æ¨£å¼è¡¨ä¸çš„任何地方使用和é‡ç”¨çš„æ¨£å¼ï¼Œè€Œç„¡éœ€é‡æ–°å‰µå»ºéžèªžç¾©é¡žã€‚在 SASS ä¸ï¼Œmixin å¯ä»¥å˜å„²ä¸åŒçš„å€¼æˆ–åƒæ•¸ä¸¦èª¿ç”¨è©²å‡½æ•¸ã€‚Mixin 還支æŒä½¿ç”¨ä¸‹åŠƒç·šå’Œé€£å—符。定義一個 Mixin:@mixin 指令用於定義 mixin包å«ä¸€å€‹ Mixin:@include 用於在文檔ä¸åŒ…å« mixin論據:SASS è…³æœ¬å€¼è¢«ç•¶ä½œåƒæ•¸ä¸¦ä¸”在其ä¸å¯ç”¨ã€‚傳éžä¸€å€‹å¡Šï¼šæ¨£å¼å¡Šå¯ä»¥å‚³éžçµ¦mixin | 在 LESS ä¸ä¹Ÿä½¿ç”¨ Mixin。在 LESS ä¸ï¼Œmixin å¯ä»¥åµŒå¥—。它還å¯ä»¥æŽ¥å—åƒæ•¸ä¸¦è¿”回ä¸åŒçš„值。mixin 的範åœå–決於調用者的範åœä¸¦ä¸”是å¯è¦‹çš„。Mixin 返回值:Mixin 也å¯ä»¥åƒå‡½æ•¸ä¸€æ¨£å®šç¾©è®Šé‡å’Œè¿”回值。å¦ä¸€å€‹ Mixin ä¸çš„ Mixin:一個 mixin å¯ä»¥åœ¨å¦ä¸€å€‹ mixin ä¸ä½¿ç”¨ï¼Œä¹Ÿå¯ä»¥ç”¨æ–¼è¿”回值。 |
文檔 | SASS 的文檔更å´é‡æ–¼çŸ¥è˜åº«å’Œè¨ç½®ã€‚它沒有æä¾›æ›´å¤šçš„視覺效果。 | LESS 文檔具有å¸å¼•人的視覺效果。它還具有易於éµå¾ªçš„æ¥é©Ÿã€‚ |
這兩種å‰ç½®è™•ç†å™¨åœ¨ç¶²é è¨è¨ˆå¸«ä¸éƒ½å¾ˆæµè¡Œã€‚SASS 用戶å¯ä»¥è¼•鬆鏿“‡ä»–們的語法,開發人員å¯ä»¥æ±ºå®šä½•時é 離 CSS è¦å‰‡ã€‚å¦ä¸€æ–¹é¢ï¼ŒLESS 在æŸäº›æƒ…æ³ä¸‹ç”¨æˆ¶å¯ä»¥æ¿€æ´» mixins 的功能方é¢å…·æœ‰å„ªå‹¢ã€‚SASS é‚„æä¾›äº†ç¨‹åºå“¡çŸ¥é“çš„å¾ªç’°å’Œæ¡ˆä¾‹ã€‚å› æ¤ï¼Œé€™å®Œå…¨å–決於開發人員和他們喜æ¡å“ªç¨®èªžè¨€çš„é …ç›®è¦æ±‚。這兩種語言都有其優點和缺點。最後,é¸â€‹â€‹æ“‡çš„一個æä¾›äº†å…¶ä¸é–‹ç™¼çš„æœ€ä½³åŠŸèƒ½ã€‚
好了,我找到最有用的比較說明就是以上這些了,有看明白嗎?è€å¯¦èªªï¼Œæˆ‘完全看ä¸åˆ°å…©è€…的分別。有時候會æžä¸æ¸…楚 Automattic 到底是想讓事情變得簡單,還是網絡編程專æ¥å‘é€™éƒ¨ä»½ã€‚åæ£éƒ½çœ‹ä¸æ˜Žç™½å°±äº†ç›´æŽ¥ä¾†å§ï½ž
æå•:在這三個方案ä¸ï¼Œå“ªä¸€å€‹æœƒç‚ºæˆ‘的網站帶來最大的效益?
- 「ä¸ä½¿ç”¨å‰ç½®è™•ç†å™¨ã€ï¼šá›ã€áš…ã€å¯¶åŠçš‡åŽæ£ä½ï¼Œé€™å€‹çµ„åˆå¯æ˜¯å¾Œå‹å¾ˆå¤§çš„一組,說明了如果ä¸ä½¿ç”¨çš„話,接下來也會為用上其他接近的æœå‹™ï¼Œæ‰€ä»¥å³ä½¿ç¾åœ¨é¸æ“‡ä¸ä½¿ç”¨ï¼Œä¹Ÿæ˜¯å¯ä»¥çš„ï¼Œåªæ˜¯å•題會無法解決。(其實å¯ä»¥ç›´æŽ¥ä¸€é»žä¸ç”¨é‚£éº¼è¿‚迴地解說咧~)
- 「使用 LESS å‰ç½®è™•ç†å™¨ã€áš«ã€ášŒã€å¯©åˆ¤æ£ä½ï¼Œé€™æ‡‰è©²æ˜¯æ£è§£äº†ï¼ï¼ï¼ï¼ï¼å…¨éƒ½æŒ‡å‘了會變好耶ï¼ï¼ï¼ï¼ï¼
- 「使用 SASS å‰ç½®è™•ç†å™¨ã€ášºã€áš”ã€åœ‹çދ逆ä½ï¼Œé€™å€‹æœ‰é𱿆‚耶,抽出了Hagalaz我覺得還好,但紫æ‰åœ¨ç§‘æŠ€ä¸æˆ‘抽éŽéƒ½æ˜¯ä¸å¥½çš„使用體驗,而且國王逆ä½ä¹Ÿå¾ˆæœ‰å£“åŠ›ï¼Œé‚£ç”æ¡ˆå°±å‡ºç¾äº†å–”ï¼
åœ¨ä½ çœ‹åˆ°é€™ä¸€ç¯‡å»¢æ–‡çš„æ™‚å€™ï¼Œå…¶å¯¦ç¶²ç«™å·²ç¶“åœ¨ç”¨ LESS 作為å‰ç½®è™•ç†å™¨ç‚ºç¶²ç«™æä¾›æœå‹™äº†ï¼Œåœ¨æ³“è‡»çœ‹ä¾†é€™æ˜¯ä¸€å€‹æœ‰ç”¨çš„æ–¹æ¡ˆï¼Œå› ç‚ºä¹‹å‰ä¸€äº›åšä¸å‡ºä¾†çš„æ•ˆæžœä¸çŸ¥æ€Žéº¼çš„在啟用 LESS 後çªç„¶è®Šå¾—èƒ½ç”¨äº†ï¼Œä¹Ÿå¸Œæœ›ç¶²ç«™çš„ä½¿ç”¨è€…å€‘æ²’æœ‰å› ç‚ºå•Ÿç”¨äº† LESS å‰ç½®è™•ç†å™¨æ–¹æ¡ˆè€Œä»¤ç€è¦½é«”驗變差,有的話請您留言告訴泓臻,讓我知é“事情的細節並進一æ¥å„ªåŒ–,è¬è¬ã€‚