scss

变量

全局变量和局部变量
index.scss
$width:100px; // 全局变量
div{
  width:$width;
}
p{
  $width:200px; // 局部变量（并非对全局变量进行修改，该值只是在此代码块里面进行生效）
  width: $width;
  color: #fff;
}
a{
  height: 200px;
  width: $width;
}
// 编译后的index.css
div {
  width: 100px;
}
p {
  width: 200px;	//只有此处的
  color: #fff;
}
a {
  height: 200px;
  width: 100px;	
  /** (此处的值任然为100px,
  *可以说明在上一个代码块中的值并未对全局变量进行小修改)
  **/
}

引用父级选择器

.point{
  width: 300px;
  &-list{
    width: 25%;
  }
}
//编译后
.point {
  width: 300px;
}
.point-list {
  width: 25%;
}

属性嵌套

.scss
.font {
  font: {
    family: "Times New Roman",Georgia,Serif;
    size: 14px;
    weight: 600;
  }
}
.css
.font {
  font-family: "Times New Roman",Georgia,Serif;
  font-size: 14px;
  font-weight: 600;
}

mixin

@mixin flex-cen-cen {
  display: flex;
  align-items: center;
  justify-content: center;
}
@mixin btn-fixed-bottom ($width: 100%, $height: 100%){
  width: $width;
  height: $height;
  @include flex-cen-cen; // 可多次使用
  font-size: 32rpx;
  background-color: #000;
  color: #999;
}
@mixin member(){ 
 // 可在声明的时候不加括号，调用的时候家括号（不能带参数）
 // 可在声明的时候加括号，调用的时候不加（不能带参数）
  background-color: #fff;
}
@mixin flex {
  display: flex;
}
.font {
  @include flex;
  @include member();
  font: {
    family: "Times New Roman",Georgia,Serif;
    size: 14px;
    weight: 600;
  }
}
.point{
  @include btn-fixed-bottom(); // 可以不加括号
  &-list{
    @include btn-fixed-bottom(20px, 30px); // 可以不加括号
  }
}
// 编译后
.font {
  display: flex;
  background-color: #fff;
  font-family: "Times New Roman",Georgia,Serif;
  font-size: 14px;
  font-weight: 600;
}
.point {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  background-color: #000;
  color: #999;
}
.point-list {
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  background-color: #000;
  color: #999;
}

mixin 调用方式2

// 两种方式都可以
@mixin btn-fixed-bottom ($width: 100%, $height: 100%){
  width: $width;
  height: $height;
  @include flex-cen-cen;
  font-size: 32rpx;
  background-color: #000;
  color: #999;
}
.point{
  @include btn-fixed-bottom; //有默认值可以不用大括号调用，可以不传参数
  &-list{
    @include btn-fixed-bottom(20px, 30px); // 可传参覆盖默认设置
  }
}
.point {
  width: 100%;
  height: 100%;
}
.point-list {
  width: 20px;
  height: 30px;
}

mixin 带选择器

// 两种方式都可以
@mixin membername ($color: #50cad0){
  height: 90rpx;
  &__text{
    padding: 0 20rpx;
    font-size: 30rpx;
  }
}
.hot{
  margin-top: 20rpx;
  @include membername(#eb658e);
}
// 编译后
.hot {
  margin-top: 20rpx;
  height: 90rpx;
}
.hot__text {
  padding: 0 20rpx;
  font-size: 30rpx;
}

不完全传参1

// 两种方式都可以
@mixin btn-fixed-bottom ($width: 100px, $height: 200px){
  width: $width;
  height: $height;
}
.point{
  @include btn-fixed-bottom;
  &-list{
    @include btn-fixed-bottom(30px); 
  }
}
// 编译后
.point {
  width: 100px;
  height: 200px;
}
.point-list {
  width: 30px;
  height: 200px;
}

不完全传参2

// 两种方式都可以
@mixin btn-fixed-bottom ($width: 100px, $height: 200px){
  width: $width;
  height: $height;
}
.point{
  @include btn-fixed-bottom;
  &-list{
    @include btn-fixed-bottom(30px); 
  }
}
// 编译后
.point {
  width: 100px;
  height: 200px;
}
.point-list {
  width: 30px;
  height: 200px;
}

错误的调用方式1

//   变量未定义
@mixin btn-fixed-bottom (){
  width: $width;
  height: $height;
}
.point{
  @include btn-fixed-bottom;
  &-list{
    @include btn-fixed-bottom(20px, 30px);
  }
}
// 参数数量错误
@mixin btn-fixed-bottom (){
  width: 100px;
  height: 200px;
}
.point{
  @include btn-fixed-bottom;
  &-list{
    @include btn-fixed-bottom(20px, 30px);
  }
}

错误的调用方式2

@mixin btn-fixed-bottom {
  width: 600px;
  height: 200px;
}
.point{
  @include btn-fixed-bottom(30px);
}

错误的调用方式3

@mixin btn-fixed-bottom {
  width: 600px;
  height: 200px;
}
.point{
  @include btn-fixed-bottom( $height: 30px);
}

@extend （与@mixin的方式不同)

.a {
  border: 1px solid #f00;
  background-color: #fdd;
}
.b {
  @extend .a;
  height: 20px;
}
//
.a, .b {
  border: 1px solid #f00;
  background-color: #fdd;
}
.b {
  height: 20px;
}