chunwen's blog

為何我們要學@mixin? @mixin可以幫助我們將一些常用語法模組化，協助專案開發時不會因為忘記相關CSS語法而打斷開發思緒。EX：clear清除浮動、等比例圖片放大、圖片取代文字等語法 了解目的後，我們來看一下，@mixin怎麼使用吧 1.首先新增一隻scss檔案，並以語意化方式命名~EX：_clearfix.scss 2.語法如下： @mixin clearfix() {   &::after {     display: block;     clear: both;     content: "";   } } .box{      @include clearfix; } Tips： 1.匯入語法時，前面要加@include 2.設定語法時，前面要加@mixin 3.編譯結果 接著，我們來使用帶入變數寫法 上一篇 Sass教學-變數 有提到變數寫法是 「$」+「變數」 ，故結合@mixin我們可以這樣寫 @mixin circle($size,$background){       width: $size ;       height: $size ;       background: $background ; } box{     @include circle(50px,black) } 編譯結果示意圖如下 最後，我們來學習如何用@mixin 搭配 @content 之RWD用法教學 開始前，我們先思考一下為何需要使用這樣的寫法呢? 我自己的理解如下： 過往我們在撰寫不同斷點時，往往每次都需要重複撰寫@media(max-width:...

為什麼要使用變數呢? 專案實務上若要調整網頁主題色、間距、文字大小等等，不太可能會一個個手動更改(太花時間)，因此變數存在的目的就是幫助我們管理常用變數條件、加快開發效率 變數介紹(目的：進行全域統一管理較為方便) 寫法： $ font -l:18px; 寫法說明： 1.最前面有一個$符號 2.接著進行css命名(取名字可以往易辨識方向) 3.再來加上屬性 4.將 $ font -l寫在scss/sass最前面 原因：sass編譯時，是從上到下所以若不是放在最前面會有undefined情況發生 Tips：結束時要加 分號; ，沒加會產生semicolon錯誤訊息 範例如下： $background: yellow; .header{     background: $background; } .body{     background: $background; } .footer{     background: $background; } 如此，prepos就會幫我們將css編譯完成瞜~ Sass進行運算  語法： 「$」+「變數」+「乘除運算」 數字程式碼： $font-m:16px;/*設定大小時候預設值要放第一個才能成功編譯*/ $font-l:$font-m * 1.5;      //24px $font-s: $font-m * 0.9;    //14.4px 範例 字串程式碼： $font-family-base: "Microsoft JhengHei", "Roboto", "Helvetica Neue",   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; $font-family-title:"Segoe UI"; CSS的font-family要不要加引號是根據該字體名稱中間有沒...

何謂變數？ 變數是用來 儲存資料 與 進行運算 的基本單位。 變數規則命名 1.開頭不能用數字    2.不能用-跟. (可以使用__) 3.大小寫有區分 4.變數需有語意化 5.不能使用保留字(reserved word)、關鍵字（keyword） EX：if、boolean  補充資料： W3cscool--JavaScript Reserved Words 、 MDN 關鍵字與保留字列表 看完上面變數介紹，我們就來簡單示範幾個例子吧！ 變數寫法介紹： 宣告變數 變數名稱(可以自行命名) 指定內容(數值、字串、布林) var price = 30; 透過 var 宣告變數 burgerPrice，因為沒有給 burgerPrice 數值，此時 burgerPrice 的內容為 undefined。 var burgerPrice; //undefined 宣告變數 burgerPrice 的同時也給了變數 burgerPrice 值，此時 burgerPrice 的內容為數字的 10。 var burgerPrice = 10; console.log(burgerPrice) //10 因為未宣告變數，直接存取時候會出現Uncaught ReferenceError: hello is not defined console.log('hello') 補充幾點科普小知識： 1.JavaScript支援 Unicode ，代表變數用中文命名也ｏｋ，但是為了日後程式維護性還是建議不要  2. JavaScript 是個「弱型別」的語言，變數本身無需宣告型別，型別的資訊只在值或物件本身 3. 所有沒有透過 var 宣告的變數都會自動變成全域變數 變數資料型別共有七種： 備註：範例只會介紹上面三種，其餘就請參考 JavaScript 的資料型別與資料結構 1.數字 EX：10、20、35 2.字串(string) EX："hello world" 3.布林 EX：true、false 4.null 5.undefi...