sass
@import
- css 原生的 @import
- 當 @import 後面的文件名是以 .css 結尾
- 當 @import 後面是 http:// 開頭的字串
- 當 @import 後面是 url() 函數
- 當 @import 後面有 media queries 時
- sass 的 @import
- 當 @import 後面沒有 .scss 或 .sass 的副檔名
- 同一個目錄下，局部檔案和非局部檔案不能重名
- _partial.html => 加入下底線為局部檔案，代表不會被編譯成 css
@mixin
-
省去重複撰寫相同 CSS 樣式的時間
-
sass 寫法
$font-size:13px
@mixin bg
background: #000
font-size: $font-size
.header
+bg
- scss 寫法
$font-size:13px
@mixin bg {
background: #000
font-size: $font-size
}
.header{
@include(bg)
}
產生出來
.header {
background: black;
font-size: 13px;
}
@extend 小心使用!!!
- 所以有 class 用到相同樣式時，都會將其合併起來
.error {
color: red;
}
.serious-error {
@extend .error;
border: 1px solid red;
}
編譯結果
.error,
.serious-error {
color: red;
}
.serious-error {
border: 1px solid red;
}
如果不想要 extend 的原型也被編譯，可以使用’%’
%error {
color: red;
}
.serious-error {
@extend %error;
border: 1px solid red;
}
編譯結果
.serious-error {
color: red;
border: 1px solid red;
}
@function
@function toRem($px){
@return ($px / $base-font-size) * 1rem ;
}
h1 {
font-size: toRem(32px);
}
常用 mixin
圖片取代文字
@mixin text-hide
white-space: nowrap
text-indent: 100%
overflow: hidden
常用 extend
clearfix
%clearfix {
&::after {
content: " ";
display: table;
clear: both;
}
}
.clearfix {
@extend %clearfix;
}
.row {
@extend %clearfix;
}
編譯結果
.clearfix::after,
.row::after {
content: " ";
display: table;
clear: both;
}
vertical-center
%vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btn {
@extend %vertical-center;
}
常用 function
hover 變深色、淺色
$primary-color: blue;
.btn {
backgroubd-color: $primary-color;
}
.btn:hover {
background-color: darken($primary-color, 15%);
}
// 或是用 lighten
編譯結果
.btn {
backgroubd-color: blue;
}
.btn:hover {
background-color: #0000b3;
}