main.scss

@use "./sass/layout/_global-rules";
@use "./sass/pages/contact";
@use "./sass/variables/colors" as *;
@use "./sass//helpers/mixins" as *;
@use "./sass/helpers/functions" as *;

// variables
$alt_color: green;

.header {
  background-color: $alt_color;
}

.footer {
  $alt_color: black !global;
  background-color: $alt_color;
}

.copyright {
  background-color: $alt_color;
}

.sidebar {
  background-color: $main;
}

$max_mobile: "min-width:768px";
@media ($max_mobile) {
  .sidebar {
    display: none;
  }
}

// nesting & parent elements
.parent {
  font-size: 10px;
  .child {
    font-size: 20px;
    .grand-child {
      font-size: 30px;
    }
  }
}

.parent-one,
.parent-two {
  padding: 10px;
  .child {
    padding: 20px;
  }
}

.parent {
  > .child {
    font-size: 20px;
  }
  .test {
    font-size: 30px;
  }
  + p {
    font-size: 40px;
  }
  ~ a {
    font-size: 40px;
  }
}

.parent {
  > {
    .element-one {
      font-size: 10px;
    }
    .element-two {
      font-size: 10px;
    }
  }
  .not-direct-child {
    font-weight: bold;
  }
}

.box {
  .title {
    font-size: 20px;
  }
  .description {
    font-size: 16px;
  }
  &.red {
    background-color: red;
  }
  &.green {
    background-color: green;
  }
  &:hover {
    background-color: blue;
  }
  &:hover .title {
    font-size: 22px;
  }
  :not(&) {
    background-color: yellow;
  }
  [dir="rtl"] & {
    direction: rtl;
  }
}

// Property Declarations And Placeholder

.box {
  font-size: 10px;
  font: {
    size: 30px;
    weight: bold;
    family: Arial, sans-serif;
  }
}

// without using placeholder (use it if the element that have the shared properties exists)
.main-box {
  background-color: white;
  padding: 15px;
  border: 1px solid #ccc;
}

.ads {
  @extend .main-box;
  font-size: 20px;
  color: red;
}

.article {
  font-size: 22px;
  @extend .main-box;
  color: green;
}

// using placeholder (use it if the element that have the shared properties doesn't exist)
%main-box {
  background-color: white;
  padding: 15px;
  border: 1px solid #ccc;
}

.ads {
  @extend %main-box;
  font-size: 20px;
  color: red;
}

.article {
  font-size: 22px;
  @extend %main-box;
  color: green;
}

// Control Flow - If And Else

.box {
  width: 100px;
  height: 100px;
  background-color: red;

  @if $alt_color == red {
    background-color: blue;
  } @else if $alt_color == green {
    background-color: yellow;
  } @else {
    background-color: white;
  }
}

$theme: "dark";

.page {
  @if ($theme == "dark") {
    background-color: black;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

@if ($theme == "dark") {
  .page {
    background-color: black;
    color: white;
  }
}

$rounded: false;

.box {
  @extend %main-box;
  // if(the condition, if condition true, if condition false)
  border-radius: if(
    $rounded,
    6px,
    null
  ); // null => the border-radius won't appear
}

// Create Triangle With If And Else

$direction: "top";

.arrow-div {
  @extend %main-box;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 50px auto;
  &::before {
    content: "";
    position: absolute;
    border: 20px solid transparent;
    @if $direction == "top" {
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      border-bottom-color: red;
    } @else if $direction == "right" {
      right: -40px;
      top: 50%;
      transform: translateY(-50%);
      border-left-color: red;
    } @else if $direction == "bottom" {
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      border-top-color: red;
    } @else if $direction == "left" {
      left: -40px;
      top: 50%;
      transform: translateY(-50%);
      border-right-color: red;
    } @else {
      @error "This Direction #{$direction} Is Not Valid";
    }
  }
}

// Interpolation

$company: "falcon";
$position: "right";

.ad-#{$company}-#{unique-id()} {
  font-size: 20px;
  background-image: url("imgs/#{$company}.png");
  #{$position}: 0;
}
.ad-#{unique-id()} {
  font-weight: bold;
}

// Mixin And Include

ul.links {
  @include list-reset;
}

.circle-100 {
  @include circle(100px);
  background-color: red;
  color: white;
}

.circle-200 {
  @include circle(200px);
  background-color: red;
  color: white;
}

.center-circle {
  @include circle(400px);
  @include centering;
}

// Loop => For

@for $i from 1 through 10 {
  .class-#{$i} {
    font-size: #{$i + 10px};
  }
}

$dimensions: 0;

@for $i from 1 through 10 {
  .circle-#{100 + $dimensions} {
    width: $dimensions + 100px;
    height: $dimensions + 100px;
    border-radius: 50%;
  }
  $dimensions: $dimensions + 100;
}

// Each + Maps

$themes: red, green, blue, orange;

@each $theme in $themes {
  .#{$theme}-theme {
    .product {
      background-color: white;
      border-bottom: 2px solid $theme;
      .title {
        color: $theme;
        font-weight: bold;
      }
    }
  }
}

$socials: (
  "facebook": blue,
  "youtube": red,
  "github": black,
  "twitter": indianred,
);

@each $name, $color in $socials {
  .#{$name} {
    background-color: $color;
    color: white;
    &::before {
      content: $name;
    }
  }
}

$classes: "one" 20px red, "two" 15px green, "three" 22px blue;

@each $class, $font, $color in $classes {
  .#{$class} {
    font-size: $font;
    background-color: $color;
    color: white;
    padding: $font / 2;
  }
}

// Loop => While

$start: 1;

@while $start <= 10 {
  .width-#{$start * 100} {
    width: $start * 100px;
    height: ($start * 100px) / 2;
  }
  $start: $start + 1;
}

// Function

$width: 200px;

.element {
  width: $width;
  height: half($width);
  top: calculate(100px, 200px, 50px);
}