深入淺出 Sass 巢狀

前言

相信許多的後輩,仍前撲後繼的想成為前端工程師
而在這條寫css的路上,一定聽過Sass(預處理css)
其實就是改變平常寫css的習慣
將它變得好整理以及好維護
當然沒有一套最好的標準,畢竟方式都是人制訂出來的
像是隨便搜尋,都一堆人講css命名規範!
甚至很好找到中文解析:(這裡先隨意找一篇)
【YJ BLOG】-Scalable CSS - 介紹OOCSS/SMACSS/BEM
無非是為了易懂的方式撰寫

好的今天主講的是,初探

找一隻檔名為.scss .sass
裡面一定會是很可怕的巢狀

別緊張
你只要了解這個”&
巢狀再複雜也只是個笑話
因為馬上你就會在腦海裡 compile 出 .css

How to set font-size smaller than 12px at chrome

一般來說
在 chrome 開啟,font-size 是無法低於12px
這件事一直懊惱著部分手機版的視覺

Use text-size-adjust

解決方法(一)
在css上使用-webkit-text-size-adjust: none
text-size-adjust:CDN
但是可以發現似乎 chrome 27 的版本以及safari 6的版本會不支援了!
螢幕快照 2017-03-23 下午3.58.22.png

Use transform

解決方法(二)

1
transform:scale(參數);

所以你要怎麼控制他?

1.先知道現在這個文字上 font-size 為多少? 舉例:12px
2.計算你想做多少 px 的字體? 舉例:8px

使用預處理 Sass + Compass 快速開發

何謂Sass?

我認為綜合這位大神給的的回覆:
Sass 並不是一套軟體,無法 Download
它算是CSS的進階編寫方式,再透過Ruby環境將檔案編譯成一般CSS檔
而在編寫的過程中 Dreamweaver、Sublime text、Visual Studio、記事本
都只是編寫的工具,並不會影響到編譯後的結果。(部分取自 agito723 CSS沒有極限)
看完還不懂別緊張!!
最完整的Sass解釋,內容不含過多安裝方法,單純 Sass\SCSS 體驗
我給這篇Blog第一名:Sass/SCSS 簡明入門教學

何謂SCSS?

兩者都屬於sass,而差在附檔名以及編寫方式的不同。
.sass是屬於原生的sass語法,明顯的特徵是利用縮排取代大括號。
.scss後來衍生出來的語法,為了讓新加入的設計師可以承受較少的碰撞學習sass,
所以在結構上相當類似CSS。
(取自 agito723 CSS沒有極限)

說實在這個不懂,直接看官網引導最快喔
有Sass跟SCSS的轉換,一看就懂差別再哪了!!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×