CSS 預處理器SASS、LESS 介紹 - 歐斯瑞

什麼是CSS 預處理器（CSS preprocessor）？ · SASS（SCSS） · LESS · Stylus · Turbine · Switch CSS · CSS Cacheer · DT CSS ... RecentPosts Magento2促銷功能小技巧–簡化多SKU輸入步驟 Magento2商業版實用功能教學–禮物登記表GiftRegistries 前端開發：使用@supports來檢查瀏覽器支援性 前端開發：解決sliderjs垂直滑動時出現的高度問題 Magento2開發–設置排程群組 文章分類 Shopify Magento Magento2開源版 Magento2商業版 電子商務 Zendesk Mailchimp Akeneo PIM Oracle 網站技術與設計 Adobe教學 前端開發 後端開發 網站測試 Wordpress 行銷與實用好文 最新動向 文章彙整文章彙整 SelectMonth June2022 (2) May2022 (7) April2022 (5) March2022 (12) February2022 (4) January2022 (1) December2021 (6) November2021 (1) October2021 (7) September2021 (7) August2021 (11) July2021 (7) June2021 (14) May2021 (11) April2021 (6) March2021 (6) February2021 (12) January2021 (8) December2020 (13) November2020 (7) October2020 (15) September2020 (7) August2020 (14) July2020 (2) June2020 (17) May2020 (14) April2020 (17) March2020 (21) February2020 (4) January2020 (2) December2019 (4) November2019 (3) October2019 (7) September2019 (11) August2019 (13) July2019 (2) June2019 (10) May2019 (14) April2019 (11) March2019 (8) February2019 (9) January2019 (14) December2018 (16) November2018 (20) October2018 (22) September2018 (30) August2018 (22) July2018 (36) June2018 (24) May2018 (21) April2018 (12) March2018 (32) February2018 (15) January2018 (15) December2017 (39) November2017 (15) October2017 (13) September2017 (13) August2017 (14) July2017 (4) June2017 (16) May2017 (15) April2017 (9) March2017 (7) February2017 (6) January2017 (12) December2016 (14) November2016 (6) October2016 (12) September2016 (11) August2016 (18) July2016 (12) June2016 (16) May2016 (9) April2016 (10) March2016 (15) February2016 (14) January2016 (18) December2015 (21) November2015 (32) October2015 (24) September2015 (28) August2015 (25) July2015 (26) June2015 (23) May2015 (15) April2015 (18) March2015 (16) February2015 (21) January2015 (17) December2014 (22) November2014 (20) October2014 (15) September2014 (13) August2014 (11) July2014 (12) June2014 (9) May2014 (10) April2014 (11) March2014 (6) January2014 (1) November2013 (5) October2013 (2) 關於歐斯瑞 Back 工作機會 Magento Back Magento解決方案 Back Magento服務 MagentoOpenSource MagentoCommerce MagentoCommerceCloud MagentoOMS MagentoXMiraklB2B2C商城 MagentoforB2B/B2E Magento內部系統串接 Back ERP管理系統整合  PIM商品管理系統整合 POS系統整合 CRM客戶管理系統整合 Magento外部系統串接 Back 各國金流系統 第三方客服系統 Magento健檢中心 Back Magento1升級Magento2 Magento維運服務 MagentoforHeadless&PWA Back MagentoforHeadless&PWA Shopify 企業電商顧問 Back 電商轉換率分析CRO 網站速度優化 AWS主機伺服器建置維運服務 成功經驗 Back 客戶成功案例 客戶回饋 新知分享 Back Magento Shopify 聯絡我們 CSS預處理器SASS、LESS介紹ByAstralWeb2yearsagoNoComments首頁 / 網站技術與設計 / 前端開發 / CSS預處理器SASS、LESS介紹 什麼是CSS預處理器（CSSpreprocessor）？ CSS預處理器產生了一種新的語言，而核心理念是用一種專門的程式語言，為CSS增加一些程式設計的的特性，無需考慮瀏覽器的兼容性問題，例如可以在CSS中使用變量、簡單的邏輯程序、函數等等，讓開發者就只使用這種語言進行編碼工作。

