CSS自定義屬性+CSS Grid網格實現超級的佈局能力
最近我還注意到的一件事就是CSS自定義屬性。CSS自定義屬性的工作方式有點像SASS和其他前處理器中的變數,主要的區別在於其它方法都是在瀏覽器中編譯後生成,還是原本的CSS寫法。CSS自定義屬性是真正的動態變數,可以在樣式表中或使用javascript即時更新,這使得它們具有更多的可能性。如果你熟悉JavaScript,我喜歡把前處理器變數和CSS自定義屬性之間的區別想象成與const和let之間的區別相似——它們都有不同的用途。
CSS自定義屬性可以方便的實現很多功能(例如主題變化)。最近我一直在嘗試利用CSS自定義屬性和CSS網格的組合能實現什麼神奇的效果,我需要在不同的斷點處重新定義grid-template-rows和grid-template-columns屬性。下面的程式碼中有一個例子,我使用SASS變數定義了頁面在不同的寬度下不同的列寬值,這些值將傳遞到grid-template-rows屬性中。我對grid-gap屬性也做了同樣的操作,這樣頁面寬度不同時元素之間的間距也是不同的:
$wrapper: 1200px; $col: 1fr; $gutter: 20px; $wrapper-l: 90%; $col-l: calc((1000px - (13 * 40px)) / 12); $gutter-l: 40px; $col-xl: calc((1200px - (13 * 50px)) / 12); $gutter-xl: 50px; body { background-color: lighten(grey, 30%); } .wrapper { max-width: $wrapper; margin: 20px auto; @media (min-width: 1300px) { max-width: $wrapper-l; } } .grid { display: grid; padding: $gutter; grid-template-columns: 1fr repeat(12, $col) 1fr; grid-template-rows: repeat(2, minmax(150px, auto)); grid-gap: $gutter; border: 1px solid grey; background: white; width: auto; @media (min-width: 1300px) { grid-template-columns: 1fr repeat(12, $col-l) 1fr; grid-gap: $gutter-l; padding: $col-l; } @media (min-width: 1500px) { grid-template-columns: 1fr repeat(12, $col-xl) 1fr; grid-gap: $gutter-xl; padding: $col-xl; } } .grid__item { border: 1px solid blue; } .grid__item--heading { grid-column: 2 / 11; }
就如你所看到的,基本上必須在媒體查詢中再次寫出整個程式碼塊來改變樣式,因為變數一旦定義就固定了。(我當然可以使用mixin,但是最終效果是一樣的——一大塊程式碼。)
使用CSS自定義屬性,可以減少程式碼量,因為我只需更新媒體查詢中的變數,瀏覽器就會重新計算網格。十行(sass)程式碼可能看起來不是一個巨大的節省,但程式碼的可讀性要高得多,因為不必在好幾個地方新增媒體查詢來處理我們的新變數,我只需在該元件的程式碼開頭宣告它們,並且無需擔心是否已替換了正在使用的哪個值:
:root { --wrapper: 1200px; --col: 1fr; --gutter: 20px; @media (min-width: 1300px) { --wrapper: 90%; --col: calc((1000px - (13 * 40px)) / 12); --gutter: 40px; } @media (min-width: 1500px) { --wrapper: 90%; --col: calc((1200px - (13 * 50px)) / 12); --gutter: 50px; } } body { background-color: lighten(grey, 30%); } .wrapper { max-width: var(--wrapper); margin: 20px auto; } .grid { display: grid; padding: var(--gutter); grid-template-columns: 1fr repeat(12, var(--col)) 1fr; grid-template-rows: repeat(2, minmax(150px, auto)); grid-gap: var(--gutter); border: 1px solid grey; background: white; width: auto; } .grid__item { border: 1px solid blue; } .grid__item--heading { grid-column: 2 / 11; } .grid__item--body { grid-column: 2 / 8; grid-row: 2 / span 1; } .grid__item--media { background: hotPink; grid-column: 11 / 14; grid-row: 1 / span 2; }
我發現使用CSS Grid的一個特點是,語法非常冗長,而且並不容易快速、輕鬆地看到正在發生的事情,特別是在複雜的網格中。但是在這個例子中,使用CSS自定義屬性,可以為網格項的大小和座標設定變數,並且只寫一次grid-column和grid-row屬性。對我來說,這比每次都寫出完整的屬性要清楚得多,而且很容易一目瞭然地看到網格項的位置。
為了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成為前端工程師,乃至全棧工程師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習扣qun:784783012 歡迎大家進群。交流討論,學習交流,共同進步。
當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有效資源還是很有必要的。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2651973/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 前端開發入門到實戰:CSS自定義屬性+CSS Grid網格實現超級的佈局能力前端CSS
- CSS Grid 網格佈局CSS
- CSS Grid 網格佈局教程CSS
- CSS Grid 網格佈局實現自適應9宮格CSS
- 翻譯 | CSS網格(CSS Grid)佈局入門CSS
- CSS Grid 網格佈局邊框設定CSS
- CSS Grid實現聖盃佈局CSS
- CSS網格佈局CSS
- 【圖片版】CSS網格佈局(Grid)完全教程CSS
- css網格佈局的最佳實踐CSS
- CSS 自定義屬性指北CSS
- css grid佈局CSS
- CSS Grid 佈局CSS
- CSS Flex佈局屬性整理CSSFlex
- 初識css自定義屬性CSS
- CSS 自定義屬性(變數)CSS變數
- CSS自定義屬性Expression(轉)CSSExpress
- CSS Grid佈局指南CSS
- CSS變數(自定義屬性)實踐指南CSS變數
- 【譯】CSS 自定義屬性的策略指南CSS
- CSS實現的網頁柵格佈局簡單介紹CSS網頁
- 使用 CSS Grid 構建複雜佈局超實用的技巧!CSS
- 使用 CSS 自定義屬性(變數)CSS變數
- CSS grid屬性的使用CSS
- 【CSS】Grid 佈局總結CSS
- CSS:玩轉grid佈局CSS
- grid網格佈局
- CSS display屬性的表格佈局相關屬性的解釋CSS
- [譯] 使用 CSS 網格佈局實現響應式圖片CSS
- CSS 中的 Grid 佈局 完全指南CSS
- css自定義屬性和聚光燈效果CSS
- CSS grid佈局好文推薦CSS
- 非佈局樣式-裝飾性屬性&CSS hackCSS
- CSS-彈性佈局3-伸縮屬性CSS
- 一些超級好用的CSS 屬性CSS
- 如何使用Flexbox和CSS Grid,實現高效佈局FlexCSS
- 如何使用 Flexbox 和 CSS Grid,實現高效佈局FlexCSS
- CSS Flex 佈局的 flex-direction 屬性講解CSSFlex