Solution: Arantza Beitia

README.md

@@ -17,6 +17,7 @@
 - [Technologies used](#technologies-used)
 - [Project delivery](#project-delivery)
 - [Resources](#resources)
+- [Theory](#theory)
 
 ## Requirements
 
@@ -70,3 +71,92 @@ To deliver this project you must follow the steps indicated in the document:
 - [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)
+
+## Theory
+
+- **What is SASS? What does SASS stand for?**
+  Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS)
+
+- **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 preprocessor
+
+- **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.
+
+- **SASS has disadvantages? Which are?**
+  Is neccessary a transpilator to convert into CSS the code
+
+- **What is a SASS Variable? Explain why are useful**
+  Using variables avoids repeating code. Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.
+
+- **Explain the SASS variables property with an example.**
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+
+- **What is a mixin? Why is it important? Give an example**
+  A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
+  To create a mixin you use the @mixin directive and give it a name. We've named our mixin transform. We're also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.
+
+  @mixin transform($property) {
+    -webkit-transform: $property;
+    -ms-transform: $property;
+    transform: $property;
+  }
+  .box { @include transform(rotate(30deg)); }
+
+- **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.
+  body{
+    font:100% $font-stack;
+    color:$primary-color;
+  }
+
+- **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!
+  body
+    font:100% $font-stack
+    color:$primary-color
+
+- **What is the difference between .scss and .sass syntax.**
+  .scss requires the use of {} and ;, and .sass don't
+
+- **In which cases would we use SCSS? And in which cases would we use SASS?**
+
+- **Explain how traditional CSS and Preprocessed CSS workflows are different.**
+
+- **Can we create functions with SASS? If it is true, give an example.**
+  Functions are blocks of code that return a single value of any Sass data type. To create a custom function you need two Sass directives, @function and @return. The first creates the function and the second signals the value the function will return.
+  @function some-func($param) {
+    @return (100/$param);
+  }
+
+- **What is nesting? Is it useful? Give an example of nesting**
+  Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
+
+- **Difference between @use & @import? Give an example**
+  The **@import** directive imports the file and any variables or mixins defined in the imported file can then be used in the main file globally.
+
+  The **@use** is similar, but the file is imported only once. 
+  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 are only made available locally, but not passed along to future imports.
+  All imported members are namespaced by default.
+
+- **How can we import other CSS/SASS files in SASS? Give an example**
+
+
+- **Explain the concept of inheritance in SASS.**
+  In Sass, @extend is used to share a set of CSS properties from one selector to another. In complicated CSS where many classes are put together, duplication of properties may occurs. ... The @extend features makes your code less and facilitates you to rewrite it repeatedly.
+
+- **Why use @extend? Give an example**
+  The @extend directive helps keep your Sass code very clean.
+  %grid { display: grid; grid-gap: 1rem;}
+  .grid-2-columns { @extend %grid; color: red;}
+  .grid-1-column { @extend %grid; color: blue; }

src/assets/js/main.js

@@ -0,0 +1,7 @@
+function goToHome (e) {
+  e.preventDefault()
+  location.replace('./')
+}
+
+document.getElementById('login').addEventListener('click', goToHome)
+

src/assets/scss/abstract/_icon-variables.scss

@@ -0,0 +1,14 @@
+$icomoon-font-family: "ico-instagram" !default;
+$icomoon-font-path: "fonts" !default;
+
+$icon-avatar: "\e909";
+$icon-compass-full: "\e900";
+$icon-compass: "\e901";
+$icon-heart-full: "\e902";
+$icon-heart-like: "\e903";
+$icon-heart: "\e904";
+$icon-home-full: "\e905";
+$icon-home: "\e906";
+$icon-send-full: "\e907";
+$icon-send: "\e908";
+$icon-facebook: "\ea91";

src/assets/scss/abstract/_index.scss

@@ -0,0 +1,4 @@
+@forward 'variables';
+@forward 'icon-variables';
+@forward 'mixins/mixin.responsive';
+@forward 'mixins/mixin.flexbox';

src/assets/scss/abstract/_variables.scss

@@ -0,0 +1,21 @@
+// COLORS
+// $color-primary: #b25009;
+$color-facebook: #385085;
+$color-success: #0095f6;
+
+$color-black: #000000;
+$color-grey-dark: #8e8e8e;
+$color-grey-border: #dbdbdb;
+$color-grey: #fafafa;
+// $color-grey-light: #efefef;
+$color-white: #ffffff;
+
+// FONTS
+$font-size-base: 1rem;
+$font-size-small: 0.7rem;
+$font-color-base: $color-black;
+$font-weight-bold: 700;
+
+//  MAIN WIDTH
+$width-desktop: 55rem;
+$height-header: 3rem;

src/assets/scss/abstract/mixins/_mixin.flexbox.scss

@@ -0,0 +1,39 @@
+$display-flex: (
+  'flex': flex,
+	'inline-flex': inline-flex
+) !default;
+
+$space-align: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+	'between': space-between,
+	'around' : space-around,
+	'evenly' : space-evenly
+) !default;
+
+
+@function has-correct-flex-value($key, $collection: $space-align) {
+  @if ($key != null) {
+    @if (map-has-key($collection, $key)) {
+      @return true;
+    } @else {
+      @error error-message($collection, $key);
+    }
+  }
+  @return false;
+}
+
+@mixin flex( $display: null, $justify-content: null, $align-items: null) {
+  @if (has-correct-flex-value($display, $display-flex)) {
+    display: map_get($display-flex, $display);
+  }
+
+  @if (has-correct-flex-value($justify-content, $space-align)) {
+    justify-content: map_get($space-align, $justify-content);
+  }
+
+  @if (has-correct-flex-value($align-items)) {
+    align-items: map_get($space-align, $align-items);
+  }
+}

src/assets/scss/abstract/mixins/_mixin.responsive.scss

@@ -0,0 +1,16 @@
+//BREAKPOINTS
+$breakpoint-xs: 480px;
+$breakpoint-sm: 875px;
+$breakpoint-md: 1200px;
+
+@mixin is-mobile() {
+  @media screen and (max-width: $breakpoint-xs) { @content; }
+}
+
+@mixin is-tablet() {
+  @media screen and (max-width: $breakpoint-sm) { @content; }
+}
+
+@mixin is-desktop() {
+  @media screen and (max-width: $breakpoint-md) { @content; }
+}

src/assets/scss/base/_default.scss

@@ -0,0 +1,28 @@
+@use '../abstract' as var;
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Lato', sans-serif;
+  color: var.$font-color-base;
+  background-color: var.$color-grey;
+
+  @include var.is-tablet {
+    background-color: var.$color-white;
+  }
+}
+
+p {
+  padding: 1rem 0;
+}
+
+img {
+  width: 100%;
+}
+
+@at-root ul#{&} {
+  list-style: none;
+  padding-left: 0;
+}

