تكليفات الدروس من [ 1 ] إلى [ 6 ]

.content > .box {
  padding: 15px;
}
.content > .box > .title {
  font-size: 18px;
}
.content .cat {
  padding: 15px;
}
.content.premium:before {
  content: "Premium Box";
}
.content.premium:hover {
  background-color: #eee;
}

.class > .child {
  padding: 10px;
}

.class {
  font-weight: bold;
  font-size: 20px;
}

.parent {
  & + .sibling {
    margin: auto {
      top: 10px;
    }
    & ~ .last {
      padding: 10px;
    }
  }
}

// The Code
.widget {
  background-color: white;
  padding: 20px;
}
.main-border {
  border: 1px solid #CCC
}
.my-class {
  font-weight: bold;
  margin: 20px auto;
}

// Needed Output
.widget, .my-class {
  background-color: white;
  padding: 20px;
}
.main-border, .my-class {
  border: 1px solid #CCC;
}
.my-class {
  font-weight: bold;
  margin: 20px auto;
}

// The Code
.widget {
  background-color: white;
  padding: 20px;
}
.main-border {
  border: 1px solid #CCC
}
.my-class {
  font-weight: bold;
  margin: 20px auto;
}

// Needed Output
.my-class {
  background-color: white;
  padding: 20px;
}
.my-class {
  border: 1px solid #CCC;
}
.my-class {
  font-weight: bold;
  margin: 20px auto;
}

/* Needed Output */
.box h2, .box p {
  font-size: 20px;
}
@media (max-width: 575px) {
  .box h2, .box p {
    font-size: 16px;
  }
  .box h2 span, .box p span {
    font-weight: bold;
  }
}

// The Code
// Do Not Edit Here
$red: #e91e63;
$green: #009688;

// Add What You Want Here

// Do Not Edit Here
.box a {
  color: $link-color;
  &:hover {
    color: $link-hover;
  }
}

// Needed Output
.box a {
  color: #009688;
}
.box a:hover {
  color: #e91e63;
}

// - Project_Folder
// --- Helpers
// ------ _vars.scss
// ------ _functions.scss
// --- Layout
// ------ _header.scss
// ------ _footer.scss

.box {
  font-size: 20px;
}
.box-holder {
  width: 1000px;
}
.box-holder-content {
  margin: auto;
}