Shamil Khashaev skhashaev
skhashaev
/ at-rules.scss
Created
March 25, 2021 14:41
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* At-rules */ | |
| /* @import */ | |
| // @import "_variables"; | |
| // @import "_demo"; | |
| // .selector { | |
| // margin: $size; | |
| // background-color: $brandColor; | |
| // .nested { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --- Variables --- */ | |
| // $base-color: #c6538c; | |
| // $border-dark: rgba($base-color, 0.88); | |
| // .alert { | |
| // border: 1px solid $border-dark; | |
| // } | |
| /* Sass variables are not CSS variables */ | |
| // $variable: value 1; | |
| // .rule-1 { |
skhashaev
/ placeholder-selectors-input.scss
Last active
March 17, 2021 21:22
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --- Placeholder selectors --- */ | |
| // .alert:hover, %strong-alert { | |
| // font-weight: bold; | |
| // } | |
| // %strong-alert:hover { | |
| // color: red; | |
| // } | |
| /* Main use of placeholder selectors */ |
skhashaev
/ parent-selector-input.scss
Last active
March 17, 2021 21:16
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --- Parent selector */ | |
| // .alert { | |
| // background: red; | |
| // &:hover { | |
| // font-weight: bold; | |
| // } | |
| // } | |
| /* Adding suffixes */ |
skhashaev
/ property-declaration-input.scss
Created
March 17, 2021 20:52
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --- Property declaration ---*/ | |
| // .circle { | |
| // $size: 100px; | |
| // width: $size; | |
| // height: $size; | |
| // border-radius: $size / 2; | |
| // } | |
| /* Interpolation */ | |
| // $property: filter; |
skhashaev
/ sass-nesting-input-3.scss
Last active
March 17, 2021 20:51
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ul > { | |
| li { | |
| list-style-type: none; | |
| } | |
| } | |
| h2 { | |
| + p { | |
| border-top: 1px solid gray; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| nav { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| li { display: inline-block; } | |
| a { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| nav { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| li { display: inline-block; } | |
| a { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This comment won't be included in the CSS. | |
| /* But this comment will, except in compressed mode. */ | |
| /* It can also contain interpolation: | |
| * 1 + 1 = #{1 + 1} */ | |
| /*! This comment will be included even in compressed mode. */ | |
| p /* Multi-line comments can be written anywhere |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Challenge 1 | |
| function addTwo(num) { | |
| return num + 2; | |
| } | |
| // To check if you've completed it, uncomment these console.logs! | |
| // console.log(addTwo(3)); | |
| // console.log(addTwo(10)); |