您知道SASS嗎?

  • 2020 年 3 月 27 日
  • 筆記

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

原文出處:https://blog.bitsrc.io/4-reasons-to-use-sass-in-your-frontend-project-bce88631c602

 

 

SASS是一種預處理器及樣式表語言,由它們自己的工具或模塊捆綁器(如webpack)編譯成CSS。它有幾個可以用來使CSS整潔和可重用的功能,例如變量,嵌套規則,mixin,函數等。

雖然如此,但以上的解釋應該不足以向你說清楚SASS是什麼,所以下面我將用一些內容來為你解釋SASS是什麼?它能做什麼?

SASS使嵌套/分組CSS選擇器和構建樣式表變得更加容易

Sass通過在其中嵌套CSS類或選擇器並在後台生成CSS使其成為可能。特別是當您遵循BEM體系架構 時特別有用,因為Sass與它的體系結構非常兼容,因此他們在文檔中經常提到它。

它是一種更優雅、更酷的UI設計方式。使用Sass構建CSS也更加容易。如果你是一名網頁設計師或經驗豐富的前端網頁開發人員,你可能會非常喜歡它,因為使用它會讓你的工作效率直線上升。

Sass還使CSS代碼更整潔,因為Sass會自動為您對CSS代碼進行分組,並且也同樣包含了代碼嵌套。
以下這兩個功能將幫助您更好地構建CSS:

您可以使用&符號連接CSS選擇器

如果您使用的是BEM體系結構,請使用純CSS進行編碼:

遵循BEM(Block Element Modifier)架構的CSS代碼

 

您可能已經注意到.button 這個類名,多次輸入名為button的類名,可能會造成額外的精力浪費,而不是專註於.button有效地對類進行分組和樣式設置。我發現做這件事既麻煩又乏味,特別是當我需要在重複命名CSS類或寫選擇器的時候。

現在如果你用sass來做這件事,它看起來是這樣的:

 

 

上面的示例展示了SASS如何通過使用()將CSS選擇器串聯在({})中來嵌套幾個選擇器。如果您使用的是BEM體系結構,那麼您就節省了一些需要重複輸入CSS類和選擇器來遵循該體系結構時間,因為SASS在後台已經幫您生成了完整的CSS了。

比較SASS和CSS這兩種語法,它們的代碼如下所示:

 

 左: SASS  右:從SASS編譯出的CSS

 

您可以使用SASS對父子選擇器進行分組

Sass的另一個優點是,它還可以幫助您通過幾行代碼將選擇器/類中的父子關係分組,就像您進行選擇器連接的方式一樣,只是添加了一個與號(&),您只需多加幾個括號就能完成。

在純CSS中,父子關係如下所示:

 

 

Sass是這樣處理的:

 

 

並排比較,您可以看到這兩者有很大區別:

 

就像選擇符連接一樣,使用Sass通過將CSS父子關係分組到括號中,自動為您生成CSS的嵌套父子關係。而且顯然寫出的代碼更清爽、簡潔。

它可以提高您的工作效率

曾經我對使用Sass持懷疑態度,因為我認為學習CSS的一個子集簡直是浪費時間,更不用說我過去經常忽略CSS中引入的最新特性,比如Flexbox。但是,當我第一次嘗試學習Sass時,我發現我的開發效率提高了,我在開發/設計我的組件時變得毫不費力! 我“遇到”它的時間還是太晚了。
對選擇器分組並創建嵌套選擇器時簡直輕而易舉,因為Sass自動的幫我們完成了大量的工作。我可以毫不誇張的說我比使用純CSS設置樣式快了2倍。總體的感覺就是“真香”。

您可以使用Mixins將CSS代碼段重用到其他選擇器

您不僅可以輕鬆地用更少的代碼嵌套CSS選擇器,而且可以重用一些代碼片段來解決整個UI中的某些CSS問題。

Mixins可以幫助您做到這一點。這樣,您可以避免在HTML元素中過多使用非語義的類。

舉個例子,您在將UI居中對齊時遇到了問題,而且您不想在每個CSS選擇器中都寫一遍一模一樣的代碼。在這種情況下,您可以使用Mixins來解決問題。

下面通過一個示例來展示它的用法吧

 

在左側,我們有mixin absCenter,使用@include將它包含在.sidebar選擇器中。生成的CSS中就會自動包括mixin的代碼段了。

SASS會立即把mixin標識的部分識別為可重用的代碼,並將其注入到聲明需要引用它們的選擇器/類中。

您可以使用Function指令定義複雜操作

您不僅可以通過使用Mixin重用代碼,還可以為複雜的計算定義自己的函數!函數使您可以靈活地執行以下操作。

如果您有一些複雜的CSS,您可能想要自動化並減少冗餘,您可以利用自定義函數的強大功能來實現這一點。

讓我們繼續為您演示一下:

 

結論

作為相對資深的前端開發者,我覺得如果您還沒有用過Sass,那麼建議您快用起來,因為它可能是您工作流程中的重要補充。如果您希望開始學習,可以通過該文檔來開始學習。