YehYeh 記事本2.0

Version 0.8.3

竹科碼農的記事本

Sass

Sass特性

  • 不需加大括號

  • 結尾不需加分號

  • 巢狀

  • 註解://

  • 父選擇器: &

.class
  color: red
  background-color: GreenYellow

  .subClass         // .class .subClass  => class底下，具有subClass的子孫元素
    color: blue

    &:hover         // .class .subClass:hover
      color: red

  & subClass        // .class .subClass  => 同上, class底下，具有subClass的子孫元素
    color: green

  &.class2        // .class.class2   => 同時具有2個class
    color: red

  &:hover           // .class:hover
    color: blue

  > .subElement     // 子元素選擇器(不含孫元素)
    color: blue
  
  + .nextOneElement  // 同層第1相鄰元素選擇器(選擇第1個相鄰的元素)
    color: blue

  ~ .nextAllElement // 同層第全部元素選擇器(選擇第1個相鄰的元素)
    color blue

``

變數

  • 以$開頭宣告及使用變數
  • 變數有作用域，只能在宣告變數的同層級或子孫層級使用變數
$bgColor: lightYellow

.div
  background-color: $bgColor

$bigMargin: 10px 20px
$smallMargin: 5px 10px

div
  margin: $bigMargin

span
  margin: $smallMargin

$bigMargin: 10px
$smallMargin: 5px

div
  margin: $bigMargin $bigMargin*2

span
  margin: $smallMargin $smallMargin*2

mixin

mixin常用來管理顏色、字型、大小、media

// 定義 mixin
@mixin color
  color: blue
  font-weight: bold

.class2, .class4
  +color    // 使用mixin

Pug

帶參數mixin

  • 語法: @mixin 名字($變數1)
  • 語法: @mixin 名字($變數1, $變數2)
  • 語法: @mixin 名字($變數1:預設值)
// 定義 mixin
@mixin color($color)
  color: $color
  font-weight: bold

.class2, .class4
  +color    // 使用mixin

// 定義 mixin
@mixin color($color)
  color: $color
  font-weight: bold

  &.big
    font-size: 20px
  
  &.middle
    font-size: 14px
  
  &.small
    font-size: 10px

上一層元素 &

@mixin color
  color: blue
  font-weight: bold
  &:hover
    background-color: yellow

陣列

  • 格式: (元素1, 元素2)
$colors: (red, black)

if

$bodyColor: nth($colors,random(5))
  $ribbonColor: nth($colors,random(5))
  // 如果ribbonColor顏色和bodyColor顏色相同，重新產生ribbonColor
  @if ($ribbonColor==$bodyColor)
    $ribbonColor: nth($colors,random(5))

回圈

  • #: 前計算

    • 格式: #{前計算的內容}

    • EX: #{$i}

    • EX: +size(#{$size}px)

    • EX:

      • 錯誤寫法: $sizepx
      • 正確寫法: #{$size}px
@for $i from 1 through 50
  $size: random(50)+50
  $rotateDeg: random(20)-10
  $bodyColor: nth($colors,random(5))
  $ribbonColor: nth($colors,random(5))

  @if ($ribbonColor==$bodyColor)
    $ribbonColor: nth($colors,random(5))
  .present#{$i}
    +present(#{$size}px,$bodyColor,$ribbonColor,#{$rotateDeg}deg)

SASS 內建模組

  • width: calc(100% + 10px)
  • nth(陣列, 第n個)
    • color : nth($colors, 3)
    • color : nth($colors, random(10)) : $color中隨機第1~10個元素

顏色模組

  • random(MaxValue)
    • EX: random(10) : 產生數字0~10
    • EX: random(10)+10 : 產生數字10~20
  • color:scale() : 用百分比縮放color
    • 格式: color.scale($color,$red: null, $green: null, $blue: null, $saturation: null, $lightness: null, $alpha: null)
      • $color: 要縮放的顏色
      • $red: 紅色的百分比(0%~100%)
      • $green: 綠色的百分比(0%~100%)
      • $blue: 藍色的百分比(0%~100%)
      • $saturation: 飽和度的百分比(0%~100%)
      • $lightness: 亮度百分比(0%~100%)
      • $alpha: 透明度百分比(0%~100%)
      • 回傳值: color
    • color.scale()是以目前顏色的值去縮放指定的百分比
      • 亮度值增加 : $lightness:50% = 原本的亮度值 + (最大亮度 - 目前亮度) * 50%
      • 可以用color.lightness($color)查顏色的亮度值
  • color:adjust() : 用固定值增減color
    • 格式: color.adjust($color, $red: null, $green: null, $blue: null,$hue: null, $saturation: null, $lightness: null,$alpha: null)
      • $red: 無單位數字 -255 ~ 255
      • $green: 無單位數字 -255 ~ 255
      • $blue: 無單位數字 -255 ~ 255
      • $hue: 無單位或單位為deg數字 -360deg ~ 360deg
      • $saturation: -100% ~100%
      • $lightness: -100% ~100%
      • $alpha: 無單位數字 -1 ~ 1
    • EX: color.adjust(#d2e1dd, $red: -10, $blue: 10) // #c8e1e7
  • color:change() : 修改$color的一個或多個屬性，回傳修改後的新顏色
    • RGB和HSL屬性的值不能同時設定
      • $red: 無單位數字 -255 ~ 255
      • $green: 無單位數字 -255 ~ 255
      • $blue: 無單位數字 -255 ~ 255
      • $hue: 無單位或單位為deg數字 -360deg ~ 360deg
      • $saturation: -100% ~100%
      • $lightness: -100% ~100%
      • $alpha: 無單位數字 -1 ~ 1
    • EX:
      • color.change(#d2e1dd, $red: 100, $blue: 50) // #64e132
      • color.change(#998099, $lightness: 30%, $alpha: 0.5) // rgba(85, 68, 85, 0.5)
  • lighten($color, $amount), darken($color, $amount) 已不建議使用
    • lighten(), darken()只會增滅顏色的灰度，常和預期的結果不符
    • 調整顏色可以改用: color.scale()
      • color.scale($color, $lightness: +30%)
      • color.scale($color, $lightness: -30%)
    • 要增減灰度可以改用 color.adjust()
      • color.adjust($color, $lightness: +30%)
      • color.adjust($color, $lightness: -30%)

導入 @import

Sass的@import和CSS的不同，CSS是在要使用@import時再發出一個HTTP Request去抓檔，而Sass則是在預編譯時，就將檔案併入產生的css檔中

  • 格式: @import 檔名
    • 檔名不需加附檔名.sass
@import reset

html
  margin: 0
  padding: 0

參考

Last updated on 2020-04-11
Published on 2020-04-11
Edit on GitHub