今天我們要來介紹Sass Mixin 與 content的搭配 來解決RWD Scss: @mixin pad{ @media(max-width: 7...
此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。 編譯 scss 註解有分為 會被編譯、不會被編譯 兩種。 寫法：// // 不...
此篇接續客製化 sass 基礎語法以及觀念下集，尚未觀看上集可以先看完再來看下集。 Operators 運算 介紹 sass 原生的 運算 功能，以往 c...
這一兩年很常在網頁設計中看到這種不規則的小東西出現，甚至還會像波浪一樣動。之前傻傻地用Svg做，然後一直換path，結果效能不太好。上網一查發現其實只要用bor...
今天，我們要先將 scss 導入專案中，scss 是 css 的預處理器，可以使我們將樣式做許多管理，首先，我們需要將 scss 下載下來，輸入指令 npm i...
Day 17 - 開發小知識(一) : Css reset、SASS/SCSS 每日一談 嗨，大家好 ! 我是阿蘇今天是 Day17 ， 來分享再正式開發我...
今天我們要來學習如何把Sass切分支許多檔案這樣會使我們比較容易管理 @import(匯入)可將 Scss檔案彙整成一支 css檔案簡單來說就是我們可以把 Sc...
此篇會用三個實戰範例來當作做 Sass 架構介紹的結尾。 閱讀此篇內容前，建議先閱讀過前兩篇 Sass 架構： 第 14 集：Bootstrap 客製化...
敝人很常踩到詐騙網站，第一屏就是一個慶祝的小動畫，恭喜我中獎（好想中威力彩啊） 網頁也很常有這種獎勵使用者的小動畫，譬如說送出一個訂單、或是幫忙寫了一個評價，我...
這次要寫一個播放器的清單，在編寫之前，我先把 navbar 優化了一下，如下圖呈現的樣式，但我還是沒有研究出來 search 要怎麼對齊在 navbar 的中間...
進入 aside 中間部分的編寫，想要寫成下方畫面程式碼滿簡單的，跟前面的程式碼差不多，但這次加入了畫面優化跟效果， 先來看一下 HTML 程式碼 <u...
這裡必須先介紹為什麼我們需要模組化呢?這裡舉一個例子我們尚未模組化的css //基本按鈕 .btn{ display: inline-block; wi...
隨著 CSS 開始越來越複雜，由於 CSS 語法受限而發展出了 CSS Pre-/Post-processors (預處理和後處理) 來拓展和優化寫法。 什麼是...
今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...
這次的練習是用 SMASS 跟 OOCSS 還有 BEM 的概念來練習，要呈現是下方的畫面 但我覺得有點單調，所以我就把它優化了變成這樣 HTML 本身不難，難...
小弟熱愛音樂，前一週自己發想一個音樂主題的頁面網站，記錄各樣的網頁撰寫方式，接下來這一週要向 KKBOX 致敬，撰寫內容如下 navbar 導覽列 左邊 si...
開發環境架設(一) : Bootstrap 核心、SCSS架構 每日一談 嗨，大家好 ! 我是阿蘇到了第20天啦 ，剩下的天數都會來分享關於正式開發 Side...
今天工作期間有遇到一個問題：因公司是醫療體系，所以系統裡有很多病患的名字，而人的名字就會有一些特殊的字。當時公司的解決辦法就是建了自己的造字，並一直沿用到現在，...
小弟平常喜歡聽音樂，台灣音樂串流平台的始祖 KKBOX，從一推出就使用至今，也看到 KKBOX 在台灣的音樂圈越來越具有代表性，並且還有自己的風雲榜演唱會，真是...
aside 終於進入最後一個部分，也就是播放器了，預計呈現樣式如下圖： 這次用了比較多技巧跟方式，慢慢的講解吧!!HTML 如下： <div class=...
今天要來介紹 Sass/Css 設計模式啦~~首先我們先認識 最好入門的 Smacss官網: http://smacss.com/ Smacss Base 首...
此篇會教學如何將 Bootstrap grid 格線系統，自幹一個出來。 事前準備 Gird System 格線系統基礎觀念 RWD 響應式基礎觀念...
在介紹今天的內容之前推薦一個不錯的東西那就是 CodePen啦https://codepen.io/your-work可以先上撰寫程式碼連 Sass也支援 非常...
7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它 創建了一...
這次要寫一個新聞欄位，是用 ul li 做成的圖文並茂，標題為連結，可以點擊的樣式畫面如下呈現: 其實寫道今天有發現到 ul li 相當常被使用到，只是內容有不...
超級愛SASS的除法功能！只要一個容器我想多切幾份，就可以切幾份給我～對於一個數學不好又很懶得打開手機拿起計算機、點開計算器換算的懶人者 ---> 我來說...
寫CSS最痛苦的事情是什麼？ 介紹SCSS之前，先想想寫CSS最痛苦的地方是什麼？ 寫法很囉唆 不容易維護 例如以下這個例子 div { color: #...
BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線 官網:http://getbem.c...
OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...
今天要來寫一個滿版圖片，但不使用 img 的標籤，想呈現下方畫面 這次做法跟先前一個練習類似，但這次有一個地方有優化了一下，就是在這個地方增加下列屬性 .con...
Kent
Global Rachel
阿蘇蘇
Tim Hsu
linyencheng
凱特麻麻桑
tso1158687
iThome鐵人賽
看影片追技術