sass/scss 好用的utility筆記

以往的項目大多使用quasasr framwork ，大多時候都有現成的樣式可以套用，而這次接到了一個舊的專案使用bootstrap 才明白現成的樣式有多香，是時候精進自己的css, 在這裡記錄 項目當中很有幫助的各種方法

1. 前綴套用所有display、position

項目中最常使用到的就是display、position這兩個屬性，這個方法可以幫助所有相同前綴的定位直接套用該定為不避重複一直寫，例如以下例子[class*="absoulte-"] 會在所有absoulte- 開頭的class裡面套用 position: absolute;

[class*="grid-"] {
  display: grid;
  gap: 1rem;
}


[class*="absoulte-"] {
  position: absolute;
}

absolute-bottom {
   bottom: 0
}

absolute-bottom-left {
   left: 0;
   bottom: 0;
}

2. mixin 的使用

mixin的使用減少更多的代碼重複性～

@mixin hightline-text($spacing) {
  color: red;
  letter-spacing: $spacing;
}


@mix mq ($size) {
 @media(min-width: $size) {
   @content;
 }
}

.card {

  &_body {
    @include hightline-text(6px);
  }
  @mix mq (500px) {
    padding: 1rem;
  }
}

3. map-get 創建斷點（breakpoint）

@use 'sass:map'

$breakpoints: (
 small: 40em;
 medium: 65em,
 large: 90em
)

@mixin mq($key) {
 $size: map.get($breakpoints, $key); // 聲明變量$size

 @media (min-width: $size) {
   @content;
 }
}

//使用

.card {

  &_body {
    @include hightline-text(6px);
  }
  @mix mq (small) {
    padding: 1rem;
  }
}