Sass 最基础的语法

把每个点最简单的部分记录一下，方便自己查找

官方文档链接

1. & 父选择器，编译后为父选择器

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
1
2
3
4
5
6

编译为

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }
1
2
3
4
5
6
7

2. : 嵌套属性

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
1
2
3
4
5
6

编译为

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }
1
2
3
4

3. $ 变量

#main {
  $width: 5em !global;  // !global：声明为全局变量，可在作用域外使用
  width: $width;
}
#sidebar {
  width: $width;
}
1
2
3
4
5
6
7

编译为

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}
1
2
3
4
5
6

3.1 数据类型

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

3.2 变量赋值

$i: 6;
$i: $i - 2;
$name: jack;
1
2
3

3.3. 数组

数组之间的元素可以用,隔开，也可以不用

margin: 10px 15px 0 0 
font-face: Helvetica, Arial, sans-serif
1
2

nth 函数可以直接访问数组中的某一项；
join 函数可以将多个数组连接在一起；
append 函数可以在数组中添加新值；
@each 指令能够遍历数组中的每一项。

3.4. map

(key1 : value1,key2 : value2)

4. 算数运算符

1. + - * /
2. > < > = <= == !=
3. /有两个作用：除法，分隔数字，具体怎么用看文档
4. +也用作字符串连接，计算结果以+左侧的字符串为准

5. #{}插值语法

5.1 可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
1
2
3
4
5

编译为

p.foo {
  border-color: blue; }
1
2

5.2 将有引号的字符串编译为无引号

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");
1
2
3
4
5
6

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }
1
2

6. @import

1. 导入的是scss文件可以只写文件名：@import ‘foo’
2. 在vue中使用一般情况：@import url(../xxxx/xxx.css)
3. 可以在嵌套进css中使用，这样引入的内容就只能在引入的局部使用

7. @media

8. @extend : 延申（感觉像继承）

属性重复，谁在后面执行谁有优先权

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
1
2
3
4
5
6
7
8

编译后

.error .seriousError{
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
1
2
3
4
5
6
7

9. 控制指令

9.1 @if @else if @else

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

编译后

p{
	color: green
}
1
2
3

9.2 @for

@for $var from through 包含start和end的值
@for $var from to 不包含start的值，包含end的值

@for $i from 1through 3 {
	.item-#{$i} { width : 2em * $i }
}
1
2
3

编译后

.item-1 { width: 2em }
.item-2 { width: 4em }
.itme-3 { width: 6em }
1
2
3

9.3 @each

@each $var in list可以是一连串的字符串、数组、map

9.3.1 遍历一维数组

@each $animal in puma, sea-slug, etret, salamander {
	.#{$animal}-icon{
		background-image: url('/images/#{$animal}.png');
	}
}
1
2
3
4
5

编译后

.puma-icon {  background-image: url('/images/puma.png'); }
.sea-slug-icon { background-image: url('/images/sea-slug-icon.png'); }
.etret-icon { background-image: url('/images/etret.png'); }
.salamander-icon { background-image: url('/images/salamander.png'); }
1
2
3
4

9.3.2 遍历map

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
1
2
3
4
5

编译后

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }
1
2
3
4
5
6

9.3.3 遍历二维数组

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
1
2
3
4
5
6
7
8
9

编译后

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }
1
2
3
4
5
6
7
8
9
10
11
12

9.4 @while

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

编译后

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }
1
2
3
4
5
6
7
8

10 @mixin 混合指令

@mixin 像定义只是存放数据的函数，但是必须用@include调用

10.1 定义样式并引用

1. 定义，（font：使用了嵌套属性）

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
1
2
3
4
5
6
7
8

2. 在语句内引用

.page-title {
  @include large-text;.
  padding: 4px;
  margin-top: 10px;
}
1
2
3
4
5

3. 编译后

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
1
2
3
4
5
6
7

• 如果在最外层调用，没有其他语句包裹

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
1
2
3
4
5
6
7

编译后

  a {
    color: blue;
    background-color: red;
  }
1
2
3
4

10.2 带参数的混合，并且有默认值

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue); }
或者
p { @include sexy-border($color: blue); }
1
2
3
4
5
6
7
8
9
10
11

编译后

p{
	border-color: blue;
	border-width: 1in;
	border-style: dashed;
}
1
2
3
4
5

11. @function 函数指令 @return 返回

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
1
2
3
4
5
6
7
8

编译为

#sidebar {
  width: 240px; }
1
2