sass簡介

我是死肥宅發表於2018-12-09

sass簡介

註釋

使用//和 /* */進行註釋

/*
  i am comments A
*/
// i am comments B
複製程式碼

變數


// 轉譯前
$color: #ffffff
.root {
  color: $color;
}

// 轉譯後
.root {
  color: #ffffff;
}

複製程式碼

巢狀

兩種巢狀:

  • 被巢狀屬性加冒號編譯為css字首
  • 被巢狀屬性加無冒號編譯為css子屬性

// 轉譯前
$info: #ffffff;
$big: 18px;
.root {
  color: $info;
  .font: {
    size: $big;
  }
  .child {
    color: red;
  }
}

// 轉譯後
.root {
  color: #ffffff;
  .font-size: 18px;
}
.root .child {
  color: red;
}

複製程式碼

mixin

類似於js函式，便於css複用


// 轉譯前
$info: #ffffff;
@mixin title-type($selector) {
  #{$selector} {
    color: $info;
  }
}

@include title-type('.root');

//轉譯後
.root {
  color: #ffffff;
}

複製程式碼

資料型別

  • numbers (e.g. 1.2, 13, 10px)
  • strings of text, with and without quotes (e.g. "foo", 'bar', baz)
  • colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
  • booleans (e.g. true, false)
  • nulls (e.g. null)
  • lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
  • maps from one value to another (e.g. (key1: value1, key2: value2))
  • function references

操作

  • 支援的操作符：
  1. ==
  2. !=
  3. >
  4. <
  5. <=
  6. >=
  7. +
  8. -
  9. *
  10. /
  • 數字操作

如果是變數不需要新增'()',如果是number需要用'()'包裹


// 轉譯前
$big: 18px;

.root {
  font-size: $big/2;
  width: 2px/2;
  height: (2px/2);
}

// 轉譯後
.root {
  font-size: 9px;
  width: 2px/2;
  height: 1px;
}

複製程式碼

插值

可以把變數當作選擇器使用

// 轉譯前
$prefixCls: 'prefixAlert';
$big: 12px;

.#{$prefixCls} {
  color: red;
  &--title {
    font-size: #{$big}/2;
    height: $big/2;
  }
}

// 轉譯後
.prefixAlert {
  color: red;
}
.prefixAlert--title {
  font-size: 12px/2;
  height: 6px;
}

複製程式碼

!default

// 轉譯前
$content: "First content";
$content: "Second content?" !default;
$new_content: null;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

// 轉譯後
#main {
  content: "First content";
  new-content: "First time reference"; 
}

複製程式碼

@extend

繼承後對父樣式的一些操作，子樣式也會擁有

// 轉譯前
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error.intrusion {
  background-image: url("/image/hacked.png");
}

// 轉譯後
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

.error.intrusion, .intrusion.seriousError {
  background-image: url("/image/hacked.png");
}
複製程式碼

Directives and so on

這個有點複雜就不記錄了，可看官網

element原始碼中使用了sass的函式和mixin實現自動化BEM，有機會在單獨寫一篇文章介紹

tips:

  • sass有作用域，需要注意變數宣告的作用域
  • 如果開發者僅僅想要使用變數的css屬性，可以使用#{}，eg: #{$big}

相關文章