code exercises

@for @for is used in two ways: "start through end" or "start to end". The main difference is that "start to end" excludes the end number, and "start through end" includes the end number. "Start  through  end" example: < style type = 'text/sass' > @for $i from 1 through 5 { .text-#{$i} { font-size: 10 * $i; } } </ style > < p class = "text-1" > Hello </ p > < p class = "text-2" > Hello </ p > < p class = "text-3" > Hello </ p > < p class = "text-4" > Hello </ p > < p class = "text-5" > Hello </ p > f-s will be 10px, 20px, 30px, 40px 50px respectively. @each On each iteration, the variable gets assigned to the current value from the list or map. < style type = 'text/sass' > @each $color in blue, black, red { .#{$color}-bg {backg...

These are my Sass trials at FreeCodeCamp @ If, @ else statement is the same as the logic in other programming languages. < style type = 'text/sass' > @mixin border-stroke($val){ @if $val ==light {border: 1px solid black;} @else if $val ==medium {border: 3px solid black;} @else if $val ==heavy {border: 6px solid black;} @else {border: none;} /*If value doesn't come*/ } #box { width: 150px; height: 150px; background-color: red; @include border-stroke(medium);/*We gave a value with @include*/ } </ style > < div id = "box" ></ div >

Bootstrap img-responsive WellComeBack Click here for bootstrap . You can set perfectly fit width of your page with img-responsive . Codes in the page ----------------------------------------------- " " .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-teal-border { border-color: teal; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } WellComeBack Click here for bootstrap . You can set perfectly fit width of your page with img-responsive . Things bootstrap: bad useful perfect Bootstrap for design inappropriate so so wonderful Submit Things bootstrap: bad useful perfect Bootstrap for design inappropriate so so wonderful Submit