scss 有和没有@extend函数

Posted 2021-05-17

.btn-hot:link {
  padding: 10px; 
  display: inline-block;
  text-align:center;
  border-radius: 100px;
  text-decoration: none;
  text-transform: uppercase;
  width: $width-button;
  color:$color-text-light;
}

.btn-main {
  &:link {
    background-color:$color-2;
  }
  &:hover {
    background-color:darken($color-2, 5%);
  }
}

.btn-hot {
  &:link {
    background-color:$color-3;
  }
  &:hover {
    background-color:darken($color-3, 5%);
  }
}

// to avoid dont repeat your self way use @extend function see the example below
// only use @extend function if the elemen are ralted to each other

%btn-placeholder {
 	padding: 10px; 
  display: inline-block;
  text-align:center;
  border-radius: 100px;
  text-decoration: none;
  text-transform: uppercase;
  width: $width-button;
  color:$color-text-light;
}

.btn-main {
  &:link {
	@extend %btn-placeholder;
    background-color:$color-2;
  }
  &:hover {
	@extend %btn-placeholder;
    background-color:darken($color-2, 5%);
  }
}