iT邦幫忙

scss相關文章
共有 119 則文章
鐵人賽 Modern Web DAY 30

技術 #93 SASS/SCSS (12) 防呆與偵錯 @debug / @warn / @error

我們已經了解了 SASS/SCSS 的所有主要功能了,不過「我要如何確保別人(或未來的自己)不會用錯我寫的工具?」這是當 Mixin 和 Function 變得...

鐵人賽 Modern Web DAY 29

技術 #92 SASS/SCSS (11) 資料結構 Map

昨天學到的 List 是個簡單的列表,今天我們要來看看 SCSS 中的 Map,它有點像 json 資料。 假設專案裡有 5 個主要顏色、4 個斷點、6 種字體...

鐵人賽 Modern Web DAY 28

技術 #91 SASS/SCSS (10) 資料結構 List (列表)

在 SASS/SCSS 中,我們已經使用變數、Mixin 和 Function 等語法來幫我們管理 CSS Code 了,但是它還是可能會亂,例如散亂的單一變數...

鐵人賽 Modern Web DAY 27

技術 #90 SASS/SCSS (9) 函式 (Function) - 打造你自己的工具箱

我們已經一路學習了 SCSS 的變數、顏色、邏輯判斷與迴圈等等,你可能已經覺得 SCSS 非常強大了。但今天,我們要來認識 SCSS 中一個更厲害的用法:Fun...

鐵人賽 Modern Web DAY 26

技術 #89 SASS/SCSS (8) 邏輯 @if, @each, @for 與 @while

今天,我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives),它們能讓你的樣式擁有真正的「邏輯」,根據...

鐵人賽 Modern Web DAY 25

技術 #88 SASS/SCSS (7) sass:color 顏色模組——color.adjust 與 color.scale 取代舊的 lighten() 和 darken()

今天我們就來學習 SASS/SCSS 中關於顏色處理的語法:sass:color 模組,他即將取代過去 SCSS 中的 lighten() 和 darken()...

鐵人賽 Modern Web DAY 24

技術 #87 SASS/SCSS (6) 運算符號(加減乘除)

今天,我們要來探索 SCSS 中一個非常實用的功能:運算符號 (Operators),也就是加減乘除與取餘數,讓你可以在 CSS 裡面算數。 本篇同步發表於我...

鐵人賽 Modern Web DAY 23

技術 #86 SASS/SCSS (5) Extend

今天,我們要來學一個和昨天說的 @mixin 很像,但運作原理和使用情境卻截然不同的 SCSS 功能:@extend。 本篇同步發表於我的 Hashnode...

鐵人賽 Modern Web DAY 22

技術 #85 SASS/SCSS (4) Mixins @mixin & @include

好的,我們已經學會了如何用變數來管理重複的數值,以及如何用 Partials 來組織我們的檔案結構。現在,我們要來學習一個更強大的功能,解決「重複撰寫一大段樣式...

鐵人賽 Modern Web DAY 21

技術 #84 SASS/SCSS (3) 使用檔案管理樣式 Partials / Modules (@use / @import / !default)

當專案越來越大,Code 越來越多,你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡,變得很混亂。今天,我們就要來學習如何使用 Parti...

鐵人賽 Modern Web DAY 20

技術 #83 SASS/SCSS (2) 變數 Variables / 巢狀寫法 Nesting

上一篇我們已經順利設定好 SASS/SCSS 的開發環境了,這次,就讓我們正式來學習 SCSS 兩個最基本也最實用的語法:變數 (Variables) 和巢狀...

鐵人賽 Modern Web DAY 19

技術 #82 SASS/SCSS (1) 介紹與簡易環境設定

我們基本 CSS 的教學與補充新語法差不多告一個段落了,接下來,我們來學一個也很常用的 CSS 進階用法:CSS 預處理器 SASS/SCSS! 一、CSS...

技術 Day 4 SASS/SCSS 進階技巧

