Estilos con SASS en Vue: Uso de Variables y Scope

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