Solution: Antonio Copete

README.md

@@ -1,72 +1,85 @@
-`#sass` `#css` `#html` `#master-in-software-engineering`
+# InstagramClone
 
-# SASS - Clone Instagram <!-- omit in toc -->
+What is SASS? What does SASS stand for?
+SASS (which stands for 'Syntactically awesome style sheets’) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+What is a CSS pre-processor?
+Style sheets in the advanced syntax are processed by the pre-processor, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
 
-> Sass (which stands for 'Syntactically awesome style sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more
->
-> The purpose of this project is to learn the basics of SASS and put them into practice by building a visual replica of Instagram
+What does a pre-processor have to do with SASS?
+SASS is the most useed CSS pre-processor
 
-## Index <!-- omit in toc -->
+Why use SASS?
+Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+SASS has disadvantages? Which are?
 
-## Requirements
+- 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
 
-- You must use variables at least once in the project.
-- You must use nesting.
-- You must use inheritance at least once in the project.
-- You cannot use third party libraries for the development of this pill
+What is a SASS Variable? Explain why are useful
+Sass Variables allow you to define a value once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. if you wanted to set the same height for two different selectors
 
-## Repository
+Explain the SASS variables property with an example.
+You could create a variable called -> $height: 100%
 
-First of all you must fork this project into your GitHub account.
+What is a mixin? Why is it important? Give an example
+Mixin allows the developer to use CSS features like it's a programming language, using parameters to reuse the same code with different values.
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+What is SCSS? Give an example
+SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax. It is the new version of SASS.
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+What is SASS? Give an example
+Indented (simply called 'Sass'): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write. It’s the old version of SASS, but it will never be deprecated!
 
-### Installing
+What is the difference between .scss and .sass syntax.
+.scss uses brackets and .sass uses indentation instead of brackets
 
-In this project you must use the VSCode SASS extension in order to compile SASS into CSS.
+In which cases would we use SCSS? And in which cases would we use SASS?
+It's about preferences, but most people uses SCSS because it's more like CSS
 
-First of all you will need to install the extension:
+Explain how traditional CSS and Preprocessed CSS workflows are different.
+CSS is read by the browser while Preprocessed CSS need to be compiled
 
-- [Live SASS Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
+Can we create functions with SASS? If it is true, give an example.
+Mixins are some kind of common functions on programming languages.
 
-When the extension is installed correctly, having a SASS file open, you must click on "Watch Sass":
+Example:
+@mixin textTransform ($value) {
+text-transform: $value;
+}
+We can call that using the @include in a selector like:
+.title {
+@include textTransform(uppercase);
+}
 
-<img src="https://raw.githubusercontent.com/ritwickdey/vscode-live-sass-compiler/master/images/Screenshot/AnimatedPreview.gif" width="600px">
+What is nesting? Is it useful? Give an example of nesting
+Nesting allows the developer to includes selectors inside other selectors like:
+.body {
+color:white;
+.title {
+font-weight: bold
+}
+}
 
-If you want to change some configuration of "Live SASS Compiler" you can check this official resource:
+Difference between @use & @import? Give an example
+Fundamentally both rules do the same thing - load members inside another module. The main differences is how they handle members. @import makes everything globally accessible in the target file. This enables an endless chain of imported files where it's difficult to trace where your variables and mixins are coming from. It also allows for overlap and makes it difficult to trace back why your perfect css breaks. This is a problem especially with complex file structures and projects with multiple contributors and global libraries, which is why @import is no longer recommended by Sass.
+Same as @import, @use rule enables us to break our stylesheet into more practical, smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members. To do this you will need to refer to the namespace of the original file. Here's an example of simple SCSS partials.
 
-- [Live SASS Compiler Settings](https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md)
+How can we import other CSS/SASS files in SASS? Give an example
+@use "relative path";
 
-## Technologies used
+Explain the concept of inheritance in SASS.
+You can use %(element name) to declare a selector with it's own css attributes
 
-\* SASS
-
-\* CSS
-
-\* HTML
-
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
-
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
-
-## Resources
-
-- [SASS documentation](https://sass-lang.com/)
-- [W3S SASS](https://www.w3schools.com/sass/)
-- [SASS Guidelines](https://sass-guidelin.es/es/)
-- [Organizing SASS Projects](https://blog.prototypr.io/how-i-organize-sass-projects-e2d7760df86f)
-- [Why don't use @import](https://www.youtube.com/watch?v=CR-a8upNjJ0)
+Why use @extend? Give an example
+If you already created an %element, you can use it these base elements with @extend
+%card {
+border: 1px solid black;
+}
+.little-card {
+@extend %card;
+width: 20%
+}