iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 2573 瀏覽

鐵人賽自我挑戰組 DAY 14

30 天轉生到 bootstrap 5 的意識界系列第 14 篇

技術第 14 集：Bootstrap 客製化 Sass 原始碼架構

此篇會介紹 Bootstrap 客製化 sass 原始碼架構，著重在如何使用原始碼來客製化自己的 Bootstrap 環境。 Sass 架構官網推薦的客...

Kent ‧ 2021-09-29

5 Like 0 留言 2545 瀏覽

鐵人賽開發技術 DAY 34

CSS沒有極限系列第 30 篇

技術 Animation 的各項設定值(2)

[ animation-delay ]：檢索或設置對象動畫延遲的時間 [ animation-iteration-count ]：檢索或設置物件動畫的迴圈次數...

卡斯伯 ‧ 2013-10-19

0 Like 0 留言 2521 瀏覽

鐵人賽自我挑戰組 DAY 28

30 天轉生到 bootstrap 5 的意識界系列第 28 篇

技術第 28 集：Bootstrap 客製化 component 元件樣式

此篇會介紹如何修改 Bootstrap 元件樣式。事前準備須先了解變數設置、通用類別設置，再繼續閱讀會更好消化呦。 _variable.scss...

Kent ‧ 2021-10-13

1 Like 1 留言 2473 瀏覽

鐵人賽 Modern Web DAY 25

CSS 實戰心法系列第 25 篇

技術實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System，然後還提供變數讓 Grid 還有額外的參數可以設定，手寫的 CSS 如果要重新計算 12 組以上的計...

卡斯伯 ‧ 2016-12-25

3 Like 1 留言 2397 瀏覽

鐵人賽開發技術 DAY 22

作個網站吧！系列第 22 篇

技術作個網站吧！Quickly Sass(4)-CSS無痛轉移Sass

既然開始學Sass了，以前的檔案當然也要趁機會轉成Sass，練習兼整理，一舉兩得～既然開始學Sass了，以前的檔案當然也要趁機會轉成Sass，練習兼整理，一舉...

tpodomoto ‧ 2013-10-22

2 Like 0 留言 2335 瀏覽

鐵人賽開發技術 DAY 36

Sass3.3 & CSS設計模式系列第 37 篇

技術 Sass教學 (36) - MVCSS - Components、Structures

以下文章同步於Github。程式碼連結 MVCSS MVCSS中文翻譯 Components(組件) 具有辨識性的UI皆放在Components的Sass目錄...

廖洧杰 ‧ 2014-10-22

2 Like 0 留言 2153 瀏覽

技術 Scss - 小知識與進階功能 ( 下 )

接續上篇繼續介紹剩下的功能，這邊就比較偏程式面，設計函式會比較常使用到，GO!GO!GO! 迴圈部分迴圈可使用 @each 與 @for 來產生重複的樣式，使...

Ares ‧ 2019-08-05

1 Like 0 留言 2140 瀏覽

鐵人賽開發技術 DAY 37

Sass3.3 & CSS設計模式系列第 38 篇

技術 Sass教學 (37) - MVCSS - Manifest、Vendor

以下文章同步於Github。程式碼連結 MVCSS MVCSS中文翻譯這個章節主要是聊MVCSS的Sass結構與命名方式，首先我們就來看到Sass結構：...

廖洧杰 ‧ 2014-10-23

1 Like 0 留言 2107 瀏覽

鐵人賽開發技術 DAY 19

Sass3.3 & CSS設計模式系列第 20 篇

技術 Sass教學 (19) - susy2 - Toolkit - Rows & Edges

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 susy2 - Rows & Edges Rows & Edges Br...

廖洧杰 ‧ 2014-10-05

3 Like 1 留言 2040 瀏覽

技術 CSS沒有極限 - CSS藏頭詩 Selection

這是一個很簡單的技術，就是可以改變文字反選後的樣式，而支援的樣式並不多，目前僅有Color、background、background-color、text-s...

卡斯伯 ‧ 2013-09-28

