Bueno, esto es lo que nos pasa a todos alguna vez: estás ahí, dándole al código, y de repente te topas con esa parte que a muchos les da pereza, considerada por un montón como la parte más compleja y tediosa de la programación. Y no, no estoy hablando de aprenderse un nuevo lenguaje de programación de inicio a fin, sino de ese monstruo llamado CSS.
Aunque no te voy a dar el truco para saltártelo, sí que tengo unos consejos que brindarte sobre la sintaxis que pueden hacer que estas batallas sean mucho más llevaderas. En serio, creo que con lo que estás apunto de leer o aplicar (espero en lo personal), puede cambiarle la cara a tus proyectos al menos en la parte de css jaja.
Para empezar vamos a crear un proyecto de cero, así que ve a tu terminal y escribirás lo siguiente
npm create vue@latestAquí te dejo la configuración con la que inicie el proyecto
Ahora escribirás esos comandos en verde para irnos al proyecto en la terminal, instalar dependencias y correr el proyecto en local, es decir en nuestra computadora.
cd sass-in-vue3/ && npm i && npm run devDespués de haber corrido los comandos de aquí arriba lo siguiente es irnos a la dirección que nos indicará la terminal, en mi caso aparece lo siguiente.
Así que en nuestro browser (chrome, safari, arc, edge), escribiremos la dirección que nos dice la terminal, en mi caso http://localhost:5173/ , esto puede cambiar según las actualizaciones de vue, solo pon la dirección que te indica la terminal y todo estará bien, confía en mi.
Ya terminamos por ese lado, ahora abre tu editor de código en el proyecto correspondiente que acabamos de crear, y si ya lo tienes en el terminal solo escribe code . como verás en el videito de acá abajo
Una vez con el edito de código abierto lo que haremos es muy sencillo, iremos al archivo app.vue, y aquí borrarás todo el documento, sin miedo, hazlo, después escribirás lo siguiente.
<template>
<div class="container">
<div class="welcome">
<h1>Bienvenidos a mi Blogggg</h1>
<img
src="https://i.pinimg.com/236x/b6/ef/77/b6ef77457af02e5a597703e4903a1dad.jpg"
alt="Imagen descriptiva">
<p class="">
Esta es una super descripción genérica para el blog de como usar sass. Aquí podrás encontrar contenido sobre programación, tecnología, y mucho más.
</p>
<div class="social-media">
<a
href="https://facebook.com"
target="_blank">
<img
src="https://i.pinimg.com/236x/56/30/d2/5630d2355f9da80b900fd4523389d169.jpg"
alt="Facebook">
</a>
<a
href="https://twitter.com"
target="_blank">
<img
src="https://i.pinimg.com/236x/07/df/57/07df57f369b03a4cc85a94bfb7002db9.jpg"
alt="Twitter">
</a>
<a
href="https://instagram.com"
target="_blank">
<img
src="https://i.pinimg.com/236x/73/ec/fe/73ecfe9b8b2801adf54eb66e58efc4dd.jpg"
alt="Instagram">
</a>
</div>
</div>
</div>
</template>
<style>
.welcome {
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.welcome img {
margin-top: 20px;
width: 150px;
height: auto;
border-radius: 10px;
}
.social-media {
margin-top: 20px;
}
.social-media a {
margin: 0 10px;
}
.social-media img {
width: 40px;
height: 40px;
transition: transform 0.3s ease;
}
.social-media img:hover {
transform: scale(1.1);
}
</style>
Solo copia y pega, esto es solo un template que generé con ChatGpt. Lo siguiente que tienes que hacer es eliminar todo el contenido default de la carpeta assets, ahora te muestro
Removerás esos tres archivos, y luego te irás al archivo main.js, como puedes ver aquí arriba se visualiza el archivo, está justo debajo de App.vue. Una vez que estés dentro de ese archivo tendrás que remover la siguiente linea.
El archivo te quedaría algo así
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
Una vez que hagas esto ve al browser y tendrías que visualizar algo así
Perfecto, si ves esto en tu navegador es que todo lo hiciste como te dije, paso a paso como un verdadero programador.
Lo siguiente será volver al terminal porque instalaremos unas dependencias
npm i sass sass-loader -DCuando hayas corrido el comando de arriba en la terminal, iremos a el proyecto, una vez aquí dentro de la carpeta src/ crearemos una carpeta llamada styles/, y dentro de esta carpeta haremos tres archivos que serán los siquientes _colorVariables.scss, _externalVariables.scss y _variables.scss, una vez que hayas hecho eso dentro de el archivo _colorVariables.scss escribirás los colores de tu proyecto, en mi caso escribí lo siguiente.
$orange: #ffa500;
$green: #b3ff00;
$blue: #00b5ff;
$pink: #ff00bd;Ahora iremos a el archivo _externalVariables, como lo puedes ver por el nombre ahí irán los imports necesarios para que sean externos a nuestro proyecto, por ejemplo las fuentes del proyecto, a continuación te muestro como establecer fuentes directamente desde google fonts, abre el sitio y verás lo siguiente en pantalla
Aquí escogeremos la fuente que nosotros deseemos, en mi caso escogeré la primera de la lista, esa que tiene de nombre "Strait". Primero presionamos la primera opción, me refiero a esta
Yo escogí esta, tu puedes escoger la que mas te guste, tienen una biblioteca gigantesca de fuentes.
Bueno, una vez seleccionado veremos lo siguiente, y presionaremos la siguiente opción
Después de haberlo hecho harás lo de aquí abajo
Después de copiar lo de aquí arriba en el archivo de _externalVariables.scss, haremos pegaremos lo que copiamos anteriormente, si no sabes que, observa el video de aquí arribita
<style>
@import url('https://fonts.googleapis.com/css2?family=Strait&display=swap')
</style>Vendrá así pero eliminaremos la etiqueta style, no la necesitamos, quedando de resultado lo siguiente
@import url('https://fonts.googleapis.com/css2?family=Strait&display=swap')Perfecto, ahora lo que haremos es movernos al último archivo llamado _variables.scss, y lo primero que haremos será importar lo de los archivos anteriores, lo harás de la siguiente manera
//colors
@import './colorVariables';
// typography
@import './externalVariables';Ahora a continuación de esto podremos establecer la magia de sass que nos facilita el uso de css en nuestro proyecto.
Sigue lo que haré a continuación
$font: 'Strait', sans-serif;
$size: 1rem;
* {
margin: 0;
box-sizing: border-box;
}
p {
color: $green;
}Aquí solo estrableceremos valores predeterminados que se usarán siempre a lo largo de nuestro proyecto.
A continuación solo nos faltaría decirle a Vue que estamos usando sass y que nos cargue estos valores en todos lados siempre que los establezcamos. Así que iremos al vite.config.js y escribiremos lo siguiente.
export default defineConfig({
plugins: [
vue(),
VueDevTools(),
],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import './src/styles/_variables.scss';
`
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
});
Debería quedarte algo así tu vite.config, lo que estamos haciendo aquí arriba es decirle a vue que cargue los estilos por defecto que establecimos antes, ahora iremos a nuestro app.vue, estamos a punto de lograrlo, solo sígueme en lo siguiente.
En tu app.vue irás la etiqueta style y escribirás lang="scss", quedaría algo así
<style lang="scss">
Ahora iremos el template y cambiaremos todos los nombres de las clases tomando como primera palabra la de el padre de la etiqueta, se que suena complicado, pero es sencillo, mira lo siguiente
<template>
<div class="container">
<div class="container-welcome">
<h1 class="container-welcome-title">Bienvenidos a mi Blogggg</h1>
<img
src="https://i.pinimg.com/236x/b6/ef/77/b6ef77457af02e5a597703e4903a1dad.jpg"
alt="Imagen descriptiva"
class="container-welcome-image">
<p class="container-welcome-description">
Esta es una super descripción genérica para el blog de como usar sass. Aquí podrás encontrar contenido sobre programación, tecnología, y mucho más.
</p>
<div class="container-welcome-social">
<a
href="https://facebook.com"
target="_blank">
<img
src="https://i.pinimg.com/236x/56/30/d2/5630d2355f9da80b900fd4523389d169.jpg"
alt="Facebook">
</a>
<a
href="https://twitter.com"
target="_blank">
<img
src="https://i.pinimg.com/236x/07/df/57/07df57f369b03a4cc85a94bfb7002db9.jpg"
alt="Twitter">
</a>
<a
href="https://instagram.com"
target="_blank">
<img
src="https://i.pinimg.com/236x/73/ec/fe/73ecfe9b8b2801adf54eb66e58efc4dd.jpg"
alt="Instagram">
</a>
</div>
</div>
</div>
</template>si lees detenidamente las clases que le colocamos a cada etiqueta verás que viene con el nombre del padre y le agregamos algo más en la etiqueta que estemos ubicados, peroooooo, ¿Por qué hacemos esto? Bueno realmente es porque a la hora de escribir css podremos usar las virtudes de sass para que adopte la misma sintaxis del template y no se vuelva algo engorroso de ver.
Con esos estilos la sintaxis dentro de la etiqueta style, se vería algo así
<style lang="scss">
.container {
&-welcome {
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
&-title {
font-size: 24px;
}
&-image {
margin-top: 20px;
width: 150px;
height: auto;
border-radius: 10px;
}
&-description {
font-size: 24px;
}
&-social {
margin-top: 20px;
display: flex;
gap: 16px;
img {
border-radius: 8px;
width: 60px;
height: 60px;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
}
}
}
</style>Observa lo bello que se ve esto, no solo reducimos líneas de estilos, si no mejoramos el entendimiento de nuestro archivo a nivel de estilos, así cualquiera que venga sea un junior o un senior podrá entender los estilos que estableciste en tus archivos.
Ahora te muestro como puedes jugar con las variables que estableciste anteriormente, por ejemplo a nivel de colores, ahora se encuentra así la vista de app.vue en el navegador
En la etiqueta style escribiremos lo siguiente
&-description {
font-size: 24px;
color: $pink;
}Recordemos que este color es el que establecimos anteriormente en el archivo _colorVariables.scss, ahora en el navegador veremos algo así
¿Ves lo fácil que fue? Bueno pues esto es una pizca de la magia que puedes hacer con sass en vue3.
Modifiquemos algo más, recuerdas que importamos una fuente para usarla, pero no la hemos establecido, si lees el texto rosado podrás notar que este texto tiene la fuente por defecto del navegador, pero te voy a enseñar a colocar la fuente para que no la tengas que estar estableciendo cada que llames una etiqueta p en tu archivo.
Solo ve nuevamente a _variables.scss, y escribirás lo siguiente
p {
color: $green;
font-family: $font;
}Ahora mira como se ve el navegador
Una fuente totalmente distinta, a la que teníamos originalmente, y lo mismo podemos hacer con fuentes, tamaños, altura, anchura, un sin fin de opciones para que tu modifiques y logres facilitarte la vida como programador frontend.
Estoy contento de que hayas al final, no te imaginas la emoción que me da que este blog pueda llegarte a ser de ayuda. Ahora solo debes jugar con los estilos y ver lo fácil que puede llegar a ser seguir esta sintaxis con el framework de sass
By yeyodev
