Введение в Sass. Часть 2

Главная » Видеоуроки » HTML+CSS » Введение в Sass. Часть 2

На прошлом уроке мы начали изучение CSS препроцессора Sass. Сегодня мы рассмотрим другие возможности Sass

Код урока (_vars.scss)

$font-size: 45px;
$textSizes: 16px 24px 32px 40px;
$fluid: false;
$headingSize: ("small": 16px, "medium": 24px, "large": 30px);

@mixin shadow($x, $y, $blur, $border, $color) {
  box-shadow: $x $y $blur $border $color;
}

@mixin fontIcon($icon-name) {
  .icon-#{$icon-name} {
    color: red;
  }
}

@each $size in $textSizes {
  .heading-#{$size} {
    font-size: $size;
  }
}

@each $class, $size in $headingSize {
  .header-#{$class} {
    font-size: $size;
  }
}

@for $i from 1 to 3 {
  ul {
    li {
      &:nth-child(3n + #{$i}) {
        color: gray;
      }
    }
  }
}

$k: 1;

@while $k < 7 {
  .h-#{$k} {
    font-size: 72em / $k;
  }
  $k: $k + 1;
}

@function setContainerWidth($fluid) {
  @if ($fluid) {
    @return auto;
  } @else {
    @return 1200px;
  }
}

Код урока (style.scss)

@import "vars";

body {
  $color: #333;
  font-size: $font-size;
  color: $color;
}

p {
  //color: $yellow; error ($yellow is local var)
}

nav {

}

nav ul {

}

nav ul li a {

}

nav {
  ul {
    li {
      display: inline-block;

      a {
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

nav {
  @include shadow(0, 7px, 10px, -4px, rgba(0, 0, 0, 0.4));
}

// шаблонный селектор
%alert {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px 25px;
}

.alert {
  @extend %alert;
  &-error {
   @extend %alert;
    margin-top: 10px;
    border-color: #ff3840;
  }
}

@include fontIcon('plus');

@if($fluid) {
  .container {
    width: auto;
  }
} @else {
  .container {
    width: 1140px;
  }
}


.site-container {
  width: setContainerWidth($fluid);
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This