六角學院Sass課程介紹與心得,前1%高手都在用的CSS管理工具!

六角學院Sass

你知道Sass是什麼東西嗎?你現在寫網頁有在用Sass管理你的CSS嗎?

今天為大家介紹一套個人覺得很實用的線上課程,六角學院的「Sass實戰全攻略」!

上完之後不僅自己的專案管理上變得很方便,在其他寫程式的時候也會變得有條有理,因此決定來分享一下六角學院Sass課程介紹與心得!

本篇內容包含:

  • 什麼是Sass?
  • 為什麼要學Sass?
  • 六角學院介紹
  • 六角學院Sass課程介紹
  • 六角學院Sass課程心得
  • 【讀者專屬回饋】

文章最後還有【讀者專屬回饋】哦!

 

什麼是Sass?

Sass最早是在2007年由Ruby開發出來的 「 CSS程式化框架 」 ,2011~2012年台灣開始推廣,到了2013年後使用上變得非常普及

Sass其實有分為兩種寫法 : 「Sass」和 「Scss」,但都統稱為Sass

六角學院Sass
Sass

 

兩者差別比較

Sass

Sass在撰寫時會用「縮進語法(TAB)」的方式撰寫,去除掉了一些大括號({})、分號(;)等等的符號,可以加快編寫流程

sass舉例
Sass 程式碼舉例

 

Scss

Scss在撰寫時則是用 「區塊語法(Block)」的方式撰寫,就是和一般CSS寫法幾乎一樣的方式,也是大眾目前最普遍使用的方式

因為從CSS轉過來寫Scss寫法幾乎沒變,學習成本較低,所以較受歡迎!

scss舉例
Scss 程式碼舉例

 

為什麼要學Sass?

Sass的 4 大特色

#1變數

在設計版面樣式的時候,常常會碰到許多樣式會使用同一個色碼、寬度高度大小或是字型大小等等的情況,而當客戶想要更改某一個樣式類型時,我們就得全部重來

變數的好處就在於只需要在宣告時設定,之後就帶入給需要這個變數值的參數,萬一客戶需要更改樣式類型,我們就改最一開始宣告的部分就可以了!

變數舉例
變數宣告、使用方式

  

#2引入 import

Sass比CSS多了一項功能就是「import」,可以在引入其他檔案的內容,讓一份專案可以切割成好幾個小檔案,方便分類檔案類型與管理

像是專案會有一個 main.scss 的檔案,而其他檔案就會有 _reset.scss、_init.scss等等類型的檔案,之後在main.scss裡面去import要用到的檔案

import舉例
舉例 import 其他檔案

 

#3混合 mixin

mixin的功能就是某些重複的程式碼會一直用到,因此就撰寫一個mixin的模板,最後include到想要用到這段程式碼的地方

mixin舉例
mixin 舉例

 

#4繼承 extend

extend最大的好處就是可以複寫,這讓程式碼撰寫上可以減少撰寫重複代碼的問題發生,繼承過來之後,只要更改想要複寫的部分就可以了

extend雖然可以複寫,但這樣會造成程式碼肥大的問題而導致效能降低,因此很少人在用extend功能,但還是舉例一下

extend舉例
extend 舉例

 


 

六角學院介紹

六角學院是由兩位導師創辦,主打前端系列課程,包含 : 前端工程師、網頁設計師及UI設計師,線上課程均由兩位導師負責教學

而每種課程裡的每小節都有專屬討論區,只要有問題即可發問,24小時內都會回覆,提供非常完整的售後服務

目前線上學習人數超過兩萬人,是大家公認的前端學習指標

六角學院
六角學院 (圖片來源:六角學院)
想了解更多六角學院課程,成為一名前端工程師嗎?那這篇文章不能錯過!
延伸閱讀: 六角學院課程評價,7個月成功就職月薪45K前端工程師

 

六角學院Sass課程介紹

課程 3 大方向

#1手把手教學開始入門Sass

課程中老師會帶大家安裝好環境並且介紹Sass與Scss的寫法差異,並且教學如何編譯成css檔讓網頁讀取

這部分我覺得非常適合剛接觸的人入門,最難的部分就在入門,而課程中這部分做的很完整、方向也很正確,讓大家學習上很順利

 

#2讓學員了解Sass的功能為什麼而開發

課程中會解釋Sass的特色與功能,這些功能是為了什麼狀況或問題而開發,讓學員在撰寫時不會死死的背語法

這樣的教學方式我覺得是最適合第一次接觸的人,奠定的基本正確的觀念,在之後使用上也比較上手

 

#3帶學員操作Sass解決常見問題

介紹完功能為何開發之後,老師會帶著學員運用這些功能特色來解決問題,以範例的方式帶入,讓學員更加了解其中用意

這個部分就是標準的觀念之後操作,六角學院課程基本上課程運作模式都是這樣,有效的灌輸觀念與概念,再透過實作加深功力

 


 

課程 7 大重點內容

Sass環境教學

這個章節老師會帶領大家把環境安裝架設好,並且解釋Sass與Scss的寫法差異,之後會實作一個範例,並且教大家如何編譯