src/assets/scss/base/_index.scss

@@ -0,0 +1,2 @@
+@forward 'reset';
+@forward 'default';

src/assets/scss/base/_reset.scss

@@ -0,0 +1,12 @@
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/assets/scss/components/_box.scss

@@ -0,0 +1,15 @@
+@use '../abstract' as var;
+
+.box {
+  margin-top: 1rem;
+  min-width: 23rem;
+  background-color: var.$color-white;
+  border: 1px solid var.$color-grey-border;
+  border-radius: 2px;
+
+  &.--no-border {
+    @include var.is-tablet {
+      border: none;
+    }
+  }
+}

src/assets/scss/components/_button.scss

@@ -0,0 +1,12 @@
+@use '../abstract' as var;
+
+.button {
+  display: block;
+  margin: .6rem 0;
+  padding: .4rem;
+  font-weight: var.$font-weight-bold;
+  background-color: var.$color-success;
+  color: var.$color-white;
+  border-radius: 2px;
+  cursor: pointer;
+}

src/assets/scss/components/_image.scss

@@ -0,0 +1,36 @@
+@use '../abstract' as var;
+
+$size: 4rem;
+$size-small: 2.5rem;
+.image {
+  display: block;
+  width: 100%;
+
+  &__avatar {
+    width: $size;
+
+    @include var.is-tablet {
+      width: $size + 1.5;
+    }
+
+    &.--big {
+      width: $size * 3;
+    }
+
+    &.--small {
+      width: $size-small;
+    }
+
+    &.--tiny {
+      width: $size-small - 1;
+    }
+  }
+}
+
+[class^="icon-"] {
+  font-size: 1.3rem;
+
+  @include var.is-tablet {
+    font-size: 2rem;
+  }
+}

src/assets/scss/components/_index.scss

@@ -0,0 +1,6 @@
+@forward 'logo';
+@forward 'image';
+@forward 'box';
+@forward 'input';
+@forward 'button';
+@forward 'overline';

src/assets/scss/components/_input.scss

@@ -0,0 +1,18 @@
+@use '../abstract' as var;
+
+.input {
+  background: var.$color-grey;
+  border: 1px solid var.$color-grey-border;
+  flex: 1 0 auto;
+  margin: .2rem 0;
+  outline: 0;
+  overflow: hidden;
+  padding: .5rem 0 .5rem .5rem;
+  text-align: center;
+  font-size: 1rem;
+  text-overflow: ellipsis;
+
+  &__search {
+    max-width: 14rem;
+  }
+}

src/assets/scss/components/_logo.scss

@@ -0,0 +1,17 @@
+@use '../abstract' as var;
+
+.logo {
+  max-width: 10rem;
+
+  &--small {
+    height: 3rem;
+
+    @include var.is-tablet {
+      height: 4rem;
+    }
+  }
+}
+
+.logo-store {
+  max-width: 9rem;
+}