0 Like 1 留言 1957 瀏覽

鐵人賽自我挑戰組 DAY 17

30 天轉生到 bootstrap 5 的意識界系列第 17 篇

技術第 17 集：Bootstrap 客製化 Sass 官網資源

此篇會用好理解（好笑）的方式導覽官網、原始碼如何閱讀，詳細介紹會放在往後的文章。官網英文官網中文官網 (六角學院翻譯) 中文官網，不一定...

Kent ‧ 2021-10-02

4 Like 1 留言 1878 瀏覽

鐵人賽開發技術 DAY 19

作個網站吧！系列第 19 篇

技術作個網站吧！Quickly Sass(1)-少動點兒手：Sass使用心得

雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月. 坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心...

tpodomoto ‧ 2013-10-19

0 Like 0 留言 1843 瀏覽

鐵人賽自我挑戰組 DAY 29

30 天轉生到 bootstrap 5 的意識界系列第 29 篇

技術第 29 集：Bootstrap 客製化 component 元件樣式

此篇延續上一篇元件樣式修改，此篇著重在元件的動態效果樣式。 option 參數撰寫動態效果起手式。 $enable-reduced-motion:...

Kent ‧ 2021-10-14

1 Like 1 留言 1702 瀏覽

鐵人賽自我挑戰組 DAY 1

30 天轉生到 bootstrap 5 的意識界系列第 1 篇

技術第 1 集：轉生到 Bootstrap 5 世界

30天轉生到 bootstrap 5 的意識界類型前端切版 / Sass / Bootstrap 5 這是一部講述 Bootstrap 5 世界的故事，...

Kent ‧ 2021-09-16

1 Like 0 留言 1653 瀏覽

鐵人賽自我挑戰組 DAY 30

30 天轉生到 bootstrap 5 的意識界系列第 30 篇

技術第 30 集：Bootstrap 客製化秘技

用 meme 圖講述這一趟 30 天轉生到 Bootstrap 5 的意識界的心境。

Kent ‧ 2021-10-15

0 Like 0 留言 1579 瀏覽

鐵人賽自我挑戰組 DAY 22

30 天轉生到 bootstrap 5 的意識界系列第 22 篇

技術第 22 集：Bootstrap 客製化 utilities（下）

此篇延續 Bootstrap 客製化 Sass utilities（上）最後尚未介紹的 generate-utility，解析 generate-utilit...

Kent ‧ 2021-10-07

0 Like 0 留言 1560 瀏覽

鐵人賽自我挑戰組 DAY 20

30 天轉生到 bootstrap 5 的意識界系列第 20 篇

技術第 20 集：Bootstrap 客製化 Sass variable

此篇分享著重在介紹 _variable.scss 變數介紹，以及如何客製化修改。事前須看完Bootstrap 客製化 Sass 必備知識有介紹許多今天...

Kent ‧ 2021-10-05

0 Like 0 留言 1486 瀏覽

鐵人賽 Modern Web DAY 4

使用SASS(SCSS)建立自己的CSS Library 系列第 4 篇

技術 [Day 04] Sass - 簡介

這篇文章簡單介紹一下Sass~ Sass 是什麼 ? Sass是一種CSS預處理器語言(CSS preprocessor)，可以讓開發者使用像是變數、函式、嵌套...

zhix6842 ‧ 2021-09-17

1 Like 0 留言 1474 瀏覽

鐵人賽自我挑戰組 DAY 13

蛻變事實－UI設計師勇闖前端城系列第 13 篇