Sass環境教學
Sass環境教學

 

變數

這個部分會教大家為什麼需要用變數、變數教學,還有常見的編譯錯誤情況,最後會搭配加減乘除來實作範例,還有字串的管理小技巧,基礎到進階一次了解

個人覺得變數是Sass中最多變的一個元素,課程中的詳細教學會讓學員有非常充足的觀念,搭配實作之後會非常熟練!

變數
變數

 

引入 import

import這個章節老師會搭配變數一起使用,並且教你如何把檔案切割開來,最後是講解CSS Reset和總結import的常見問題

我覺得這個章節非常重要也是Sass的精華,就是把檔案切割並且引入,因為Sass本身是拿來管理CSS,而要好管理就要會切割,因此這個單元非常重要

引入import
引入 import

 

混合 mixin

mixin的章節會介紹mixin學習的目的,並且和import結合、帶入參數,讓多種功能一起使用,寫起來會更方便

個人覺得這些功能的單一介紹最後合起來使用與練習,是對於剛開始學習的學員有很大幫助的,可以充分了解運用情境與常見問題,這部分很推薦

混合mixin
混合 mixin

 

Sass/CSS 設計模式與網頁收納術

這個單元就會開始介紹一些規範與設計模式,讓整體的架構更清晰,像是Smacss設計模式、OOCSS結構等等,都是常見的架構體系,對於專案來說會更好管理

這邊開始我覺得就是比較進階的內容,當初也是上課之後才知道有這些東西,實際操作後才發現要寫好一個好管理的架構是需要注意很多方面,這個單元非常重要!

Sass/CSS設計模式與網頁收納術
Sass/CSS 設計模式與網頁收納術

 

Sass 命名技巧

命名的技巧通常寫程式寫久了就會知道命名的重要性,而這個章節老師會教大家如何命名、使用BEM再優化,還有一些組合技等等

我覺得在管理方面,命名會給管理者帶來極大的幫助,因為一份專案不會只有一個人修改,如果有好的命名不僅為自己減少麻煩也為別人帶來便利性

Sass命名技巧
Sass命名技巧

 

Sass 中進階觀念

這個單元開始就會慢慢講解一些更進階的觀念,像是開發網站前guidelines的設計規範規劃、設計模式等等

這部分有助於習慣業界的寫code方式與遵循規範能力,練習完成後非常有成就感!

Sass中進階觀念
Sass中進階觀念

 


 

六角學院Sass入門影片


 

六角學院Sass課程心得

在學會Vue課程框架之後,決定學習下一個前端工程師必學的管理工具「Sass」,因此我在課程剛推出就立刻購買下來

過程中發現原來一個大型專案不只是把功能做好,連管理層面也必須做好,這樣在往後維護與發展性才會有可調整的彈性空間

這門課程給予我不一樣的管理程式碼知識,包括上面提到的Smacss與BEM等等的東西,更讓我在開發上有一個很好的工具來開發

教學與講解非常仔細,實作練習機會也非常多,是一門精進類型的課程

適合對象

知道Sass但沒有學習資源的人」、 「想要精進程式碼管理的人」、 「準備求職與轉職者」、「基礎前端工程師

 


 

讀者專屬回饋

因為個人在準備就職前花了很多心思與時間,我能了解決定前的糾結與決定後的堅持是很不簡單也很辛苦的

因此我決定在這邊免費回饋給我的讀者一個專屬的「客製時間進度規劃討論

如果您是透過我的連結與購買教學步驟購買課程的讀者,除了您已經決定開始學習之外,另一方面也是給予我的文章肯定

而我將會與您聯絡並且幫助您規劃與討論您的時間進度規劃

 

如何獲得回饋?

獲得專屬回饋的步驟很簡單,請遵循下方每一個步驟指示 :

  1. 按下方按紐進到六角學院Sass課程頁面
  2. 購買Sass課程
  3. 購買完成後請您截圖「付款成功畫面(包含網址)」
  4. 透過Email將您的「截圖畫面」傳送到 stupidnote@stupidnote.com
    (讓我核對一下是否為我的讀者)
  5. 等待我與您聯絡

 

 

客製時間進度規劃討論 是什麼?怎麼討論?

等待我確認完您的Email之後,我將會與您聯絡並且共同討論5件事項:

  1. 了解您對於網頁前端的了解
  2. 了解您有多少以及有哪些時間可以準備
  3. 了解您預計到什麼樣的程度
  4. 給予您課程的準備方式與建議
  5. 最後共同討論與制定您的專屬時間進度規劃表

 

總結

現在的前端職缺基本上都會要求許多特定的技能,而Sass就是其中一種,以Sass的功用及使用普及程度而言,職缺要求其實算很合理

如果你是一位想往前端工程師邁進又還沒學習Sass的讀者,我非常推薦你上這一套課程,上完寫code的思維會改變很多

目前網路上也有很多資源可以學習,但在這邊已經有完好的中文授課以及售後服務,如果是時間有限的學習者,一起進來成長吧!

希望這篇文章有幫助到正在猶豫學習Sass的人,有問題歡迎下面留言,我看到就會第一時間回覆哦!

 

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top