Günay's Coding World

index.html < h1 > Im header 1 </ h1 > < h2 > Im header 2 </ h2 > < h3 > Im header 3 </ h3 > < h4 > Im header 4 </ h4 > < h5 > Im header 5 </ h5 > < h6 > Im header 6 </ h6 > style.scss $header-list : h1 h2 h3 h4 h5 h6 '.something_else' ; //$i: 0; @each $current-header in $header-list { $i : index ( $header-list , $current-header ) + 3 ; // you can do this instead of adding $is' code lines #{ $current-header }{ font-size : 55 px - $i * 3 ; } //$i: $i + 2; }

index.html < h1 > Im header 1 </ h1 > < h2 > Im header 2 </ h2 > < h3 > Im header 3 </ h3 > < h4 > Im header 4 </ h4 > < h5 > Im header 5 </ h5 > < h6 > Im header 6 </ h6 > style.scss @for $i from 1 to 7 { // include 1 exclude 7 h #{ $i }{ // #{} -> interpolation font-size : 55 px - $i * 3 ; } }

style.scss @import "mixins" ; @include small-box ( red ); @include small-box ( pink ); @include small-box ( yellow ); @include small-box ( black ); _mixins.scss @mixin small-box ( $color ){ . small-box- #{ $color } -->#{} is interpolation { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : $color ; } } Output: . small-box-red { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : red ; } . small-box-pink { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : pink ; } . small-box-yellow { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : yellow ; } . small-box-black { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : black ; } To make it better; style.scss @import "mixins" ; @include small-box ( red ); @include small-box ( pink ); @include small-box ( yellow ); @include small-box ( black ); _mixins.

style.scss @import "placeholder" ; div { font-size : $size * 1 ; font-family : "Agency FB" , sans-serif ; color : automaticContrast ( $link-color , $color ); -> SASS predefined lighten function top : 10 px ; bottom : 30 px ; margin : 100 px ; padding : $deger ; line-break : strict ; line-height : 20 %; border : 1 px dashed $color ; ul { li { text-align : center ; font-family : Andalus , cursive ; font-size : nameOfFunction ( 30 px ); color : lighten ( $color , 85 %); -> SASS predefined lighten function margin : 3 px ; padding-left : 3 px ; padding-right : 20 px ; bottom : 30 px ; top : 2 px ; } } } _functions.scss @function nameOfFunction ( $variable ){ @return $variable + 30 ; } @function automaticContrast ( $backgroundColor , $textColor ){ @if lightness ( $backgroundColor ) < 50 %{ @return lighten ( $textColor , 30 %); } @else { @return ligh

style.scss . messageDesign { padding : 10 px ; width : 150 px ; text-align : center ; color : #444 ; } . error { border : 1 px solid red ; @extend . messageDesign ; } . warning { border : 1 px solid yellow ; @extend . messageDesign ; } . success { border : 1 px solid green ; @extend . messageDesign ; } or make a placeholder( % ) messageDesign WE USE PLACEHOLDER IF YOU DO NOT NEED TO HAVE ARGUMENT LIKE; messageDesign(param1,param2) % m essageDesign { padding : 10 px ; width : 150 px ; text-align : center ; color : #444 ; } . error { border : 1 px solid red ; @extend % messageDesign ; } . warning { border : 1 px solid yellow ; @extend % messageDesign ; } . success { border : 1 px solid green ; @extend % messageDesign ; }

_mixins.scss @mixin text-design-change ( $firstColor : $gradient-color-first , $secondColor : $gradient-color-second ){ overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; background-image : linear-gradient (to right top , $firstColor , #742c17 , #ac5f17 , #d59c08 , $secondColor ); } style.scss p { width : 100 %; height : 150 px ; //@include text-design-change(#fff,#000); @include text-design-change (); }

_variables.scss $sizeOfHeader : 28 px ; $color : black ; $size : 16 px ; $deger : 13 px ; $color-red : red ; $color-yellow : yellow ; $header-color : $color-red ; $link-color : $color-yellow ; $gradient-color-first : #370505 ; $gradient-color-second : #ebe212 ; styles.scss @import "variables" ; @import "mixins" ; h1 { font-size : $sizeOfHeader ; color : $header-color ; } h2 { font-size : $sizeOfHeader - 7 px ; color : $header-color ; } a { color : $link-color ; } div { font-size : $size * 1 ; font-family : "Agency FB" , sans-serif ; color : $color ; top : 10 px ; bottom : 30 px ; margin : 100 px ; padding : $deger ; line-break : strict ; line-height : 20 %; border : 1 px dashed $color ; ul { li { text-align : center ; font-family : Andalus , cursive ; font-size : 30 px ; color : red ; margin : 3 px ; padding-left : 3 px ; padding-right : 20 px ; bottom : 30 p

Git - Distributed Version Control System GitHub - A web site that you can upload your repositories online. rebase -You can reorder commits simply by changing their order -You can choose to completely omit some commits. This is designated by pick -- toggling pick off means you want to drop the commit. -Lastly, it allows you to combine commits. git rebase -i HEAD~4 ^ goes parent commit git checkout bugFix^ ~ move a lot of parent commit instead of going one parent commit git branch -f master HEAD~3 moves (by force) the master branch to three parents behind HEAD revert - In order to reverse changes and share those reversed changes with others. git revert HEAD reset - reverts changes by moving a branch reference backwards in time to an older commit. git cherry-pick <Commit1> <Commit2> <...> you would like to copy a series of commits below your current location git cherry-pick c2 c4

const debugElement = fixture.debugElement; const matSelect = debugElement.query(By.css('.mat-select-trigger')).nativeElement; matSelect.click(); fixture.detechChanges(); const matOption = debugElement.query(By.css('.mat-option'))[0].nativeElement; matOption.click(); fixture.detechChanges(); fixture.whenStable().then( () => {    const inputElement: HTMLElement = debugElement.query(By.css('.ask-input')).nativeElement;    expect(inputElement.innerHTML.length).toBeGreaterThan(0); });