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
>>

复制代码