Vue Components con Preprocesadores de CSS

Cuando se usa la función rgba en Sass se puede tambíen usar los colores declarados en variables para no usar los colores en rgba. E.g

rgba($color, 0.5)

Con scss tambien podemos hacer esto

form{
  background: $color1;
  &:hover{
    background: $color2;
  }
}

Preprocesadores CSS

Me he enamorado de Vue 💚

lo hice con dos componentes para los botones 😄

Form.vue

<template>
  <h1>{{ msg }}</h1>
  <form v-for="movie in movies" v-bind:key="movie.name">
    <h2>{{ movie.name }}</h2>
    <SubstractButton
      v-on:substract="subtractTickets(movie)"
      v-bind:movie="movie"
    />
    {{ movie.quantity }}
    <AddButton v-on:add="addTickets(movie)" v-bind:movie="movie" />
  </form>
</template>

<script>
import AddButton from "./AddButton.vue";
import SubstractButton from "./SubstractButton.vue";
export default {
  name: "Form",
  components: {
    AddButton: AddButton,
    SubstractButton: SubstractButton,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      movies: [
        { name: "DareDevil", quantity: 0, available: 5 },
        { name: "The Punisher", quantity: 0, available: 3 },
        { name: "Avengers", quantity: 0, available: 4 },
      ],
    };
  },
  methods: {
    addTickets(movie) {
      movie.quantity += 1;
    },
    subtractTickets(movie) {
      movie.quantity -= 1;
    },
  },
};
</script>

AddButton.vue

<template>
  <button
    type="button"
    v-on:click="add"
    :disabled="movie.quantity >= movie.available"
  >
    +
  </button>
</template>

<script>
export default {
  name: "AddButton",
  methods: {
    add() {
      this.$emit("add");
    },
  },
  props: ["movie"],
};
</script>

SusbractButton.vue

<template>
  <button type="button" v-on:click="substract" :disabled="movie.quantity <= 0">
    -
  </button>
</template>

<script>
export default {
  name: "SubstractButton",
  methods: {
    substract() {
      this.$emit("substract");
    },
  },
  props: ["movie"],
};
</script>

Ojo, el propio sass ya no recomienda usar import, recomienda es el suo de used y forward

Desde la W3C han atendido varias de las razones por las que surgieron scss y similares; implicando cambios que ya hacen parte de CSS Nivel 3, haciendo actualmente inecesario usar scss u otros preprocesadores, o por lo menos si para lo único que se quiere es para poder trabajar con variables, Por ejemplo:

Variables

/* Para declararlas con -- */
:root {
  --mi-color: red;
}

/* Para usarlas, con var() */
em {
  color: var(--mi-color);
}

(En otras palabras, no es necesario instalar ningun preprocesador, ya hay soporte nativo en navegadores que soporten CSS3, a la fecha la mayoría, se puede trabajar simplemente con CSS)

Por si a alguien le interesa debajo dejo el código.

**App.vue**

//HTML
<template>
	<h2>Películas</h2>
	<Form/>
</template>

//JS - Vue
<script>
	import Form from "./components/Form.vue";
	export default {
		name: "App",
		components: {
			Form: Form,
		},
	};
</script>

//CSS - SCSS
//En otro archivo llamado _variables.scss
//Se guardan las siguientes varibles con sus respectivos valores.
//$bg: #ccffcc
//$color: #030
<style lang="scss">
	@import "./styles/_variables.scss";

	html,
	body {
		background: $bg;
		color: $color;
		margin: 0;
		font-family: sans-serif;
	}

	h2 {
		border-bottom: 1px solid $color;
		padding-bottom: 10px;
	}
</style>

Form.vue

