Sass 最基础的语法

语法"/>

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. & 父选择器，编译后为父选择器

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

编译为

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

2. : 嵌套属性

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

编译为

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

3. $ 变量

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

编译为

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

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

3.3. 数组

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

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

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

编译为

p.foo {border-color: blue; }

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

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

编译为

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

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

编译后

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

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

编译后

p{color: green
}

9.2 @for

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

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

编译后

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

9.3 @each

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

9.3.1 遍历一维数组

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

编译后

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

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

编译后

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

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

编译后

.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

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

编译后

.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }

10 @mixin 混合指令

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

10.1 定义样式并引用

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

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

2. 在语句内引用

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

3. 编译后

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

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

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

编译后

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

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

编译后

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

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

编译为

#sidebar {width: 240px; }