[Examples] SCSS

1.scss

@for $i from 1 through 10 {
  .indent#{$i} {
    @if $i > 1 {
      margin-left: 16px * ($i - 1);
    }
  }
}

.top-offers {
  margin-top: -2px;
  margin-left: 15px;
  > div {
    color: #999;
    font-size: 70%;
  }
  div + div {
    margin-top: -2px;
  }
}

.no-children {
  .category-name {
    margin-left: 17px;
  }
}

.total-offers,
.offer-name {
  + .no-offers {
    display: none;
  }
}

bootstrap-customization.scss

$table-cell-padding: 14px;
$table-bg-hover: #d5dee5;

$font-size-h3: 24px;

$grid-float-breakpoint: 0;
$screen-xs-min: 0;
$screen-xs-max: 0;
$screen-sm-min: 0;
$screen-sm-max: 0;
$screen-md-min: 0;
$screen-md-max: 0;
$screen-lg-min: 0;
$screen-lg-max: 0;

$padding-horizontal: 36px;
$popover-border-color: #fff;
$popover-fallback-border-color: #fff;

$navbar-margin-bottom: 50px;

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";

$body-bg: $body;

$link-color: $blue;
$link-hover-color: $blue;

$font-size-base: 13px;
$text-color: $dark-blue;
$headings-font-weight: bold;

$btn-default-color: $dark-blue;

$input-height-base: 44px;
$input-color: #597a96;
$input-border: #eef2f4;
$input-border-radius: 2px;
$input-border-focus: #c7d2dc;
$input-color-placeholder: #c9ced2;
.form-control {
  border-width: 2px !important;
  @include box-shadow(none !important);
}

$brand-danger: #f75956;
$state-danger-text: $brand-danger;
$state-danger-border: $brand-danger;

$text-muted: $dark-grey;
$brand-primary: $blue;

$border-radius-base: 2px;
$btn-primary-bg: $blue;
$btn-primary-border: $blue;

$btn-default-color: #fff;
$btn-default-bg: $dark-grey;
$btn-default-border: $dark-grey;

$btn-font-weight: bold;
$padding-base-vertical: 10px;
$padding-base-horizontal: 10px;

$brand-success: #5cb85c;
$alert-danger-bg: $brand-danger;
$alert-danger-text: #fff;
$alert-danger-border: $brand-danger;

$alert-success-bg: $brand-success;
$alert-success-text: #fff;
$alert-success-border: $brand-success;

$font-family-base: "Open Sans", sans-serif;

body {
  padding: 10px;
}

.container {
  max-width: none !important;
  width: 1200px !important;
  &.no-padding {
    padding-right: 0;
    padding-left: 0;
  }
}

a {
  text-decoration: underline;
  &.glyphicon {
    text-decoration: none;
    color: $text-color;
  }
  &.btn,
  &:hover,
  &:focus {
    text-decoration: none;
    outline: 0 !important;

    &.glyphicon {
      text-decoration: none;
      color: $text-color;
    }
  }
}

label {
  &.input-group {
    font-weight: normal;
    margin-bottom: 0;
  }
}

.modal {
  .modal-header {
    .close {
      margin-right: -15px;
      margin-top: -15px;
      padding: 17px 21px;
    }
  }
}

.alert {
  font-weight: bold;
}

$pagination-color: $dark-grey;
$pagination-border: transperent;
$pagination-bg: transperent;
$pagination-hover-color: transperent;
$pagination-active-bg: $dark-blue;
$pagination-active-border: $dark-grey;
$pagination-disabled-color: transperent;
$pagination-disabled-bg: transperent;
$pagination-disabled-border: transperent;

.pagination-custom.pagination {
  float: right;

  .active > a {
    @include border-radius(50%);
  }
  > li {
    > a {
      padding: 5px 10px;
    }
    &:first-child > a {
      margin-right:20px;
    }
    &:last-child > a {
      margin-left: 20px;
    }
    &:first-child > a,
    &:last-child > a {
      background-color: $dark-grey;
      color: #fff;
      @include border-radius(4px);
    }
  }
}

footer.less

@footer-height: 192px;
@footer-mobile-height: 212px;
@footer-tablet-height: 215px;
@footer-padding-bottom: 10px;
// white space between content and footer
@footer-margin-top: 20px;

// need to make fixed position for a footer
// example http://mystrd.at/modern-clean-css-sticky-footer/
html{
    min-height: 100%;
    position: relative;
}
body {
    margin-bottom: @footer-height + @footer-padding-bottom;

    // youtube video fix
    &.home {
        margin-bottom: @footer-height - @footer-padding-bottom;
    }
    @media @tablet {
        margin-bottom: @footer-tablet-height + @footer-padding-bottom;
    }
    @media @mobile {
        margin-bottom: @footer-mobile-height + @footer-padding-bottom;
    }
}

footer p{
    color: #fff;
    font-size: regular;
}

.footer-margin-top {
    height: @footer-margin-top;
}
.footer {
    padding-bottom: @footer-padding-bottom;
    height: @footer-height + @footer-padding-bottom;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    background-color: #0e343f;
    
     @media @tablet {
        height: @footer-tablet-height + @footer-padding-bottom;
    }

    @media @mobile {
        height: @footer-mobile-height + @footer-padding-bottom;
    }

    footer .category{
        font-size: @default;
        color: #26afb9;
    }

    .footer-nav {

        a {
            color: #fff;
            text-decoration: none;
            line-height: 28px;
        }

        li {
            max-width: 195px;
            @media @mobile{
                max-width: 130px;
                width: auto;
            }
        }
    }

    #copyright {
        color: #26afb9;
    }
}

footer .quote{
    font-size: 18px;
    z-index: 2;
    position: relative;
}

footer .quote span.openquote{
    color: #26afb8;
}

footer .quote span.closequote{
    color: #26afb8;
}

helper.less

/*
how to use:
<div class="if-else-block" ng-class={if:someConditions()}
    <div class="if">...</div>
    <div class="else">...</div>
</div>
reason:
sometimes it handly, and decrise angular watchers in half
*/
.if-else-inline.if > .else,
.if-else-inline > .if,
.if-else-block.if > .else,
.if-else-block > .if,
.if-else.if > .else,
.if-else > .if {
  display: none !important;
}

.if-else.if > .if {
  display: inline-block !important;
}

.if-else-block.if > .if {
  display: block !important;
}

.if-else-inline.if > .if {
  display: inline !important;
}

.text-nowrap {
  white-space: nowrap;
}

/*
  With this classes you can easily customize bootstrap, ex:
  <ul class="list-inline mb0 mt0">...</ul>
*/
.mb0 {
  margin-bottom: 0 !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.a {
  cursor: pointer;
}