技術 [蛻變事實／D13] 設計師勇闖前端城－( SASS & SCSS 的＠import 是什麼？）

CSS 它有先後順序，後面會蓋掉前面！ <link rel="stylesheet" href="style/style1....

凱特麻麻桑 ‧ 2018-10-28

0 Like 0 留言 1420 瀏覽

技術 Sass @mixin實現RWD DAY36

今天我們要來介紹Sass Mixin 與 content的搭配來解決RWD Scss: @mixin pad{ @media(max-width: 7...

皮傑先生 ‧ 2020-10-20

0 Like 0 留言 1392 瀏覽

鐵人賽 Software Development DAY 28

Mendix從入門到了解，工程師和業務都要知道低代碼平台是什麼系列第 28 篇

技術誰說低代碼平台上就不能寫自己的CSS

都已經千辛萬苦的學會CSS了，不用用這個技能不是就太浪費了嗎? 對，本篇文就是要來看看怎麼在低代碼平台上用CSS。工具好用的IDE (我用Visual S...

Mel ‧ 2020-10-12

0 Like 0 留言 1387 瀏覽

鐵人賽自我挑戰組 DAY 18

30 天轉生到 bootstrap 5 的意識界系列第 18 篇

技術第 18 集：Bootstrap 客製化 Sass 必備知識（上）

此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。編譯 scss 註解有分為會被編譯、不會被編譯兩種。寫法：// // 不...

Kent ‧ 2021-10-03

0 Like 0 留言 1375 瀏覽

技術 Sass 學習筆記

Variable$variablename: valuedefine all global variables in "_globals.sass...

愛看海的工程師 ‧ 2019-06-27

0 Like 0 留言 1368 瀏覽

鐵人賽自我挑戰組 DAY 19

30 天轉生到 bootstrap 5 的意識界系列第 19 篇

技術第 19 集：Bootstrap 客製化 Sass 必備知識（下）

此篇接續客製化 sass 基礎語法以及觀念下集，尚未觀看上集可以先看完再來看下集。 Operators 運算介紹 sass 原生的運算功能，以往 c...

Kent ‧ 2021-10-04

0 Like 0 留言 1266 瀏覽

鐵人賽 Modern Web DAY 17

從零開始學 - Side Project專題開發及切版實作技巧系列第 17 篇

技術 Day 17 - 開發小知識(一) : Css reset、SASS/SCSS

Day 17 - 開發小知識(一) : Css reset、SASS/SCSS 每日一談嗨，大家好 ! 我是阿蘇今天是 Day17 ，來分享再正式開發我...

阿蘇蘇 ‧ 2022-10-02 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 1251 瀏覽

技術 Sass @import DAY34

今天我們要來學習如何把Sass切分支許多檔案這樣會使我們比較容易管理 @import(匯入)可將 Scss檔案彙整成一支 css檔案簡單來說就是我們可以把 Sc...

皮傑先生 ‧ 2020-10-18

1 Like 0 留言 1110 瀏覽

技術 [Sass]造輪子-用@mixin做一個簡單的loading動畫

話不多說,先上成果! 思考迴路: 撰寫keyframes使每個點上下移動(transform),我們命名這個keyframe為waving 每個點都具備相同...

orientest99 ‧ 2020-07-08

0 Like 0 留言 1070 瀏覽

技術 Sass/Css Smacss模組化 DAY38

這裡必須先介紹為什麼我們需要模組化呢?這裡舉一個例子我們尚未模組化的css //基本按鈕 .btn{ display: inline-block; wi...

皮傑先生 ‧ 2020-10-22

1 Like 0 留言 1053 瀏覽

技術 CSS 命名基礎介紹 DAY40

今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...

皮傑先生 ‧ 2020-10-24

0 Like 0 留言 903 瀏覽

鐵人賽 Modern Web DAY 7

使用SASS(SCSS)建立自己的CSS Library 系列第 7 篇

技術 [Day 07] Sass - Project Structure

Project Structure 這篇文章我們來建立我們Sass專案的架構~ 一般Sass專案內都會有一個主要的.scss檔案，其用來負責將所有有用到的.sc...

zhix6842 ‧ 2021-09-20

技術 第 14 集：Bootstrap 客製化 Sass 原始碼架構

技術 Animation 的各項設定值(2)

技術 第 28 集：Bootstrap 客製化 component 元件樣式

技術 實戰心法 - Sass Map 快出產出大量樣式

技術 作個網站吧！Quickly Sass(4)-CSS無痛轉移Sass