簡單來說，CSS預處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再透過編譯轉為正常的CSS文件。

CSS預處理器技術已經非常的成熟，而且也湧現出了越來越多的CSS預處理器語言，比如說： SASS（SCSS） LESS Stylus Turbine SwitchCSS CSSCacheer DTCSS 為什麼要選擇CSS預處理器？ CSS面臨的下面的幾個問題： 語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重複的選擇器 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護 這些問題創造了CSS預處理器的生成，讓CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

既然有這麼多的預處理器語言，為什麼著重介紹SASS、LESS？原因很簡單，因為Magento2使用LESS開發前端主題，官方也推薦SASS作為開發語言（如何安裝與使用可以參考我們之前的文章：使用Magento2原生工具來將LESS編譯成CSS、以SASS開發Magento2佈景主題）。

而這兩種預處理器語言適用性都很廣泛。

沒有存在誰好誰壞的情況，只有存在誰更適合當前項目的開發。

SASS（SCSS） 官網：Sass:SyntacticallyAwesomeStyleSheets 在線編輯器：SassMeister|TheSassPlayground! SASS是採用Ruby語言編寫的一款CSS預處理語言，誕生於2007年。

最初是為了配合HAML（一種縮進式HTML預編譯器）而設計的，因此有著和HTML一樣的縮進式風格，以“.sass”後綴為擴展名。

而SCSS是SASS3版本當中引入的新語法特性，完全兼容CSS3的同時也繼承了SASS強大的動態功能。

是以“.scss”後綴為擴展名。

兩者的不同點是語法書寫方式的不同，SASS以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而SCSS的語法書寫和CSS語法書寫方式非常類似。

這也是SASS後來越來越受大眾喜歡原因之一。

簡單點說，把現有的“.css”文件直接修改成“.scss”即可使用。

基本語法 變量：在SASS中聲明變量必須是$開始，然后變量名和值使用冒號隔開，跟CSS的屬性一致 .scss $mainColor:white; $siteWidth:1024px; body{ color:$mainColor; max-width:$siteWidth; } 編譯後的.css body{ color:white; max-width:1024px; } 嵌套：SASS提供了選擇器、屬性、偽類嵌套功能 .scss nav{ a{ color:red; header&{ color:green; } } } 編譯後的.css nava{ color:red; } headernava{ color:green; } 繼承：選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。

