Sass intro

Home » Tutorials » HTML and CSS » Sass intro
In this video we will begin to work with popular frontend tool – Sass css preprocessor. CSS preprocessors let you write “dynamic css”. In fact CSS become programming language (with variables, loops, conditions etc).
In this video we’ll install sass to our node.js project, consider using of vars, nesting, parent selectors, mixins etc.
Code lesson (_vars.scss)
$font-size: 45px;

@mixin shadow($x, $y, $blur, $border, $color) {
  box-shadow: $x $y $blur $border $color;
}
Code lesson (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 Comments

Submit a Comment

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

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

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

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

Pin It on Pinterest

Share This