scss

昔憶落落發表於2019-03-06
CSS

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變數 (variables)、巢狀 (nested rules)、
混合 (mixins)、匯入 (inline imports) 等高階功能，這些擴充令 CSS 更加強大與優雅。複製程式碼

特色功能：

  • 完全相容css3
  • 在css的基礎上增加變數、巢狀、混合等功能
  • 通過函式進行顏色值與屬性值的運算
  • 提供控制指令（control directives）等高階功能
  • 自定義輸出格式

sass有兩種語法格式，首先是 SCSS（Sassy CSS），這種格式僅在css3的語法上進行擴充，同時加入了Sass的特色功能。以 .scss 作為副檔名。    

另一種是Sass語法格式，（又稱：縮排格式），是一種簡化格式，用“縮排”代替“花括號”表示屬性屬於某個選擇器，用 “換行” 代替 “分號” 分隔屬性。以 .sass 作為副檔名

Sass 允許將一套 CSS 樣式巢狀進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器。巢狀功能避免了重複輸入父選擇器，而且令複雜的 CSS 結構更易於管理：

            .solidPart {               > svg {                position: relative;                top: 2px;                .name {                  color: #ff7219;                }              }            }複製程式碼

父選擇器&

&符號代表父選擇器

a {  font-weight: bold;  text-decoration: none;  &:hover {    text-decoration: underline;  }  body.firefox & {    font-weight: normal;  }}   
// 以上&代表a選擇器複製程式碼

& 必須作為選擇器的第一個字元，其後可以跟隨字尾生成複合的選擇器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}複製程式碼

.suj {  >p {    font: {      family: fantasy;      size: 1em;      weight: bold;    }    color: red;  }}複製程式碼

變數 $ (Variables: $)

變數以$開頭，賦值方法與css屬性方法的寫法一樣（變數支援作用域）

$r: red;
.suj {  >p {    font: {      family: fantasy;      size: 1em;      weight: bold;    }    color: $r;  }}複製程式碼

SassScript 支援 6 種主要的資料型別：

  • 數字，1, 2, 13, 10px
  • 字串，有引號字串與無引號字串，"foo", 'bar', baz
  • 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布林型，true, false
  • 空值，null
  • 陣列 (list)，用空格或逗號作分隔符，如：margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif
  • maps, 相當於 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支援其他 CSS 屬性值，比如 Unicode 字符集，或 !important 宣告。然而Sass 不會特殊對待這些屬性值，一律視為無引號字串。

 數字運算 (Number Operations)

SassScript 支援數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。

字串運算 (String Operations)

+ 可用於連線字串

在有引號的文字字串中使用 #{} 插值語句可以新增動態的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}複製程式碼

 @import

Sass 擴充了 @import 的功能，允許其匯入 SCSS 或 Sass 檔案。

@import "foo.scss";
複製程式碼

或

@import "foo";
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);複製程式碼

巢狀 @import

.example {
  color: red;
}
複製程式碼

然後匯入到 #main 樣式內

#main {
  @import "example";
}複製程式碼

將會被編譯為

#main .example {
  color: red;
}複製程式碼


相關文章