本文主要在vue中演示，scss的基本使用。安裝命令

npm install sass sass-loader --save-dev

變量

SCSS 支持變量，可將常用的值（如顏色、字體大小、間距等）定義為變量，方便重復使用和統一修改。

<template><div><div class="box">11111</div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 變量
$title-color:blue;
$text-font:30px;
.box{width: 200px;height: 200px; //使用$title-color變量給邊框設置顏色border: 1px solid $title-color; //使用$text-font變量設置文字大小font-size: $text-font;
}</style>>

嵌套規則?

scss支持嵌套規則，代碼結構更符合html的嵌套邏輯

<template><div><div class="box2"><div class="title">this is title</div></div><div class="title">this is title2</div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 變量
$title-color:blue;
$text-font:30px;// 嵌套規則
.box2{width: 200px;height: 200px;border: 1px solid $title-color;font-size: $text-font;.title{color: $title-color;}
//這里嵌套規則相當于css的 .box2 .title
}.title{color: red;}
</style>>

計算?

<template><div><div class="box3">這是一段文字aaaaaaaaaaa</div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 變量
$title-color:blue;
$text-font:30px;
$pad-value:10px;.box3{// fit-content 元素寬度由內容撐開，在實際開發中注意瀏覽器兼容性width: fit-content;border: 1px solid $title-color;// scss支持計算 這里使用了變量$pad-value,// 效果等同于 padding: (10px * 2);padding: ($pad-value * 2);
}</style>>

繼承?

<template><div><div class="box4">繼承樣式</div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 變量
$title-color:blue;
$text-font:30px;
$pad-value:10px;
$normal-width:200px;
$noraml-height:100px;
.box4{width: $normal-width;height: $noraml-height;//繼承 extendStyle類目的樣式，extendStyle中的樣式都會應用到box4類目上@extend .extendStyle;
}
.extendStyle{color: rgb(24, 211, 33); //該值即為頁面上文字的綠色border: 1px solid $title-color;font-size: 50px;padding: 20px;font-weight: 700;
}</style>>

?混合器

混合器（Mixins）是 SCSS 中一種非常強大的特性，它允許定義一組樣式，然后在多個地方重復使用這些樣式。可以把它想象成一個函數，這個函數封裝了一系列的 CSS 規則，并且可以接受參數，這樣在調用時可以根據不同的需求傳入不同的值，從而實現樣式的靈活復用。

<template><div><div class="box5">混合器</div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 變量
$title-color:blue;
$text-font:30px;
$pad-value:10px;
$normal-width:200px;
$noraml-height:100px;
// 無參數混合器
@mixin radiu-color{border: 2px solid red;border-radius: 10px;
}
// 有參數混合器
@mixin set-bgc($col){background-color: $col;
}
.box5{// 設置邊框和圓角@include radiu-color();// 設置背景顏色為紫色@include set-bgc(purple);padding: 20px;color: orchid ;width: 100px;
}</style>>

導入

在大型項目中，CSS 代碼可能會變得非常龐大和復雜，為了更好地組織和管理這些代碼，SCSS 提供了 `@import` 指令，允許你將多個 SCSS 文件導入到一個主文件中。這樣可以將不同功能的樣式代碼分離到不同的文件中，提高代碼的可維護性和可讀性。

這里創建四個scss文件，_button.scss，_mixin.scss，_variable.scss，main.scss

//_variable.scss 用來存放變量
$title-color:blue;
$text-font:30px;
$pad-value:10px;
$normal-width:200px;
$noraml-height:100px;
$primary-color:rgb(243, 167, 25);

//_mixin.scss 用來存放混合器
// 無參數混合器
@mixin radiu-color{border: 2px solid red;border-radius: 10px;
}
// 有參數混合器
@mixin set-bgc($col){background-color: $col;
}

//_button.scss  封裝按鈕樣式
@import '_variable';// 使用變量和混合器
.button {@include radiu-color;background-color: $primary-color;color: white;padding: 10px 20px;border: none;}

//main.scss 中導入
// 導入變量文件
@import '_variable';
// 導入混合器文件
@import '_mixin';
// 導入按鈕樣式文件
@import '_button';

在組件中使用

<template><div class="box">import導入<!-- 這里的類名button 就是 _button.scss中封裝的樣式 --><button class="button">按鈕</button></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 導入
@import '@/css/main.scss';.box{// 驗證是否生效width:$normal-width;color: $title-color;}
</style>

end?

如有誤歡迎指正