0704:

SASS Documentation

SASS Online

---

$zmienna

@mixin @include tworzenie funkcji oraz jej wywołanie

@extend dołączanie selektora

& parent selector

$myFavColor: #ccc;
$tablet: 768px;
$desktop: 1024px;

@mixin borderBackground{
  border-radious: 10px;
  background: hotpink;
}

@mixin borderBackgroundParam($radious, $background) {
  border-radious: $radious;
  background: $background;
}

.font-style{
  font-size: 13px;
  color: green;
}

.main{
  color: $myFavColor;
  @include borderBackgroundParam(18, red);
  @extend .font-style;
}

.main::before{
  font-size: 20px;
  content: 'hi';
  @include borderBackground;
}

@media (min-width: $desktop){
  .main{
    color: red;
  }
}

.about{
  color: red;
}

.about__title{
  font-size: 20px;
}

.about__title--smaller{
  font-size: 16px;
}

@media (max-width: 768px){
  .about__title{
    font-size: 18px;
  }
}

.about-sass{
  color: red;
  &__title{
    font-size:20px;
    &--smaller{
      font-size: 16px;
      @media (max-width: 768px){
      font-size: 14px;
    }
    }
    @media (max-width: 768px){
      font-size: 18px;
    }
  }
}