Sass 最基础的语法

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

Sass 笔记

[1. `&` 父选择器，编译后为父选择器](#1. & 父选择器，编译后为父选择器)
[2. `:` 嵌套属性](#2. : 嵌套属性)
[3. ` $\` 变量](#3. `$ ` 变量)
- [3.1 数据类型](#3.1 数据类型)
- [3.2 变量赋值](#3.2 变量赋值)
- [3.3. 数组](#3.3. 数组)
- [3.4. map](#3.4. map)
[4. 算数运算符](#4. 算数运算符)
5. `#{}`插值语法
- [5.1 可以在选择器或属性名中使用变量](#5.1 可以在选择器或属性名中使用变量)
- [5.2 将有引号的字符串编译为无引号](#5.2 将有引号的字符串编译为无引号)
[6. @import](#6. @import)
[7. @media](#7. @media)
[8. @extend : 延申（感觉像继承）](#8. @extend : 延申（感觉像继承）)
[9. 控制指令](#9. 控制指令)
- [9.1 `@if` `@else if` `@else`](#9.1 @if @else if @else)
- [9.2 `@for`](#9.2 @for)
- [9.3 `@each`](#9.3 @each)
- - [9.3.1 遍历一维数组](#9.3.1 遍历一维数组)
  - [9.3.2 遍历`map<key : value>`](#9.3.2 遍历map<key : value>)
  - [9.3.3 遍历二维数组](#9.3.3 遍历二维数组)
- [9.4 `@while`](#9.4 @while)
[10 @mixin 混合指令](#10 @mixin 混合指令)
- [10.1 定义样式并引用](#10.1 定义样式并引用)
- [10.2 带参数的混合，并且有默认值](#10.2 带参数的混合，并且有默认值)
[11. `@function` 函数指令 `@return` 返回](#11. @function 函数指令 @return 返回)

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

css 复制代码

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

css 复制代码

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

2. `:` 嵌套属性

css 复制代码

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

css 复制代码

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

3. `$` 变量

css 复制代码

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

编译为

css 复制代码

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

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 变量赋值

css 复制代码

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

3.3. 数组

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

css 复制代码

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

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

3.4. map

(key1 : value1,key2 : value2)

4. 算数运算符

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

`+`左侧	`+`右侧	连接后
有引号	有引号	有引号
无引号	无引号	无引号
有引号	无引号	有引号
无引号	有引号	无引号

5. `#{}`插值语法

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

css 复制代码

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

css 复制代码

p.foo {
  border-color: blue; }

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

css 复制代码

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

编译为

css 复制代码

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

6. @import

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

7. @media

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

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

css 复制代码

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后

css 复制代码

.error .seriousError{
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

9. 控制指令

9.1 `@if` `@else if` `@else`

css 复制代码

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译后

css 复制代码

p{
	color: green
}

9.2 `@for`

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

css 复制代码

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

编译后

css 复制代码

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

9.3 `@each`

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

9.3.1 遍历一维数组

css 复制代码

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

编译后

css 复制代码

.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'); }

9.3.2 遍历`map<key : value>`

css 复制代码

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

编译后

css 复制代码

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

9.3.3 遍历二维数组

css 复制代码

@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;
  }
}

编译后

css 复制代码

.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; }

9.4 `@while`

css 复制代码

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

编译后

css 复制代码

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

10 @mixin 混合指令

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

10.1 定义样式并引用

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

css 复制代码

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

在语句内引用

css 复制代码

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

编译后

css 复制代码

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

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

css 复制代码

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译后

html 复制代码

  a {
    color: blue;
    background-color: red;
  }

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

css 复制代码

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

p { @include sexy-border(blue); }
或者
p { @include sexy-border($color: blue); }

编译后

css 复制代码

p{
	border-color: blue;
	border-width: 1in;
	border-style: dashed;
}

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

css 复制代码

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

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

#sidebar { width: grid-width(5); }

编译为

css 复制代码

#sidebar {
  width: 240px; }

Sass 最基础的语法

Sass 笔记

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

2. : 嵌套属性

3. $ 变量

3.1 数据类型

3.2 变量赋值

3.3. 数组

3.4. map

4. 算数运算符

5. #{}插值语法

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

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

6. @import

7. @media

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

9. 控制指令

9.1 @if @else if @else

9.2 @for

9.3 @each

9.3.1 遍历一维数组

9.3.2 遍历map<key : value>

9.3.3 遍历二维数组

9.4 @while

10 @mixin 混合指令

10.1 定义样式并引用

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

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

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

2. `:` 嵌套属性

3. `$` 变量

5. `#{}`插值语法

9.1 `@if` `@else if` `@else`

9.2 `@for`

9.3 `@each`

9.3.2 遍历`map<key : value>`

9.4 `@while`

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