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方法。