scss example 3

addition to project from last time:
---------------------------------------

index.html
-----------

<!doctype html>
<html>
        <head>
                <meta charset="utf-8" />
                <link rel="stylesheet" type="text/css" href="css/main.css">

                <title>SASS / SCSS</title>
        </head>

        <body>

                <input type="button" class="myBtn" value="click me" />
                <h1> this is the h1</h1>

                <h2></h2>

                <h3>some h3 sort of stuff</h3>

                <input type="button" class="btn-primary" value="primary" />
                <input type="button" class="btn-secondary" value="secondary" />

                <div class="shadows">my shadowy div </div>

                <p class="main-red"> para red</p>
                <p class="main-green"> para green</p>
                <p class="main-blue"> para blue</p>

                <h4 class="big-dimen"></h4>
                <h4 class="medium-dimen"></h4>
                <h4 class="small-dimen"></h4>
                <h4 class="tiny-dimen"></h4>


                <h4 class="cls-3"></h4>

                <h4 class="while-cls-3"></h4>

                <h4 class="testCondTrue"> some test text</h4>
        </body>
</html>


---------------------

main.scss
---------------------


$btn-bg: #009fff;
$btn-color: #ffffff;

.myBtn{
  background: $btn-bg;
  color: $btn-color;

  &:hover{
    background: $btn-bg * 1.2; // larger than 1 -> lighter, smaller than 1 -> darker
    color: darken($btn-color, 15%); // there is lighten as well
  }
}

h1{
  background: #00ff00 + #00f999;
  color: rgba(32, 56, 250, 0.5) + rgba(16, 39, 240, 0.5); // the alpha must be the same
}


@mixin font-check($font){
    &:after{

        @if(type-of($font)==string){
            content: 'the font is #{$font}'; // #{} - string interpolation
            font-family: $font;
        }
        @else{
          content: 'font type error';
        }

    }
}


h2{
  //@include font-check(sans-serif);
  @include font-check(30px);
}

$my-padding: 30px;
h3{
  @if($my-padding < 20px){
    padding: $my-padding;
    color: green;
  }
  @else if($my-padding < 40px){
    padding: $my-padding / 2;
    color: blue;
  }
  @else{
    padding: ($my-padding - 20) / 2;
    color: red;
  }
}

.btn{
  &-primary{
    background: blue;
    color: lighten(blue, 50%);
  }
  &-secondary{
    background: green;
    color: lighten(green, 50%);
  }
}


@mixin box-shadow($shadows...){ // ... is varargs - can pass more than one argument
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  -ms-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows{
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}


// lists
$margin-list: 0px 5px 10px 15px; // can seperate using commas as well

// for each
@each $curr-margin in $margin-list { // for each element in $margin-list
  $i: index($margin-list, $curr-margin); // get the index of the current margin in the list

  .margin-#{$i} { // make a new class (whose name is margin-index)
    margin: $curr-margin; // set the margin of the class to the current margin
  }
}


// dictionary
$primary-colors: (
  'red': #ff0000,
  'green': #00ff00,
  'blue': #0000ff
);

@each $color-name, $color-code in $primary-colors{
  .main-#{$color-name}{
    color: $color-code;
  }
}

// each over a list/dictionary literal
@each $sizeName, $sizeAmount in (big:100, medium:75, small:50, tiny:25){
  .#{$sizeName}-dimen{
      width: $sizeAmount + px;
      height: $sizeAmount + px;
      background: red;
      &:after{
        content: "#{$sizeName}";
      }
    }
}


// for loop
@for $i from 1 through 3{
  .cls-#{$i}{
      &:after{
        content: "#{$i}";
      }
    }
}

//while loop
$counter: 1;
@while $counter < 4 {
  .while-cls-#{$counter}{
      &:after{
        content: "the counter is #{$counter}";
      }
    }
    $counter: $counter + 1;
}


// single line condition
@mixin testCondition($condition){
  $color: if($condition, blue, red); // if $condition is true then $color is blue, else it is red
  color: $color;
}

.testCondTrue{
  @include testCondition(true);
}

.testCondFalse{
  @include testCondition(false);
}


========================================================
========================================================
========================================================

new project from this lesson:
-------------------------------

index.html
---------------
<!doctype html>
<html>
        <head>
                <meta charset="utf-8" />
                <link rel="stylesheet" type="text/css" href="css/main.css">

                <title>SASS / SCSS</title>
        </head>

        <body>

                <div class="profile-pic"></div>
                <p class="profile-info"></p>

                <hr/>

                <div class="myClass"></div>

                <div class="myContainer">
                        <div class="inside"></div>
                </div>

        </body>
</html>


--------------------

main.scss
--------------------
@import "profile"; // getting the infomation in the partial

// note: since we imported "profile" in this file, we can use everything defined in that file

@mixin visible-div($width, $height, $color){
  width: $width;
  height: $height;
  background-color: $color;
}

.myClass{
  @include visible-div(30px, 50px, orange);
  @include border-radius(10px); // using the mixin defined in the "profile" file
}

// functions
@function get-percentage($target, $container){
  @return ($target / $container) * 100%;
}

.myContainer{
  padding: get-percentage(10px, 100px);
  @include visible-div(20px, 20px, cyan);

}

.inside{
  @include visible-div(20px, 20px, red);
}


---------------------------

_profile.scss
---------------------------

// this is a 'partial'. it starts with an _
// a .css file will NOT be created for this file.


$bg-color: lightblue;

@mixin border-radius($rad){
    border-radius: $rad;
    -webkit-border-radius: $rad;
    -moz-border-radius: $rad;
    -ms-border-radius: $rad;
}


.profile{
  &-pic{
      width: 500px;
      height: 500px;
      background-color: $bg-color;
      @include  border-radius(9999px);
      border:{
        width: thick;
        color: $bg-color * 0.9;
        style: solid;
      }
      margin: auto;

  }

  &-info{
    &:after{
      content: 'some amazing info about my profile';
    }
    font:{
      weight: bold;
      family: 'David';
      size: 30px;
    }
    text:{
      decoration: underline;
      align: center;
    }

  }
}