Sass 最基础的语法 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

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

官方文档链接

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`
  - 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. 算数运算符

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

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

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

导入的是scss文件可以只写文件名：@import ‘foo’
在vue中使用一般情况：@import url(../xxxx/xxx.css)
可以在嵌套进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 through 包含start和end的值
@for $var from to 不包含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可以是一连串的字符串、数组、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`

@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: defaul服务器托管网t; }
.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 定义样式并引用

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

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

在语句内引用

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

编译后

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: javaEE -13（6000字CSS入门级教程 – 2）

一：Chrome 调试工具 – 查看 CSS 属性首先打开浏览器，接着有两种方式可以打开 Chrome 调试工具直接按 F12 键鼠标右键页面 => 检查元素点开检查即可标签页含义： elements 查看标签结构 console 查看控制台 …