iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
自我挑戰組

Web Franework -SASS/SCSS系列 第 13

Day 13 - SASS模塊化設計1

  • 分享至 

  • xImage
  •  

#SASS模塊化設計
在開發大型網站或應用程式時,SASS 提供了一種非常有效的方式來組織和管理樣式代碼,叫做模塊化設計。過將樣式拆分成多個小文件,我們能夠讓代碼更清晰、更有條理,同時提高可維護性。今天我們將介紹如何使用 SASS 進行模塊化設計。

1.拆分樣式文件
模塊化設計的第一步是將不同類型的樣式拆分成獨立的文件。例如,將變數、混合、基礎樣式、佈局樣式等分開。這樣做不僅能讓樣式文件保持簡潔,還能方便其他開發人員快速找到所需的樣式。

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-large: 1.5rem;

@mixin flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    @include flex-center;
    background-color: primary-color;
    font-size: $font-size-largr;
}

今天狀態不佳,明天接續。
加油!!!


上一篇
Day 12 - CSS的壓縮技術2
下一篇
Day 14 - SASS模塊化設計2
系列文
Web Franework -SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言