Scretch-1

<!-- Источник http://codepen.io/shivasurya/pen/FatiB -->

<!-- //-- В файл HTML --// -->
<div><span class="count">200</span></div>
<div><span class="count">1000</span></div>
<div><span class="count">853</span></div>
<div><span class="count">154</span></div>
<div><span class="count">10</span></div>
<div><span class="count">87</span></div>

Scretch-1

//Кнопка "Наверх"
//Документация:
//http://api.jquery.com/scrolltop/
//http://api.jquery.com/animate/
// Пример <a href="#$" id="top" style="display: none"><img src="img/up.png" alt="top"></a>

// основной оператор
$("#top").click(function () {
	$("body, html").animate({
		scrollTop: "0px"

Scretch-1

// Добавляем в _vars.sass
// color-stack
$color-stack: (group: orange, id: normal, color: #e67835), (group: orange, id: pale, color: #f8a878), (group: orange, id: dark, color: #ad490c), (group: blue, id: normal, color: #426682)

// Добавляем в _mixins.sass функцию вызова цветовых переменных
// color function
@function color($group, $shade: normal, $transparency: 1)
  @each $color in $color-stack
    $c-group: map-get($color, group)
    $c-shade: map-get($color, id)

Scretch-1

// при скролле начиная от верха страницы элемента с любым позиционированием
$(window).scroll(function() {

	if ($(this).scrollTop() > 50) {
		$('.header-home').addClass("fixo");
	} else {
		$('.header-home').removeClass("fixo");
	}
});

Scretch-1

// Это сброс выполнен в качестве sass миксина, подключать можно с помощью директывы "+" это Include в sass. Пример: "+reset"
// http://meyerweb.com/eric/tools/css/reset/

=reset
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
    margin: 0
    padding: 0
    border: 0
    font-size: 100%
    font: inherit

Scretch-1

// clearfix
// пример: @include cfx;
@mixin cfx {
	&:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

Scretch-1

{
    "show_definitions": false,
    "auto_complete": false,
    "bold_folder_labels": true,
    "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme",
    "fold_buttons": false,
    "font_size": 13,
    "highlight_line": true,
    "indent_guide_options":
    [

Scretch-1

// clearfix
// пример: @include cfx;
=cfx
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden

Scretch-1

// Посмотреть примеры анимации можно тут: https://daneden.github.io/animate.css/
* Version - 3.7.0
  
@charset "UTF-8"

@-webkit-keyframes bounce
  from,
  20%,
  53%,
  80%,

Scretch-1

/* Посмотреть примеры с названиями можно тут https://codepen.io/Mestika/pen/PwmqjZ
/* Grow
.hvr-grow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s