1 Scss

Sass 中文网
Sass 用法指南 阮一峰
Scss 学习指南
Scss 基本使用
uniapp 添加scss全局变量、scss公共类
Scss 中的指令@import、@media、@extend 继承、@mixin、@include
Sass 函数：Sass Maps 的函数-map-get($map,$key)
Sass Maps 的函数-map-keys($map)
Scss 在线转换器

Sass 就是 css 的预处理器，Scss 是 Sass3 版本中引入的新语法特性

HBuilder 要下载 “scss/sass 编译” 插件

1.1 引入

对 uniapp 来说：

• 在 index.scss 中引入其他的 .scss 文件
• 再把 index.scss 引入 App.vue 中

/* index.scss */
@import "./xxx/1.scss";
@import "./xxx/2.scss";
@import "./xxx/3.scss";
1
2
3
4

<style lang="scss">
  @import "./xxx/yyy.scss";
style>
1
2
3
4

1.2 使用

1.2.1 变量

• !default 可以添加在变量的结尾
  • 如果变量已经被赋值，不会再被重新赋值，
  • 如果变量还没有被赋值，则会被赋予新的值。
• !global 可以将变量提升为全局变量。
  • 不到万不得已，不要用它，因为它很简单粗暴，直接破坏了作用域规则，影响全局

$side: bottom;
$font-color: #000;
$font-color: #999; !dafault;

.xxx {
  color: $font-color;
  border-#{$side}: 2px solid #999; /* 镶嵌在字符串的变量 */
}
1
2
3
4
5
6
7
8

1.2.2 嵌套

$font-color: #000;

.xxx {
  color: $font-color;
  .yyy {
    &:hover {
      color: #fff;
    }
  }
}
1
2
3
4
5
6
7
8
9
10

1.2.3 继承

通常会有两个类选择器的样式基本相同，第二个只是比第一个选择器多点样式，
原来的方案要么写两遍，要么在一个html标签上写两个选择器。

.xxx {
  @extend .yyy;
}

.yyy {
  color: #fff;
}
1
2
3
4
5
6
7

1.2.4 混入

@mixin xxx {
  color: #fff;
}

.yyy {
  @include xxx;
}
1
2
3
4
5
6
7

@mixin xxx($font-color) {
  color: $font-color;
}

.yyy {
  @include xxx(#000);
}
1
2
3
4
5
6
7

@mixin xxx($font-color: #999) {
  color: $font-color;
}

.yyy {
  @include xxx();
}

.zzz {
  @include xxx(#000);
}
1
2
3
4
5
6
7
8
9
10
11

1.2.5 条件语句

.xxx {
  @if 1==2 {
    color: #999;
  } @else if 3>5 {
    color: #666;
  } @else {
    color: #000;
  }
}
1
2
3
4
5
6
7
8
9

1.2.6 循环语句

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
1
2
3
4
5

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
1
2
3
4
5

@each $member in a, b, c, d {
  .#{$member} {
 　　background-image: url("/image/#{$member}.jpg");
  }
}
1
2
3
4
5

1.2.7 自定义函数

@function double($n) {
	@return $n * 2;
}

.xxx {
	font-size: double(20px);
}
1
2
3
4
5
6
7

1.2.8 颜色函数

 color: lighten(green, 10%); /* 表示绿色变浅10% */
 color: darken(green, 10%); /* 表示绿色加深10% */
1
2

1.2.9 媒体查询增强

媒体查询可以放在选择器里边

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
1
2
3
4
5
6

1.2.10 简写

相同前缀属性可以简写

/* css */
.large-text {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
}

/* scss */
.large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.2.11 注释

• 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
• 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
• 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
  重要注释！
*/
1
2
3