cass基本语法与继承

• 变量
  语法:$ 变量名: 值
  注意:
  $ 也是变量名的一部分!
• 注释
• 数组

变量:(),(),(),…
例:$arr:(1, 值 1, 值 2),(2, 值 3, 值 4);

条件语句

if 条件
@if 变量 == 值 {样式}
if-else 条件
@if 变量 == 值 {样式}
@else{样式}
if-else if-else 条件
@if 变量 == 值 {样式}
@else if 变量 == 值{样式}
@else{样式}

循环语句

for-to 循环

@for 变量 from 数字 to 数字 {样式}
包含第一个数字, 不包含第二个数字
在选择器里使用变量时候 格式为: #{变量}
在样式中使用直接使用变量即可

for-through 循环

@for 变量 from 数字 through 数字 {样式}
包含第一个数字, 也包含第二个数字

each 循环

选择器的嵌套

后代选择器嵌套

语法: 父级 {后代 {} }

子代选择器嵌套

语法: 父级 {> 子代 {} }

连字符选择器嵌套

伪类选择器和伪元素选择器嵌套

当你需要的伪类和伪元素和选择器连接再一起的时候
使用 & 连接符操作
语法: 选择器 {&:hover {} }

群组选择器的嵌套

语法: 群组选择器 {子级 {} }
语法: 选择器 {群组选择器 {} }
语法: 群组选择器 {群组选择器 {} }

属性嵌套

前提: 可以嵌套的属性才能使用, 就是属性中带有中划线的属性
=> border-left
=> margin-left
=> padding-left
=> background-color
=> background-image
语法: 以 padding 为例
padding: 10px; 上下左右
padding: 10px 10px; 上下 左右
padding: 10px 10px 10px 10px; 上 右 下 左
padding: 10px {
left: 5px;
};

混入 / 混合器

sass 的混合器

=> 语法: @mixin 混合器名称 {}
=> 语法: @mixin 混合器名称(变量名) {}
=> 语法: @mixin 混合器名称(变量名: 默认值) {}

sass 的混合器的使用

=> 语法: @include 混合器名称;
=> 语法: @include 混合器名称(变量名: 实际值);

继承

{@extend 另一个选择器}

导入

@import“你要导入的文件名称”;
我们先回顾用函数实现 Student 的方法：

class 继承

如果用新的 class 关键字来编写 Student，可以这样写：

比较一下就可以发现，class的定义包含了构造函数 constructor 和定义在原型对象上的函数 hello()（注意没有function 关键字），这样就避免了 Student.prototype.hello = function () {...} 这样分散的代码。
最后，创建一个 Student 对象代码和前面章节完全一样：

Student派生一个 PrimaryStudent 需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过 extends 来实现：

注意 PrimaryStudent 的定义也是 class 关键字实现的，而 extends 则表示原型链对象来自 Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent 需要 name 和grade两个参数，并且需要通过 super(name) 来调用父类的构造函数，否则父类的 name 属性无法正常初始化。

PrimaryStudent已经自动获得了父类 Student 的hello方法，我们又在子类中定义了新的 myGrade 方法。