yerr對的你不要懷疑,我們就是要來講 SCSS,因為我覺得這個蠻稀奇的(應該沒有)所以就打算
把他另外分出另一章(阿對對對我就是文章小偷)。
yee
在講 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,不是 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,這裡推薦一個網站:
可以多多練習你對 SCSS 的熟悉度喔!~
翻譯成 CSS 如下:
是不是上面的比較容易看得懂?所以這就是 SCSS 設計的初衷(應該啦哈
我感覺我這篇寫的比較隨便(雖然說我每一篇都寫得很隨便)
可能是因為這是最後一章的關係 WW
我等不及要解脫了(你們也是哈)
這章我們認識了 SCSS 的概念,還有一些些很「隨性」的程式碼
下一章無非就是我們的最後一篇,我會繼續當文章小偷的啊哈哈哈哈哈哈哈