$sqaure-width: 30%;
$sqaure-height: 15%;
$cut-y: 2%;
$cut-x: 9%;

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

%sqaure {
  display: inline-block;
  width: $sqaure-width;
  height: $sqaure-height;
  text-align: center;
  position: absolute;
  left: 50% - $sqaure-width/2;
  top: 50% - $sqaure-height/2;
}

.A {
  @extend %sqaure;
  background: yellow;
  border: solid 1px red;
  margin-top: -$cut-y;
  margin-left: -$cut-x;
}

.B {
  @extend %sqaure;
  background: white;
  border: solid 1px blue;
  margin-top: $cut-y;
  margin-left: $cut-x;
}