diff --git a/SASS/1-base/_base-index.scss b/SASS/1-base/_base-index.scss new file mode 100644 index 00000000..a49fa864 --- /dev/null +++ b/SASS/1-base/_base-index.scss @@ -0,0 +1,4 @@ +// Base Index +@forward "base"; +@forward "typography"; +@forward "helpers"; diff --git a/SASS/1-base/_base.scss b/SASS/1-base/_base.scss new file mode 100644 index 00000000..9faf868b --- /dev/null +++ b/SASS/1-base/_base.scss @@ -0,0 +1,12 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body{ + background-color: RGB(250, 250, 250); +} + + + diff --git a/SASS/1-base/_helpers.scss b/SASS/1-base/_helpers.scss new file mode 100644 index 00000000..e69de29b diff --git a/SASS/1-base/_typography.scss b/SASS/1-base/_typography.scss new file mode 100644 index 00000000..d9c2b2b8 --- /dev/null +++ b/SASS/1-base/_typography.scss @@ -0,0 +1,4 @@ +*{ + font-family: Helvetica; + font-size: 14px; +} \ No newline at end of file diff --git a/SASS/2-components/_components-index.scss b/SASS/2-components/_components-index.scss new file mode 100644 index 00000000..c1b32454 --- /dev/null +++ b/SASS/2-components/_components-index.scss @@ -0,0 +1,7 @@ +// Components Index +@forward "footer"; +@forward "login"; +@forward "principal-image"; +@forward "header"; +@forward "home"; + diff --git a/SASS/2-components/_footer.scss b/SASS/2-components/_footer.scss new file mode 100644 index 00000000..aabc99c1 --- /dev/null +++ b/SASS/2-components/_footer.scss @@ -0,0 +1,21 @@ +.footer__page{ + display: flex; + justify-content: space-around; +} + +.footer__list { + list-style-type: none; + flex-wrap: wrap; + &-li { + display: inline; + margin: 0.5rem; + color: rgb(23, 40, 117); + font-weight: bold; + font-size: 0.8rem; + } +} + +.footer__copyright { + color: rgb(187, 187, 187); + font-weight: bold; +} diff --git a/SASS/2-components/_header.scss b/SASS/2-components/_header.scss new file mode 100644 index 00000000..27646523 --- /dev/null +++ b/SASS/2-components/_header.scss @@ -0,0 +1,25 @@ +@use "../4-abstracts/variables"as a; + +.header__home{ + background-color: rgb(255, 255, 255); + + &-button{ + background-color: a.$white-color; + border: 1px a.$borderCard-color solid; + color: a.$borderCard-color; + padding: 0.4rem 5rem; + border-radius: 2px; + cursor: pointer; + } + + .fas { + margin-right: 1rem; + font-size: 1.5rem; + color: a.$grey-color; + } + +} + + + + diff --git a/SASS/2-components/_home.scss b/SASS/2-components/_home.scss new file mode 100644 index 00000000..45210d2e --- /dev/null +++ b/SASS/2-components/_home.scss @@ -0,0 +1,75 @@ +@use "../4-abstracts/variables"as a; + +.main__home-post { + border: 1px a.$borderCard-color solid; + margin-bottom: 2rem; + + .main__home-header { + background-color: a.$white-color; + padding: 0.2rem; + font-weight: 600; + font-size: 0.8rem; + + .fas{ + margin: 0.2rem 0.4rem 0.2rem 0.6rem; + font-size: 1.5rem; + color: a.$grey-color; + } + } + + .main__home-comments{ + margin-bottom: 0; + padding: 0.8rem; + + .main__home-icons { + margin-bottom: 0.4rem; + + .fa-heart{ + color: rgb(146, 28, 28); + font-size: 1.5rem; + } + + .fa-comment{ + @extend .fa-heart; + font-size: 1.5rem; + margin-left: 0.5rem; + color: black; + } + } + .like{ + font-weight: 600; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .newComment{ + margin: 0.7rem 0; + } +} + +} + + + +.main__home-comments { + background-color: a.$white-color; + margin-bottom: 1rem; + margin-top: 0; +} + +.comment{ + color: a.$grey-color; + font-size: 0.9rem; +} + +.user{ + font-weight: bold; + margin-left: 1.5rem; + margin-right: 0.5rem; + font-size: 0.9rem; + +} +.comment-date{ + color: a.$grey-color; + font-size: 0.6rem; +} \ No newline at end of file diff --git a/SASS/2-components/_login.scss b/SASS/2-components/_login.scss new file mode 100644 index 00000000..48451f01 --- /dev/null +++ b/SASS/2-components/_login.scss @@ -0,0 +1,99 @@ +@use "../4-abstracts/variables" as a; + +.main__login { + position: relative; + left: 0px; + + &-space{ + margin-top: 0; + height: auto; + max-width: 360px; + + .main__login-card { + background-color: a.$white-color; + border: 1px a.$borderCard-color solid; + + .principal-image{ + margin: 2rem; + } + + input{ + width: 75%; + margin: 0.15rem; + height: 2.5rem; + background-color: a.$main-brackground; + border: 1px a.$borderCard-color solid; + border-radius: 2px; + padding-left: 0.5rem; + color: a.$borderCard-color; + } + + a { + width: 75%; + margin: 0.8rem; + height: 2rem; + background-color: a.$button-color; + cursor: pointer; + border-radius: 5px; + border: none; + color: a.$white-color; + font-weight: bold; + text-align: center; + text-decoration: none; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + } + + .main__login-facebook{ + color: a.$facebook-color; + font-weight: bold; + margin: 1.5rem; + + .fa-facebook-official{ + margin-right: 0.5rem; + font-size: 1.2rem; + } + } + + .password { + color: a.$facebook-color; + margin-bottom: 2rem; + } + + + .main__login-app{ + margin-bottom: 2rem; + } + } + } +} +.gettheapp{ + padding: 1rem; + +} + +.account{ + color: a.$grey-color; +} + +.signup{ + font-weight: bold; + color: RGB(0, 149, 246); +} + +.flex { + display: flex; + margin-top: 0.5rem; +} + +.main__login-account { + background-color: a.$white-color; + border: 1px a.$borderCard-color solid; +} + +.main__login-app-logo{ + width: 40%; + margin-right: 0.5rem; +} \ No newline at end of file diff --git a/SASS/2-components/_principal-image.scss b/SASS/2-components/_principal-image.scss new file mode 100644 index 00000000..7f11ae65 --- /dev/null +++ b/SASS/2-components/_principal-image.scss @@ -0,0 +1,6 @@ +.principal-image{ + float: right; + height: auto; + max-height: 700px; + max-width: 100%; +} diff --git a/SASS/3-layout/_home-page.scss b/SASS/3-layout/_home-page.scss new file mode 100644 index 00000000..30a55ded --- /dev/null +++ b/SASS/3-layout/_home-page.scss @@ -0,0 +1,32 @@ +@use "../4-abstracts/variables"as a; + +.header__home{ + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + margin-bottom: 2%; + border-bottom: 1px a.$borderCard-color solid; + &-logo{ + display: flex; + justify-content: flex-end; + } + &-btn{ + display: flex; + justify-content: center; + } +} + +.main__home{ + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + align-content: center; + + &-header{ + @extend .main__home; + flex-direction: row; + + } +} + diff --git a/SASS/3-layout/_layout-index.scss b/SASS/3-layout/_layout-index.scss new file mode 100644 index 00000000..f84902c3 --- /dev/null +++ b/SASS/3-layout/_layout-index.scss @@ -0,0 +1,3 @@ +// Layout Index +@forward "home-page"; +@forward "login-page"; \ No newline at end of file diff --git a/SASS/3-layout/_login-page.scss b/SASS/3-layout/_login-page.scss new file mode 100644 index 00000000..315bdbe2 --- /dev/null +++ b/SASS/3-layout/_login-page.scss @@ -0,0 +1,62 @@ +@use "../4-abstracts/variables"as a; +@use "../4-abstracts/mixins"as b; + + +.main__page{ + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0px 1rem; + align-items: flex-start; + align-content: center; + margin: 6%; +} + +@media all and(max-width: 900px) { + .main__image { + display: none; + } + + .main__page { + @include b.flex($justify-content: center); + grid-template-columns: none; + } +} + +.main__login-space{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + align-content: center; +} + + + +.main__login-card{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + align-content: center; + margin-bottom: 1rem; +} + +.main__login-account{ + width: 100%; + text-align: center; + padding: 1.7rem 0; +} + +.main__login-app{ + text-align: center; + margin: 1rem; +} + +.main__login-app-div{ + display: flex; + justify-content: center; + align-items: center; + align-content: center; + margin-top: 1rem; +} diff --git a/SASS/4-abstracts/_abstracts-index.scss b/SASS/4-abstracts/_abstracts-index.scss new file mode 100644 index 00000000..45344c38 --- /dev/null +++ b/SASS/4-abstracts/_abstracts-index.scss @@ -0,0 +1,3 @@ +// Abstracts Index +@forward "mixins"; +@forward "variables"; diff --git a/SASS/4-abstracts/_mixins.scss b/SASS/4-abstracts/_mixins.scss new file mode 100644 index 00000000..11c4cb32 --- /dev/null +++ b/SASS/4-abstracts/_mixins.scss @@ -0,0 +1,9 @@ +@mixin flex($direction: row, $wrap: nowrap, $justify-content: flex-start, $align-items: stretch, $align-content: stretch) { + display: flex; + flex-direction: $direction; + flex-wrap: $wrap; + justify-content: $justify-content; + align-items: $align-items; + align-content: $align-content; +} + diff --git a/SASS/4-abstracts/_variables.scss b/SASS/4-abstracts/_variables.scss new file mode 100644 index 00000000..12d456c7 --- /dev/null +++ b/SASS/4-abstracts/_variables.scss @@ -0,0 +1,6 @@ +$main-brackground: RGB(250, 250, 250); +$white-color: rgb(255, 255, 255); +$grey-color: rgb(128, 128, 128); +$borderCard-color: RGB(219, 219, 219); +$button-color: RGB(178, 223, 252); +$facebook-color: RGB(56, 81, 133); \ No newline at end of file diff --git a/assets/AppStore.png b/assets/AppStore.png new file mode 100644 index 00000000..428654d2 Binary files /dev/null and b/assets/AppStore.png differ diff --git a/assets/GooglePlay.png b/assets/GooglePlay.png new file mode 100644 index 00000000..4d764a43 Binary files /dev/null and b/assets/GooglePlay.png differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 00000000..391d7df7 Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/or.png b/assets/or.png new file mode 100644 index 00000000..36b989b5 Binary files /dev/null and b/assets/or.png differ diff --git a/assets/photo1.png b/assets/photo1.png new file mode 100644 index 00000000..61ae0b7f Binary files /dev/null and b/assets/photo1.png differ diff --git a/assets/photo2.png b/assets/photo2.png new file mode 100644 index 00000000..45d83625 Binary files /dev/null and b/assets/photo2.png differ diff --git a/assets/principalImage.png b/assets/principalImage.png new file mode 100644 index 00000000..ed3734b4 Binary files /dev/null and b/assets/principalImage.png differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..217ca4a1 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,299 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background-color: RGB(250, 250, 250); +} + +* { + font-family: Helvetica; + font-size: 14px; +} + +.footer__page { + display: flex; + justify-content: space-around; +} + +.footer__list { + list-style-type: none; + flex-wrap: wrap; +} +.footer__list-li { + display: inline; + margin: 0.5rem; + color: #172875; + font-weight: bold; + font-size: 0.8rem; +} + +.footer__copyright { + color: #bbbbbb; + font-weight: bold; +} + +.main__login { + position: relative; + left: 0px; +} +.main__login-space { + margin-top: 0; + height: auto; + max-width: 360px; +} +.main__login-space .main__login-card { + background-color: white; + border: 1px RGB(219, 219, 219) solid; +} +.main__login-space .main__login-card .principal-image { + margin: 2rem; +} +.main__login-space .main__login-card input { + width: 75%; + margin: 0.15rem; + height: 2.5rem; + background-color: RGB(250, 250, 250); + border: 1px RGB(219, 219, 219) solid; + border-radius: 2px; + padding-left: 0.5rem; + color: RGB(219, 219, 219); +} +.main__login-space .main__login-card a { + width: 75%; + margin: 0.8rem; + height: 2rem; + background-color: RGB(178, 223, 252); + cursor: pointer; + border-radius: 5px; + border: none; + color: white; + font-weight: bold; + text-align: center; + text-decoration: none; + display: flex; + align-content: center; + justify-content: center; + align-items: center; +} +.main__login-space .main__login-card .main__login-facebook { + color: RGB(56, 81, 133); + font-weight: bold; + margin: 1.5rem; +} +.main__login-space .main__login-card .main__login-facebook .fa-facebook-official { + margin-right: 0.5rem; + font-size: 1.2rem; +} +.main__login-space .main__login-card .password { + color: RGB(56, 81, 133); + margin-bottom: 2rem; +} +.main__login-space .main__login-card .main__login-app { + margin-bottom: 2rem; +} + +.gettheapp { + padding: 1rem; +} + +.account { + color: gray; +} + +.signup { + font-weight: bold; + color: RGB(0, 149, 246); +} + +.flex { + display: flex; + margin-top: 0.5rem; +} + +.main__login-account { + background-color: white; + border: 1px RGB(219, 219, 219) solid; +} + +.main__login-app-logo { + width: 40%; + margin-right: 0.5rem; +} + +.principal-image { + float: right; + height: auto; + max-height: 700px; + max-width: 100%; +} + +.header__home { + background-color: white; +} +.header__home-button { + background-color: white; + border: 1px RGB(219, 219, 219) solid; + color: RGB(219, 219, 219); + padding: 0.4rem 5rem; + border-radius: 2px; + cursor: pointer; +} +.header__home .fas { + margin-right: 1rem; + font-size: 1.5rem; + color: gray; +} + +.main__home-post { + border: 1px RGB(219, 219, 219) solid; + margin-bottom: 2rem; +} +.main__home-post .main__home-header { + background-color: white; + padding: 0.2rem; + font-weight: 600; + font-size: 0.8rem; +} +.main__home-post .main__home-header .fas { + margin: 0.2rem 0.4rem 0.2rem 0.6rem; + font-size: 1.5rem; + color: gray; +} +.main__home-post .main__home-comments { + margin-bottom: 0; + padding: 0.8rem; +} +.main__home-post .main__home-comments .main__home-icons { + margin-bottom: 0.4rem; +} +.main__home-post .main__home-comments .main__home-icons .fa-heart, .main__home-post .main__home-comments .main__home-icons .fa-comment { + color: #921c1c; + font-size: 1.5rem; +} +.main__home-post .main__home-comments .main__home-icons .fa-comment { + font-size: 1.5rem; + margin-left: 0.5rem; + color: black; +} +.main__home-post .main__home-comments .like { + font-weight: 600; + font-size: 1rem; + margin-bottom: 0.5rem; +} +.main__home-post .main__home-comments .newComment { + margin: 0.7rem 0; +} + +.main__home-comments { + background-color: white; + margin-bottom: 1rem; + margin-top: 0; +} + +.comment { + color: gray; + font-size: 0.9rem; +} + +.user { + font-weight: bold; + margin-left: 1.5rem; + margin-right: 0.5rem; + font-size: 0.9rem; +} + +.comment-date { + color: gray; + font-size: 0.6rem; +} + +.header__home { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + margin-bottom: 2%; + border-bottom: 1px RGB(219, 219, 219) solid; +} +.header__home-logo { + display: flex; + justify-content: flex-end; +} +.header__home-btn { + display: flex; + justify-content: center; +} + +.main__home, .main__home-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + align-content: center; +} +.main__home-header { + flex-direction: row; +} + +.main__page { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0px 1rem; + align-items: flex-start; + align-content: center; + margin: 6%; +} + +@media all and (max-width: 900px) { + .main__image { + display: none; + } + + .main__page { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: stretch; + align-content: stretch; + grid-template-columns: none; + } +} +.main__login-space { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + align-content: center; +} + +.main__login-card { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + align-content: center; + margin-bottom: 1rem; +} + +.main__login-account { + width: 100%; + text-align: center; + padding: 1.7rem 0; +} + +.main__login-app { + text-align: center; + margin: 1rem; +} + +.main__login-app-div { + display: flex; + justify-content: center; + align-items: center; + align-content: center; + margin-top: 1rem; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 00000000..c7ae6423 --- /dev/null +++ b/home.html @@ -0,0 +1,111 @@ + + + + + + + Instagram Clone + + + + + +
+ + + + +
+ +
+ + +
+ + + +
+
+ +
+ +
+ +
+ lucasMolano +
+ + + + + +
+ +
+ +
+ + + +
+
+ vDeVendetta + I love animals +
+
+ popoTTer + like me!! +
+
+ + HACE 5 DÍAS +
+
+ + +
+ +
+ leoMolano +
+ + + + + +
+ +
+ +
+ + + + + +
+
+ JackPeter + Wooow, i like it!! +
+
+ HarryJake585 + Nice! +
+
+ + + HACE 5 DÍAS +
+
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 00000000..f8169a70 --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + + Instagram Clone + + + + + +
+ +
+ + +
+ + + +
+
+ + + + + + + diff --git a/readme.txt b/readme.txt new file mode 100644 index 00000000..c150ccac --- /dev/null +++ b/readme.txt @@ -0,0 +1,176 @@ +● What is SASS? What does SASS stand for? +Sass is an extension to CSSS, is a CSS pre-processor completely compatible with all versions of CSS that reduces repetition of CSS and therefore saves time. SASS = Syntactically Awesome Style Sheets. + +● What is a CSS pre-processor? +CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. + + +● What does a pre-processor have to do with SASS? +SASS is a pre-processor. A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. + +● This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back. + + +● Why use SASS? +Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. +Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. + +● SASS has disadvantages? Which are? +The developer must have enough time to learn new features present in this preprocessor before using it. +Using Sass may cause losing benefits of browser’s built-in element inspector. +Code has to be compiled. +Difficult Troubleshooting. + + +● What is a SASS Variable? Explain why are useful. +Variables are a way to store information that you can re-use later. They are really useful because after the variables are declared, you can use the variables wherever you want. For example variable like myFont, myColor, myFontSize, my width… + + +● Explain the SASS variables property with an example. +Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. Example: + +$base-color: #c6538c; +$border-dark: rgba($base-color, 0.88); + +.alert { + border: 1px solid $border-dark; +} + + +● What is a mixin? Why is it important? Give an example +The @mixin directive lets you create CSS code that is to be reused throughout the website. +The @include directive is created to let you use (include) the mixin. Example: + +@mixin important-text { + color: red; + font-size: 25px; + font-weight: bold; + border: 1px solid blue; +} + +.danger { + @include important-text; + background-color: green; +} + + +● What is SCSS? Give an example +SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. Example: + +/* .scss file */ +$bgcolor: blue; +$textcolor: red; +$fontsize: 25px; + +/* Use the variables */ +body { + background-color: $bgcolor; + color: $textcolor; + font-size: $fontsize; +} + + +● What is SASS? Give an example. +SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language. Example: + +$primary-color: green +$primary-bg: red + +body + color: $primary-color + background: $primary-bg + + +● What is the difference between .scss and .sass syntax. +SASS is used when we need an original syntax, code syntax is not required for SCSS. +SASS follows strict indentation, SCSS has no strict indentation. +SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory. +SASS file extension is .sass and SCSS file extension is .scss. + + + +● In which cases would we use SCSS? And in which cases would we use SASS? +SASS is used when we need an original syntax, code syntax is not required for SCSS. + + +● Explain how traditional CSS and Preprocessed CSS workflows are different. +Even though CSS is an integral part of website development, we are limited by its conventions of selectors and properties. Preprocessors are programs that offer the variables missing in CSS. Preprocessors were created to organize CSS via nested definitions, making your code easier to maintain. Preprocessors extend CSS with variables, operators, interpolations, functions, mixins, and many other usable assets. + +● Essentially, a preprocessor takes code that you’ve written in the preprocessed language and converts it into simple CSS code. The preprocessor is comprised of a language, the code that you write, and a compiler that converts the code into standard CSS which is easily read and processed by any web browser. + +● Even though preprocessors have different syntax, they all support a CSS output. More importantly, the resulting CSS file that preprocessors produce functions as regular CSS, so there is no incompatibility with your program. + + +● Can we create functions with SASS? If it is true, give an example. +Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. They make it easy to abstract out common formulas and behaviors in a readable way. Example: + +@function pow($base, $exponent) { + $result: 1; + @for $_ from 1 through $exponent { + $result: $result * $base; + } + @return $result; +} + +.sidebar { + float: left; + margin-left: pow(4, 3) * 1px; +} + + +● What is nesting? Is it useful? Give an example of nesting +Sass lets you nest CSS selectors in the same way as HTML. Example: +nav { + ul { + margin: 0; + padding: 0; + list-style: none; + } + li { + display: inline-block; + } + a { + display: block; + padding: 6px 12px; + text-decoration: none; + } +} + + + +● Difference between @use & @import? Give an example +The file is only imported once, no matter how many times you @use it in a project. +Variables, mixins, and functions (what Sass calls "members") that start with an underscore (_) or hyphen (-) are considered private, and not imported. +Members from the used file (buttons.scss in this case) are only made available locally, but not passed along to future imports. +Similarly, @extends will only apply up the chain; extending selectors in imported files, but not extending files that import this one. +All imported members are namespaced by default. + +@use '_styles.scss'; +@import '_styles.scss'; + + +● How can we import other CSS/SASS files in SASS? Give an example +Sass extends CSS's @use rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. + + +● Explain the concept of inheritance in SASS. +This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. + + +● Why use @extend? Give an example +The @extend directive lets you share a set of CSS properties from one selector to another. It is useful if you have almost identically styled elements that only differ in some small details. Example: + +.button-basic { + border: none; + padding: 15px 30px; + text-align: center; + font-size: 16px; + cursor: pointer; +} + +.button-report { + @extend .button-basic; + background-color: red; +} + + diff --git a/styles.scss b/styles.scss new file mode 100644 index 00000000..83b89613 --- /dev/null +++ b/styles.scss @@ -0,0 +1,5 @@ +// Main SCSS +@use "SASS/1-base/base-index"; +@use "SASS/2-components/components-index"; +@use "SASS/3-layout/layout-index"; +@use "SASS/4-abstracts/abstracts-index";