eggheadio-projects/SassyEgghead: null

node_modules/
.idea
.DS_Store
npm-debug.log

# Intro to SCSS

This repository supports the [egghead](https://egghead.io/) course on SCSS.

.container {
  border: 2px solid red;
  margin: 0.5rem auto;
  font-size: 2rem;
  transition: background-color 1s, width 1s;
}

.logo {
  height: 250px;
  width: 250px;
  margin: 0.5rem auto;
}

.wonder-woman-logo {
  background-image: url("../images/wonder-woman-logo.gif");
}

.spiderman-logo {
  background-image: url("../images/spiderman-logo.gif");
}

.batman-logo {
  background-image: url("../images/batman-logo.gif");
}

.superman-logo {
  background-image: url("../images/superman-logo.gif");
}

@media only screen and (min-width: 375px) {
  .container-width {
    width: 250px;
  }
}

@media only screen and (min-width: 768px) {
  .container-width {
    width: 500px;
  }
}

@media only screen and (min-width: 1200px) {
  .container-width {
    width: 750px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 768px) {
  .wonder-woman {
    background-color: crimson;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
  .spiderman {
    background-color: darkred;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .batman {
    background-color: grey;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .superman {
    background-color: blue;
  }
}

.stuff {
  font-size: 29.0304px;
}

.things {
  font-size: 20.16px;
}

h1 {
  font-size: 159.46875px;
}

h2 {
  font-size: 106.3125px;
}

h3 {
  font-size: 70.875px;
}

h4 {
  font-size: 47.25px;
}

h5 {
  font-size: 31.5px;
}

h6 {
  font-size: 21px;
}

.cool {
  color: rebeccapurple;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SassyEgghead</title>
    <link rel="stylesheet" href="css/main.css">
</head>
    <body>
        <div class="container container-width wonder-woman">
            <div class="logo wonder-woman-logo"></div>
        </div>
        <div class="container container-width spiderman">
            <div class="logo spiderman-logo"></div>
        </div>
        <div class="container container-width batman">
            <div class="logo batman-logo"></div>
        </div>
        <div class="container container-width superman">
            <div class="logo superman-logo"></div>
        </div>
    </body>
</html>

{
  "name": "Sassy-Egghead",
  "version": "0.0.1",
  "description": "Learn the Best and Most Useful SCSS Egghead Course Repo",
  "devDependencies": {
    "node-sass": "^3.11.2"
  },
  "scripts": {
    "start": "node-sass -o css scss --output-style expanded"
  },
  "author": "Ari Picker",
  "license": "UNLICENSED"
}

@function font-scale($exponent, $base-font-size: 14px, $ratio: 1.2) {
    $value: 1;

    @for $i from 1 through $exponent {
        $value: $value * $ratio;
    }

    @return if($exponent > 0, $base-font-size * $value, $base-font-size);
}

.stuff { font-size: font-scale(4); }
.things { font-size: font-scale(2); }

@for $i from 1 through 6 {
    $exponent: 7 - $i;

    h#{$i} { font-size: font-scale($exponent, $ratio: 1.5); }
}

$base-color: #a83b24;
$light-color: lighten($base-color, 20%);
$dark-color: darken($base-color, 35%);

.old-light-dark {
  background-image: linear-gradient($light-color, $base-color, $dark-color);
}

$light-color: scale_color($base-color, $alpha: -50%);
$dark-color: scale_color($base-color, $saturation: -35%);

$cbc: complement($base-color);
$clc: complement($light-color);
$cdc: complement($dark-color);

.wolverine {
  text-align: center;
  background-image: linear-gradient($light-color, $base-color, $dark-color);

  &:hover {
    background-image: linear-gradient($clc, $cbc, $cdc);
    .wolverine-text {
      color: transparentize(mix($base-color, yellow, 25%), .2);
    }
  }

  &-text {
    font-size: 1.5rem;
    padding-bottom: 1rem;
    color: mix($base-color, yellow, 75%);
  }

  img {
    margin-top: 3rem;
    border-radius: 50%;
  }
}

%hero .stuff { background: linear-gradient(red, white, blue); }
%villain { background: darkred; }

@mixin character($type: hero) {
  height: 20px;
  width: 20px;

  @extend %#{$type};

  @content;
}

.doc-ock {
  @include character(villain){
    border: 1px solid green;
  };
}
.cheetah { @include character(villain); }
.enchantress { @include character(villain); }

.captain-america { @include character; }
.medusa { @include character(hero); }
.she-hulk { @include character(hero); }

@mixin make-transitions($transitions...) {
  transition: $transitions;
}

@media screen and (min-width: 800px) {
  %buddy { color: purple; }
}

@media screen and (min-width: 800px) {
  .buddy {
    @extend %buddy;
  }
}

.container {
  border: 2px solid red;
  margin: 0.5rem auto;
  font-size: 2rem;
  transition: background-color 1s, width 1s;
}

.logo {
  height: 250px;
  width: 250px;
  margin: 0.5rem auto;
}

$superheroes: wonder-woman, spiderman, batman, superman;
@each $hero in $superheroes {
  .#{$hero}-logo {
    background-image: url("../images/#{$hero}-logo.gif");
  }
}

$breakpoints: (sm: 375px, md: 768px, lg: 1200px);
$container-widths: (sm: 250px, md: 500px, lg: 750px);
@each $size, $bp in $breakpoints {
  @media only screen and (min-width: $bp) {
    .container-width { width: map-get($container-widths, $size); }
  }
}

$hero-media:  (1 375px 768px crimson),
              (2 768px 1000px darkred),
              (3 1200px 1400px grey),
              (4 768px 1200px blue);

@each $i, $bp-start, $bp-end, $color in $hero-media {
  @media only screen and (min-width: $bp-start) and (max-width: $bp-end) {
    .#{nth($superheroes, $i)} { background-color: $color; }
  }
}

  @for $i from 1 through 10 {
    .col-#{$i} {
      width: 100% / $i;
    }
  }
/////////////////////////////////////

  @for $i from 1 through 10 {
    $value: 0.5 * $i;

    [class~="mt-#{$value}"] {
      margin-top: #{$value}rem;
    }
  }

/////////////////////////////////////

@mixin light-color-class($color, $color-name, $i) {
  $color-value: if($i == 1, $color, lighten($color, 3% * $i));

  .#{$color-name}#{$i} {
    color: $color-value;
  }
}

@for $i from 1 through 10 {
  @include light-color-class(#BA0000, passion, $i);
  @include light-color-class(rebeccapurple, empathy, $i);
  @include light-color-class(blue, cool-kid, $i);
}

@import "@function-directive/@function-directive";

.character {
  text-align: center;
  width: 15rem;
  display: inline-block;
  margin: 0.5rem;

  p {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
  }

  img {
    margin-top: 1rem;
    border-radius: 25%;
  }
}

@mixin make-transitions($transitions...) { transition: $transitions; }

@mixin make-character($base-color: #a83b24, $mix-color: #fffaa6, $border: null) {
  $light-color: lighten($base-color, 20%);
  $dark-color: darken($base-color, 35%);
  $cbc: complement($base-color);
  $clc: complement($light-color);
  $cdc: complement($dark-color);

  background-image: linear-gradient($light-color, $base-color, $dark-color);
  border: $border;

  &:hover { background-image: linear-gradient($clc, $cbc, $cdc); }
  &:hover &-text { color: transparentize(mix($base-color, $mix-color, 25%), .2); }

  &-text {
    color: mix($base-color, $mix-color, 75%);
  }

  img { @content; }
}

@mixin media($min-width) {
  @media screen and (min-width: $min-width) { @content; }
}

.wolverine {
  @include make-character($border: 5px solid brown, $mix-color: pink) {
    @include make-transitions(margin 1s, border-radius 1s, border 1s, transform 1s);

    &:hover {
      margin-top: 5rem;
      border-radius: 50%;
      border: 10px solid green;
      transform: rotate3d(10, 0, 0, 360deg);
    }
  };
}

.rogue { @include make-character(#0ab36d, #FFFE8A, 5px solid green); }
.firestar { @include make-character(#DB233B, #e3fd00); }

.nightcrawler {
  @include make-character(#1d6098, #ffcef9) {
    @include media(800px) { content: url("../images/bamf.jpg"); }
  };
}

.spiderman {
  padding: 1rem 2rem;
  transition: transform .8s ease-in-out;

  &-container:hover & { transform: rotate(180deg); }
  &-container { background-color: #dbbebe; }

  &::before {
    display: block;
    content: url('http://gallery1.anivide.com/_full/80728_1442526786.gif');
  }

  img {
    transition: transform .8s ease-in-out;
    &:hover { transform: rotate(360deg); }
  }

  .description {
    color: darkred;
    text-align: center;
    margin-top: 1rem;

    .header { font-size: 2rem; }
  }

  .description-link {
    text-decoration: none;

    &::after {
      content: url('https://65.media.tumblr.com/avatar_a96a78c3d6ad_128.png');
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.blue { color: $yellow; }

.blue { color: lighten(blue, 35%); }
$yellow: yellow;

.cool { color: rebeccapurple; }

$color-text-default:      #424954;
$color-text-light:        #EBEBEB;
$color-text-muted:        #989898;

$color-primary:           #8465D9;
$color-danger:            #E83043;
$color-success:           #3DC123;
$color-info:              #CFFF32;
$color-warning:           #FFB62F;

$font-family-primary:     Roboto, 'Open Sans', Helvetica Neue, sans-serif;
$font-family-secondary:   Georgia, Times New Roman, serif;
$font-family-monospace:   Menlo, Monaco, Consolas, monospace;
$font-family:             $font-family-primary;

$font-size-base:          14px;
$font-size-large:         18px;
$font-size-small:         12px;

$font-size-h1:            36px;
$font-size-h2:            30px;
$font-size-h3:            24px;
$font-size-h4:            $font-size-large;
$font-size-h5:            $font-size-base;
$font-size-h6:            $font-size-small;

$captain-marvel: green;
$wom: women-of-the-marvel-universe;

.#{$wom} { content: "#{$wom}"; }

.#{$wom}-text { color: $color-text-muted; }
.#{$wom}-cape { background-color: $color-primary; }
img { border: 1px dotted $captain-marvel; }

.elektra {
  $elektra: purple;
  $captain-marvel: blue;

  color: $captain-marvel;
  border: 1px solid $elektra;
  font-size: $font-size-h1;
}

.fancy { color: $captain-marvel; }