昨天學了SASS的基本功能(變數、巢狀),今天來看看三個實用的技巧: 1.Mixin–可重複使用的樣式組合 2.繼承(Extend)–共用現有樣式 3.運算(O...

鐵人賽 Modern Web DAY 1

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 3

參賽前言 今年是第三次參加鐵人賽,前兩年參加時共寫了 64 篇文章: Super Easy CSS,極度簡單(主要偏向 CSS 與前端基礎) Super...

技術 css 多行限定行數

常用於卡片結構中,保持每張卡片,避免內文段落有長有短,造成每張卡片高度不一致 .test { display: -webkit-box; /* 限制文本 *...

鐵人賽 JavaScript DAY 8

技術 【Day7】輔修CSS預處理器—在Vue專案加入Sass/SCSS

學完了SCSS基本語法,馬上就是現學現賣的時間!一樣叫出我們To Do List的css表重新改寫(現在回頭來看…真是慘不忍睹) 在Vue專案加入SCSS 上網...

鐵人賽 JavaScript DAY 7

技術 【Day6】輔修CSS預處理器—了解Sass/SCSS

經過這兩天的實作洗禮,發現自己卡在css上的時間遠比想像來的久。為了加速開發,今天我們來探討css預處理器—Sass,看看是否能幫我突破困境! 什麼是CSS預處...

鐵人賽 JavaScript DAY 18

技術 Day18: 響應式設計指南,Mobile First 與 Tooltip 優化

在前幾篇文章中,我們探討了如何透過動畫、SVG 操作以及 Tooltip 來提升網站的互動性和視覺效果。然而,隨著使用者透過不同裝置訪問網站,響應式設計已成為現...

鐵人賽 JavaScript DAY 16

技術 Day 16 : 打造高互動 Hero Section,運用 Framer Motion 和 i18n

在前兩篇文章中,我們深入探討了如何設計一個靈活、高效的 React 按鈕元件,還有助於在不同情境下保持一致的設計風格。今天,我們將這些按鈕設計應用到 Hero...

鐵人賽 Modern Web DAY 5
CSS的預處理器-SASS/SCSS 系列 第 5

技術 DAY 5.SASS/SCSS的巢狀規則 (Nesting)

在 SCSS 中,巢狀規則(Nesting)是讓 CSS 語法更加結構化的一個重要特性。巢狀語法允許開發者根據 HTML 的層次結構,將相關的樣式規則寫在一起,...

鐵人賽 JavaScript DAY 12

技術 Day 12: 打造 React 導航欄元件

在上一篇文章中,我們介紹了如何使用 React Router 實現頁面導航,並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天,我們將進一步學習如何從零開...

鐵人賽 JavaScript DAY 10

技術 Day 10 : Lazy Loading 優化 React 大文件加載

在應用規模增長的過程中,性能優化始終是前端工程師需要解決的重要課題。上篇文章中,我們討論了如何使用自訂日誌系統來提升應用效率。而今天,我們將進一步探討通過 La...

鐵人賽 SideProject30 DAY 29

技術 關於CSS,我想說的是… part2

Hi,昨天說到了 CSS 的使用,今天接續昨天的內容,我們要使用 SCSS 的機制現有的 CSS 架構進行調整,那麼讓我們開始吧 SCSS 是什麼呢? 昨天有稍...

鐵人賽 Modern Web
打造你的第一個網站 系列 第 31

技術 第三十一天-更進一步認識Bootstrap

寫到這裡,大家應該會發現,Bootstrap雖然方便,但是許多功能都已經寫死,導致我們無法更動一些小細節,因此我們在這裡會教大家,如何改寫Bootstrap的原...

鐵人賽 Modern Web DAY 7

技術 D6 為自己的開發鮮豔上色,先用Tailwindcss來塗上喜歡的顏色

在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時,有UI design跟design吵,自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...

技術 如何在Angular裏引用自造字(EUDC)

今天工作期間有遇到一個問題:因公司是醫療體系,所以系統裡有很多病患的名字,而人的名字就會有一些特殊的字。當時公司的解決辦法就是建了自己的造字,並一直沿用到現在,...

鐵人賽 Modern Web DAY 20

技術 Day 20 - 開發環境架設(一) : Bootstrap 核心、SCSS架構

開發環境架設(一) : Bootstrap 核心、SCSS架構 每日一談 嗨,大家好 ! 我是阿蘇到了第20天啦 ,剩下的天數都會來分享關於正式開發 Side...

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 6

技術 「全端挑戰」使用useState製作彈跳視窗、製作Calendar與各種互動介面

鐵人賽 Day6 自己做一個價值幾十萬的動態網站 第六課:實作useState與完成在SearchBar的彈跳視窗上part2 利用useState製作彈跳視窗...

鐵人賽 Modern Web DAY 5

技術 「全端挑戰」製作動態網站第一步從了解useState與它的用法開始

鐵人賽 Day5 自己做一個價值幾十萬的動態網站 第五課:了解useState與完成在SearchBar與其介面上part1 前情提要,前兩天Day3~4我們完...