CSS | 預處理器（上）- Sass

---

寫在前面

在實際項目開發中，咱們已經漸漸的不去使用原始的css,反而使用較爲方便的預處理器sass，less，也就是下文我們即將要提到的。既然是前端開發者不得不掌握的一門技術：寫樣式，即便如今是工程化 模塊化 開發，不過咱們逃不開的仍是最基礎的樣式 咱們知道常見的css預處理器 有三種：

• sass
• less
• stylus

這是一個系列篇

1. CSS | 預處理器（上）- Sass (已完成)
2. CSS | 預處理器（中）- Less (未完成)
3. CSS | 預處理器（下）- Stylus(未完成)

初識

或多或少咱們都知道sass很便捷，支持嵌套的語法

body {
  background-color: pink;
  ul {
    li {
      font-size: 20px;
    }
  }
}
複製代碼

body {
  background-color: pink;
}
body ul li {
  font-size: 20px;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

核心用法

• 變量
• 嵌套
• 混合
• 函數

準備工做

安裝

對於前端開發者來講,能夠直接在node環境安裝

npm install -g sass

 sass --version // 1.26.2 compiled with dart2js 2.7.1
複製代碼

在基於node 的環境下，直接全局安裝就能夠使用，固然在windows以及mac 平臺上又有一些差別，這裏能夠查閱官網 sass 英文官方網站

安裝完成

編譯

將style文件下的sass轉爲style下的css

sass --watch style/sass:style/css
複製代碼

├─demo.html
├─README.md
├─style
|   ├─sass
|   |  ├─demo.scss
|   |  └_base.scss
|   ├─css
|   |  ├─demo.css
|   |  └demo.css.map
複製代碼

詳細用法

變量

• 目的 ：爲了可以在樣式表中方便的訪問
• 使用：存儲顏色、字體

以$開頭

$my-color: #fff;
$my-border: 1px solid $my-color;
.box {
  background-color: $my-color;
}
h1 {
  border: $my-border;
}
複製代碼

.box {
  background-color: #fff;
}

h1 {
  border: 1px solid #fff;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

插值變量

$class: ".div" #{$class} {
  width: 200px;
}
複製代碼

嵌套

• 目的：便於維護、井井有條、可視化
• 使用：直接一層一層的嵌套

li {
  a {
    display: block;
    &:hover {
      background-color: pink;
    }
  }
  & &-text {
    font-size: 20px;
  }
}
複製代碼

li a {
  display: block;
}
li a:hover {
  background-color: pink;
}
li li-text {
  font-size: 20px;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

body {
  font: {
    family: Arial, Helvetica, sans-serif;
    size: large;
    weight: bold;
  }
  border: 1px solid red {
    radius: 20px;
    top: 20px;
  }
}
複製代碼

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  font-weight: bold;
  border: 1px solid red;
  border-radius: 20px;
  border-top: 20px;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

mixins 混合

基本使用

// 定義混入
@mixin mixinName {
  color: red;
  background-color: pink;
  a {
    color: green;
  }
}

// 使用混入
div {
  @include mixinName();
}
複製代碼

div {
  color: red;
  background-color: pink;
}
div a {
  color: green;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

帶參數

@mixin myMixin($text-color, $bgc) {
  color: $text-color;
  background-color: $bgc;
}

.box {
  @include myMixin(#fff, red);
}
.box2 {
  @include myMixin($bgc: #fff, $text-color: pink);
}
複製代碼

.box {
  color: #fff;
  background-color: red;
}

.box2 {
  color: pink;
  background-color: #fff;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

繼承

.type {
  margin: 10px;
}
.type a {
  font-weight: bold;
}

.type-info {
  @extend .type;
  font-size: 20px;
}
複製代碼

.type,
.type-info {
  margin: 10px;
}

.type a,
.type-info a {
  font-weight: bold;
}

.type-info {
  font-size: 20px;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

partials 和 @import

@import "base";
div {
  background-color: pink;
}
複製代碼

註釋

// 單行註釋

/*註釋 *多行註釋*/
複製代碼

@charset "UTF-8";
/*註釋 *多行註釋*/

/*# sourceMappingURL=demo.css.map */
複製代碼

類型

PS E:\gh-code\every-day-up\sass-less\style> sass -i
>> type-of(`yayxs`)
           ^
Error: expected ")".
>> type-of(12)
number
>> type-of(hello)
string
>> type-of(1px solid)
list
>> type-of(#fff)
color
>> type-of(red)
color
>>
複製代碼

>> (10 /2)
5
>> (10px+10px)
20px
>> 2px * 2px
4px*px
>> (4px/2px)
2
>>

複製代碼

>> abs(-10)
10
>> round(2.2)
2
>> ceil(2.3)
3
>> floor(3.6)
3
>> min(1,2,3)
min(1, 2, 3)
>> max(100,99,98)
max(100, 99, 98)
>>
複製代碼

string

>> to-lower-case('YAYXS')
"yayxs"
>> str-length('yayxs')
5
>> str-index("yayxs",yx)
3
>> str-insert("yayxs","nice",2)
"yniceayxs"
>>

複製代碼

顏色函數

body {
  background-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, 0.5);
  background-color: hsl(100%, 0, 0);
  background-color: hsla(100%, 0, 0, 0.5);
}
複製代碼

adjust-hue

$base-color: #ff0000;
body {
  background-color: adjust-hue($base-color, 138deg);
}
複製代碼

body {
  background-color: #00ff4d;
}

/*# sourceMappingURL=demo.css.map */
複製代碼

lighten

$light-color: lighten($base-color, 30%);
$dark-color: darken($base-color, 30%);

$saturate-color: saturate($base-color, 50%);
複製代碼

列表

>> length(1px solid red)
3
>> nth(5px 10px,2)
10px
>> index(1px 2px,1px)
1
>> append(1px 2px,3px)
1px 2px 3px
>>

複製代碼