<template>
  <form v-for="(movie, i) in movies" :key="i">
    <h3>{{ movie.name }}</h3>
    <button
      type="button"
      v-on:click="movie.quantity--"
      v-bind:disabled="movie.quantity <= 0"
    >
      -
    </button>
    {{ movie.quantity }}
    <button
      type="button"
      v-on:click="movie.quantity++"
      v-bind:disabled="!(movie.quantity < movie.available)"
    >
      +
    </button>
  </form>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      movies: [
        { name: "Avengers", available: 5, quantity: 0 },
        { name: "Wonder Woman", available: 15, quantity: 0 },
      ],
    };
  },
};
</script>

//<!-- Add "scoped" attribute to limit CSS to this component only -->
//CSS - SCSS
//En otro archivo llamado _variables.scss
//Se guardan las siguientes varibles con sus respectivos valores.
//$bg: #ccffcc
//$color: #030
//$color2: rgba(50, 100, 50, 0.5)
<style lang="scss" scoped>
	@import "./styles/_variables.scss";

	form {
		background: $bg;
		border: 1px solid $color;
		margin: 0 50px 25px;
		font-family: courier;
		padding: 10px 25px 25px;
		text-aling: center;
		transform: scale(1);
		transition: 0.3s transform;
	}

	form:hover {
		transform: scale(1.2);
	}

	button {
		background: $color2;
		border: 1px solid transparent;
		cursor: pointer;
		padding: 5px 10px;
		transition: border-color 0.15;
	}

	button:hover {
		border-color: $color2;
	}

	button[disabled]{
		opacity: 0.5;
	}
</style>

Código final de esta clase:
Archivo app.vue

<template>
  <h2>Películas</h2>
  <Form />
</template>

<script>
import Form from "./components/Form.vue";
export default {
  name: "App",
  components: {
    Form,
  },
};
</script>

<style lang="scss">
@import "./styles/_variables.scss";

html,
body {
  background-color: $bg;
  color: $color;
  margin: 0;
  font-family: sans-serif;
}
h2 {
  border-bottom: 1px solid $color;
}

</style>

Archvo styles.scss

$bg:#ccffcc;
$color:#030;
$color2: rgba(50,100,50,0.5);

Archivo Form.vue

<template>
  <form v-for="(movie,i) in movies" :key="i">
    <h3>{{movie.name}}</h3>
    <button
        type="button"
        @click="()=>movie.quantity--"
        :disabled="movie.quantity<=0"
      >
        -
      </button>
      {{movie.quantity}}
    <button
        type="button"
        @click="()=>movie.quantity++"
        :disabled="movie.quantity>=movie.available"
      >+
      </button>
  </form>
</template>

