iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
自我挑戰組

50後阿嬤教你寫程式!系列 第 29

Day 29 讓 CSS 更好讀!(番外篇)

  • 分享至 

  • xImage
  •  

Day 29 讓 CSS 更好讀!(番外篇)

yerr對的你不要懷疑,我們就是要來講 SCSS,因為我覺得這個蠻稀奇的(應該沒有)所以就打算
把他另外分出另一章(阿對對對我就是文章小偷)。

yee

SCSS 是什麼?

在講 SCSS 前,我先來簡單講一下 SASS,不要問我為什麼,因為他倆有一滴滴的關係( 應該有
啦啾咪,因為寫法有一點點像喔 )SASS( 英文全稱:Syntactically Awesome Stylesheets )他的英文全名有夠長,是一個最初由 Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

有時候阿,大家在編寫 CSS 選擇器時,都會覺得:「好多一串接一串程式碼,自己寫完要檢查
還常常找不到錯在哪,到最後根本看不清楚自己在寫什麼,只好逼自己重寫。」相信大家應該都有
這種經驗,不管是大師還是萌新,都被 CSS 的種種困難而被擋住去路,所以,SASS 就被創造
出來了,而 SASS 的寫法有分為舊版的縮排語法以及新的 SCSS,但是,由於 SCSS 是 CSS 的
超集合,能支持很多 CSS 的語法,所以大部分人都還是會選擇 SCSS。

這邊呢,SASS 和 SCSS 都沒有誰好誰壞之類的字眼出現,自己用得順手就好,我也不會逼你一定
要用 SCSS,因為我知道有人用 SASS 比較順手,所以我也不會去阻止,搞得好像用 SASS 就是
有罪之類,不會不會!

簡單的 SCSS

因為這次的主題是 SCSS,不是 SASS 喔,所以我不會寫關於 SASS 有關的程式碼

偏移正題了,我們來看看原本的 CSS 程式碼長怎樣呢?

這就是上一章寫的程式碼,是不是有一點點看不懂?(對萌新而言,大大我不用說了)

現在我來簡單編寫一串 SCSS 的程式碼:

.box{
  width: 100%;
  margin: 0 auto;
  .title{
    padding: 10px;
    p{
      color: rgba(255, 0, 0, 1);;
    }
  }
}

這就是一個典型的巢狀結構( Nesting )!簡單易懂誰不愛?
但是呢!我們只寫這樣是沒辦法引進 HTML 的,因為網頁只能解讀 CSS(簡單來講就是電腦看不懂啦)所以我們要來
做一個好玩的事情,就是把 SCSS 翻譯成 CSS,這裡推薦一個網站:

https://www.sassmeister.com/

可以多多練習你對 SCSS 的熟悉度喔!~

翻譯成 CSS 如下:

是不是上面的比較容易看得懂?所以這就是 SCSS 設計的初衷(應該啦哈

小總結

我感覺我這篇寫的比較隨便(雖然說我每一篇都寫得很隨便)
可能是因為這是最後一章的關係 WW
我等不及要解脫了(你們也是哈)
這章我們認識了 SCSS 的概念,還有一些些很「隨性」的程式碼
下一章無非就是我們的最後一篇,我會繼續當文章小偷的啊哈哈哈哈哈哈哈


上一篇
Day 28 阿嬤帶你探索 CSS!(5)
下一篇
Day 30 程式設計的最後,是阿嬤
系列文
50後阿嬤教你寫程式!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言