CSS模塊制作方法是一種將CSS規(guī)則組織成更小、更具可復(fù)用性的模塊的方法。傳統(tǒng)的CSS編寫方式可能會導(dǎo)致樣式表難以維護、復(fù)雜度高并且效率低下，而模塊化的CSS讓我們更容易管理樣式，并可使用模塊組合出更復(fù)雜的界面。

/*傳統(tǒng)的樣式表編寫方式*/
.header {
background: #333;
color: #fff;
padding: 20px;
}
.header h1 {
font-size: 28px;
}
/*模塊化的CSS樣式表*/
.header {
@extend .bg-black;
@extend .color-white;
@extend .padding-20;
}
.header h1 {
@extend .font-28;
}
/*CSS中常用的幾種技術(shù)*/
/*使用變量*/
$color-white: #fff;
$font-size-header: 28px;
.header {
background: #333;
color: $color-white;
padding: 20px;
}
.header h1 {
font-size: $font-size-header;
}
/*使用混入（Mixin）*/
@mixin bg-black {
background: #333;
}
@mixin color-white {
color: #fff;
}
@mixin padding-20 {
padding: 20px;
}
@mixin font-28 {
font-size: 28px;
}
.header {
@include bg-black;
@include color-white;
@include padding-20;
}
.header h1 {
@include font-28;
}
/*使用繼承（Extend）*/
.bg-black {
background: #333;
}
.color-white {
color: #fff;
}
.padding-20 {
padding: 20px;
}
.font-28 {
font-size: 28px;
}
.header {
@extend .bg-black;
@extend .color-white;
@extend .padding-20;
}
.header h1 {
@extend .font-28;
}
/*最后，我們需要將所有模塊通過@import引入到主樣式表中*/
@import "variables";
@import "mixins";
@import "extends";
@import "header";
@import "footer";

通過使用變量、混入（Mixin）和繼承（Extend）等技術(shù)，在CSS模塊化中充分利用這些工具，可以很好地組織我們的樣式，提高代碼的可讀性、可維護性和效率，并且讓開發(fā)變得更加輕松和愉快。