Введение в Sass

Главная » Видеоуроки » HTML+CSS » Введение в Sass

В этом видео мы начнем работать с очень популярным инструментом — css препроцессором Sass. CSS препроцессоры (LESS, Sass, Stylus) позволяют вам писать «динамический css». По сути CSS становится языком программирования (с переменными, циклами, условиями и пр).

В этом уроке мы установим sass в наш node.js проект, рассмотрим использование переменных, вложенности селекторов, родительских селекторов, миксин и пр.

Код урока (_vars.scss)
$font-size: 45px;

@mixin shadow($x, $y, $blur, $border, $color) {
  box-shadow: $x $y $blur $border $color;
}
Код урока (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;
  }
}

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This