Tag: CSS

CSS預處理器是網頁開發中佔了一個重要的角色(尤其是對於大型專案) CSS預處理的功能可以讓你更好的管理和編寫程式碼。當然，你還是可以選擇不用任何預處理器工具來完成一個網站，但是學習使用預處理器來編寫CSS以後絕對不會後悔! 一、CSS預處理器的基礎 1. 介紹CSS預處理器的概念 CSS預處理器是一種工具或軟體，它們在原始CSS之上提供更多功能和便捷性。通過使用CSS預處理器，開發者可以輕鬆定義變數、函數等功能(這些功能在標準CSS中是無法使用的)預處理器將這些功能轉換為標準CSS，提供給不同的瀏覽器讀取和渲染。 2. 為何CSS預處理器在網頁開發中很重要? CSS預處理器之所以變得如此重要，是因為它們解決了許多標準CSS的不足之處，並擁有以下優勢： (1) 程式碼更好閱讀： 預處理器允許開發者使用變數和嵌套規則，結構化了CSS程式碼讓文件更容易閱讀。結構化的寫法有效的減少程式碼，並提高了維護性。 (2) 程式碼可以重複使用： 通過mixin和函數，開發者可以輕鬆的重複使用已經定義好的程式碼。 (3) 提高工作效率： 因為使用簡化和縮寫的語法，減少了重複編寫CSS的過程讓工作更有效率。 (4) 支持跨瀏覽器： 預處理器產生的標準CSS程式碼可以在不同瀏覽器上保持一致性，一次解決了令人頭痛的跨瀏覽器兼容性問題。 3.常見的CSS預處理器: 常見的CSS預處理器包含 : Sass、Less、Stylus、Scss等。其中，在市場上最為人所知的是Sass和Scss。他們其實就像雙胞胎一樣，本質上的概念和用法相似，都使用了巢狀結構改善傳統樣式表可讀性低落的問題。 (1) Sass和Scss差異 Scss : 基於Sass衍生出來的分支，Scss更貼近標準CSS的寫法，運用了大括號與小括號。也由於寫法與標準CSS差異較小，因此更容易上手和理解，是目前最多人使用的預處理器之一。 Sass : 語法上承襲了 Ruby，是用的方式撰寫，省略了大括號和分號，比起Scss更加的簡潔。 (2) 選擇哪一款預處理器更好? 兩者其實沒有好壞之分，完全依照每個人的順手程度和喜好而定。我最初是先學Sass，後來因為配合工作團隊習慣，改用Scss。事實上Scss因為和原生CSS長的很像，所以對我來說使用起來也更直覺。另外據我觀察，網路上最常使用這種寫法討論或解答，這樣當你初學遇到問題的時候才能更容易理解怎麼運作，也算是Scss另一項優點了吧。以上就提供給大家參考囉! 二、CSS預處理器的特性 1. 變數（Variables）： 使用預處理器以後，我們開始能夠定義變數，在整個CSS文件中重複使用特定的值。例如定義顏色、字體大小、間距等等，有效的提高了程式碼的可讀性和可維護性。 scss $primary-color: #007bff; $font-size: 16px; .button { background-color: $primary-color; font-size: $font-size; } 2. 嵌套規則（Nested Rules）： 比起原型的CSS容易使用冗長的選擇器，Scss/Sass可以使用嵌套，讓程式碼更具結構性和層次感，也讓使程式碼更容易閱讀了! scss .container { padding: 10px; .header { font-size: ...