這個通過@extend語法實現 .scss .error{ border:1pxsolidred; background-color:#fdd; } .seriousError{ @extend.error; border-width:3px; } 編譯後的.css .error{ border:1pxsolidred; background-color:#fdd; } .seriousError{ border:1pxsolidred; background-color:#fdd; border-width:3px; } 混合：@mixin允許建立一組可以在整個樣式表中重複使用的樣式，而不需要重新建立非語義類，再使用@include呼叫 .scss @mixinborder-radius($radius){ border-radius:$radius; -ms-border-radius:$radius; -moz-border-radius:$radius; -webkit-border-radius:$radius; } .box{ @includeborder-radius(10px); } 編譯後的.css .box{ border-radius:10px; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } LESS 官網：Less.js:Gettingstarted LESS是由AlexisSellier在2009年設計，為一個開源專案。

LESS的第一個版本也是使用Ruby編寫，但在後來的版本被JavaScript替換。

以“.less”後綴為擴展名。

變量：與SASS不同，聲明變量不是$而是換成了 @ .less @mainColor:white; @siteWidth:1024px; body{ color:@mainColor; max-width:@siteWidth; } 編譯後的.css body{ color:white; max-width:1024px; } 嵌套：和SASS相似 繼承：使用:extend，若要進一步跟子元素有關聯，就可以使用all，就會聯同子元素的樣式一起轉換進去 .less .a1:extend(.b){ color:#f00; } .a2:extend(.ball){ } .b{ border:1pxsolid; font-size:20px; } .b.c{ text-align:20px; } 編譯後的.css .a1{ color:#f00; } .b,.a1,.a2{ border:1pxsolid; font-size:20px; } .b.c,.a2.c{ text-align:20px; } 混合：有別於SASS的寫法，LESS的mixin長相跟class一模一樣，就是用一個「.」開頭，裡面放入變數重複使用，雖然跟class一樣，但如果是帶有小括號，轉出來的CSS是不會出現的 .less .fn1(@v){ border-width:@v; } .box1{ .fn1(10px); } 編譯後的.css .box1{ border-width:10px; } 以上我們簡單概述了SASS與LESS的基本語法，其中還有許多語法糖和功能是值得做更深入學習。

熟悉預處理器，在撰寫CSS時則如虎添翼！ 也別忘了追蹤歐斯瑞臉書粉絲團、Instagram，以及訂閱我們的電子報，隨時接收第一手新知分享！ 參考： https://changtsuiling.gitbooks.io/sass/content/ https://www.oxxostudio.tw/articles/201601/css-less-01.html RecentPosts Magento2促銷功能小技巧–簡化多SKU輸入步驟 Magento2商業版實用功能教學–禮物登記表GiftRegistries 前端開發：使用@supports來檢查瀏覽器支援性 前端開發：解決sliderjs垂直滑動時出現的高度問題 Magento2開發–設置排程群組 文章分類 Shopify Magento Magento2開源版 Magento2商業版 電子商務 Zendesk Mailchimp Akeneo PIM Oracle 網站技術與設計 Adobe教學 前端開發 後端開發 網站測試 Wordpress 行銷與實用好文 最新動向 文章彙整文章彙整 SelectMonth June2022 (2) May2022 (7) April2022 (5) March2022 (12) February2022 (4) January2022 (1) December2021 (6) November2021 (1) October2021 (7) September2021 (7) August2021 (11) July2021 (7) June2021 (14) May2021 (11) April2021 (6) March2021 (6) February2021 (12) January2021 (8) December2020 (13) November2020 (7) October2020 (15) September2020 (7) August2020 (14) July2020 (2) June2020 (17) May2020 (14) April2020 (17) March2020 (21) February2020 (4) January2020 (2) December2019 (4) November2019 (3) October2019 (7) September2019 (11) August2019 (13) July2019 (2) June2019 (10) May2019 (14) April2019 (11) March2019 (8) February2019 (9) January2019 (14) December2018 (16) November2018 (20) October2018 (22) September2018 (30) August2018 (22) July2018 (36) June2018 (24) May2018 (21) April2018 (12) March2018 (32) February2018 (15) January2018 (15) December2017 (39) November2017 (15) October2017 (13) September2017 (13) August2017 (14) July2017 (4) June2017 (16) May2017 (15) April2017 (9) March2017 (7) February2017 (6) January2017 (12) December2016 (14) November2016 (6) October2016 (12) September2016 (11) August2016 (18) July2016 (12) June2016 (16) May2016 (9) April2016 (10) March2016 (15) February2016 (14) January2016 (18) December2015 (21) November2015 (32) October2015 (24) September2015 (28) August2015 (25) July2015 (26) June2015 (23) May2015 (15) April2015 (18) March2015 (16) February2015 (21) January2015 (17) December2014 (22) November2014 (20) October2014 (15) September2014 (13) August2014 (11) July2014 (12) June2014 (9) May2014 (10) April2014 (11) March2014 (6) January2014 (1) November2013 (5) October2013 (2)  00000 歐斯瑞-一個對網路世界充滿熱情的團隊 歐斯瑞提供免費電商知識，並協助各大類型之企業 電商諮詢建置與 Magento和 Shopify相關的電商專案。

立即聯繫我們 上一篇文章Magento2.3更新介紹–阿不是阿，你要改資料表你要先講(三)下一篇文章Laravel7中的新元件推薦文章前端開發：使用@supports來檢查瀏覽器支援性2022-05-26 0前端開發：解決sliderjs垂直滑動時出現的高度問題2022-05-24 0Magento2開發–設置排程群組2022-05-20 0前端開發：解決SASS的禁用警告“Using/fordivisionisdeprecatedandwillberemovedinDartSass2.0.0.“2022-05-20 0Categories:  前端開發網站技術與設計Tags:  CSS,前端開發,Sass,LESS,網站技術與設計 留下回應取消回覆 你的電子郵件地址不會被公開.姓名* 電子郵件* 網站 維運服務