<script>
export default {
  name: "HelloWorld",
  // props: {
  //   msg: String,
  // },
  data(){
    return {
      movies:[
        {
          name: "Avengers",
          available: 3,
          quantity: 0,
        },
        {
          name: "Terminator",
          available: 5,
          quantity: 0,
        },
      ]
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../styles/_variables.scss";

form {
  background-color: $bg;
  border: 1px solid $color;
  margin: 0 50px 25px;
  font-family: "Courier New", Courier, monospace;
  padding: 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.3 transform;
}
form:hover {
  transform: scale(1.2);
}

button {
  background: $color2;
  border: 1px solid $color;
  cursor: pointer;
  padding: 5px 10px;
}

button:hover {
  border-color: $color;
}

button[disabled] {
  opacity: 0.5;
}

</style>

Un resumen del código y breve explicación

Cambiamos los estilos en la Aplicación principal App.vue

<style lang="scss">
@import "./styles/_variables.scss";
html,
body {
  background: $bg;
  color: $color;
  margin: 0;
  font-family: sans-serif;
}
h2 {
  border-bottom: 1px solid $color;
  padding-bottom: 10px;
}
</style>

En este aspecto se pone en la etiqueta style el atributo lang para trabajar con el lenguaje scss

Se importa los colores definidos en un archivo a través de

@import

En nuestro componente Form.vue se hace el mismo procedimiento quedando así

     ```jsx
<style lang="scss" scoped>
@import "../styles/_variables.scss";
form {
  background: $bg;
  border: 1px solid $color;
  margin: 0 50px 25px;
  font-family: courier;
  padding: 10px 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.3s transform;
}

form:hover {
  transform: scale(1.2);
}
button {
  background: $color2;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 5px 10px;
  transition: border-color 0.15;
}
button:hover {
  border-color: $color2;
}
button[disabled] {
  opacity: 0.5;
}
</style>

No entiendo porque no se colocot todo los estilo en el archivo sass y ya. en de tener una parte separada en el js.

Yo hice un componente de un <div> con un <h2> y <p> anidados.

<template>
  <div v-for="profile in profiles" :key="profile.name">
    <h2>{{ profile.name }}</h2>
    <p>{{ profile.occupation }}</p>
  </div>
</template>

<script>
export default {
  name: "Container",
  data() {
    return {
      profiles: [
        {
          name: "Dahmer",
          occupation: "Carnicero",
        },
        {
          name: "Daniel",
          occupation: "programador",
        },
        {
          name: "Jo",
          occupation: "Chef",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(130, 50, 40, 0.5);
  border: 1px solid #000;
  margin-top: 25px;
}
h2 {
  color: #000;
}
</style>

Me esta gustando vue!

Sass

Así quedó el reto:

Button.vue

<template>
  <button
    v-if="math == `add`"
    type="button"
    :disabled="movie.quantity >= movie.available"
    v-on:click="movie.quantity += 1"
  >
    +
  </button>
  <button
    type="button"
    v-else-if="math == `subs`"
    :disabled="movie.quantity <= 0"
    v-on:click="movie.quantity -= 1"
  >
    -
  </button>
</template>

<script>
export default {
  name: "Button",
  props: {
    math: String,
    movie_prop: Object,
  },
  data() {
    return {
      movie: this.movie_prop,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/_variables.scss";
button {
  background-color: $btnbg;
  border: none;
  color: $color;
  padding: 5px 15px;
  transition: 0.2s background-color;
}

button:hover {
  background-color: $btnbgHover;
  cursor: pointer;
}

button[disabled] {
  background-color: rgba($btnbg, 0.5);
}

button:hover[disabled] {
  background-color: rgba($btnbg, 0.5);
  cursor: default;
}
</style>

Adder.vue

<template>
  <Button math="subs" v-bind:movie_prop="movie" />

  {{ movie.quantity }}

  <Button math="add" v-bind:movie_prop="movie" />
</template>

<script>
import Button from "./Button";

export default {
  name: "Adder",
  components: {
    Button,
  },
  props: {
    movie_prop: Object,
  },
  data() {
    return {
      movie: this.movie_prop,
    };
  },
};
</script>

<style>
</style>

Title.vue

<template>
  <h3>{{ msg }}</h3>
</template>

<script>
export default {
  name: "Title",
  props: {
    msg: String,
  },
};
</script>

<style>
</style>

Form.vue

<template>
  <h2>Películas</h2>
  <form v-for="movie in movies" :key="movie.name">
    <Title v-bind:msg="movie.name" />

    <Adder v-bind:movie_prop="movie" />
  </form>
</template>

<script>
import Adder from "./Adder";
import Title from "./Title";

export default {
  name: "Form",
  components: {
    Adder,
    Title,
  },
  data() {
    return {
      movies: [
        {
          name: "Avengers",
          available: 3,
          quantity: 0,
        },
        {
          name: "Terminator",
          available: 5,
          quantity: 0,
        },
      ],
    };
  },
  // props: {
  //   msg: String,
  // },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../styles/_variables.scss";

form {
  background: $bg;
  border: 1px solid $color;
  margin: 0 50px 25px;
  padding: 10px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.2s transform;
  border-radius: 15px;
}

form:hover {
  transform: scale(1.1);
}
</style>

Viendo esta clase y recordando las cosas que sé que Vue.js me parece tan triste que la oferta laboral de Vue no sean tan grande como la de React… Vue tiene una construcción genial ^-^

Mis apuntes en Notion💚

Enamorado de vue!!!♥♥♥

. FINAL