Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Instalación de SASS y configuración inicial

37/43
Recursos

Instalación de SASS con NPM:

npm install -g sass

Si usas Windows puedes usar el gestor de paquetes Chocolatey Package Manager e instalar SASS con el siguiente comando:

choco install sass

Si usas Mac puedes usar Homebrew para instalar SASS con el siguiente comando:

brew install sass/sass/sass

Aportes 200

Preguntas 49

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Es mas facil con VSCode:
1) instalan:

2) cambian el nombre del CSS a SCSS:

3) Click en Watch Sass

4) fin:

Escribir sass y luego la ruta de los archivos me daba un error como este.

sass Only two positional args may be passed

Me funciono colocando únicamente el nombre del archivo.

sass styles.scss styles.css

video sencillo de como iinstalar sass y compilar
https://www.youtube.com/watch?v=A1tyKkkziTc

Nota mental: Después de este curso, me pasaré a desarrollar en Linux.
Instalar todo esto en Windows es una pesadilla D:

Para los que esten en Visual studio Code les recomiendo esto en cuanto a la instalacion de Sass:

https://www.youtube.com/watch?v=A1tyKkkziTc

Platzi tiene un curso de Sass enlace

Se me hizo mucho rollo lo que hizo para compilar el css. No tienes que poner toda la ruta, te metes al directorio de tu archivo y pones: sass --watch styles.scss styles.css y ya.

Para algunos que no le funciona como esta descrito, si estan en la carpeta donde esta el archivo css
solo tienen que invertir el orden

en ves de : sass style.scss style.css

pondrán: sass style.css style.scss

a mi me funciono de esa manera

Para users de ubuntu, deberán tener instalado previamente npm para poder utilizar sass.

sudo apt-get install npm
npm install -g sass

Me tomaré un respiro para entender este laberintotrabalenguas

les comparto estos videos enseñan desde la instalacion y explica todo :
https://www.youtube.com/watch?v=Nro1WwTdCK4&list=PLPl81lqbj-4I4VwUdjbV2iFg7wispiXKP

Tambien se puede puede construir el .css asi, nos movemos a la carpeta de los estilos si la tenemos con cd con la consola -> sass archivo.scss archivo.css y te lo saca igual menos lio con las rutas. A mi parecer. Saludos a todos.

Les comparto el repositorio del curso
https://github.com/platzi/curso-frontend-escuelajs

Observaciones que deben tomar en cuenta al momento de correr SASS

1)

si se encuentran desde la terminal en la ruta donde se encuentra el archivo SCSS solo basta con poner

sass style.scss style.css

y con eso ya te crea los archivos style.css y el style.css.map

2)

si solo ejecutaste el comando anterior y estas cambiando cosas en el style.SCSS pero no se reflejan en el style.CSS y menos en el HTML debes correr la línea

sass --watch styles.scss style.css

esa línea lo que hace es que todo cambio que se realice en el archivo .scss se vea reflejado en el .css

Otra forma a través de visual studio code es instalar la extensiòn “Live Sass Compiler”, me parece màs fàcil de trabajar, solo se guardan los archivos css con la extensiòn .scss

Puedes crear una carpeta y dentro de ella guardar el archivo css de la siguiente forma usando git bash
Estando en la carpeta de tu proyecto:
$ sass ./style.scss ./css/style.css
localizar el archivo .scss lugar donde se guarde el archivo css
Nota: estoy separando mucho el comando solo para ejemplificar,
el siguiente seria el comando a usar
$ sass ./style.scss ./css/style.css

Esto te debería de crear (si no la tienes) una carpeta con nombre css donde estará guardado el archivo .css y .css.map generado por el archivo style.scss

Para los que tienen windows y tienen dudas con la instalacion les recomiendo que vean la segunda clase del curso **Prework **

Alli sabran como instalar npm en sus pc y como usarlo

Saludos!

Yo trabajo con Koala App.
Es un software que integra SASS y LESS para evitar el tener que tabajar con la terminal.
koala-app.com

Que dolor de cabeza es hacer estas cosas desde Windows

A modo de recomendación, para que el comando se ejecute correctamente, procuren que los nombres de las carpetas en donde esta su proyecto (toda la ruta), no contengan espacios, si es así, deben cambiarlos

A los que les aparece un error al instalar sass utilicen sudo npm install -g sass eso les dará los permisos necesarios para iniciar la descarga.

Me funciono así !


[email protected]57BHA14 MINGW64 ~/Desktop/Platzi/FRONTEND DEV
$ cd css

[email protected]57BHA14 MINGW64 ~/Desktop/Platzi/FRONTEND DEV/css
$ sass styles.scss styles.css

[email protected]57BHA14 MINGW64 ~/Desktop/Platzi/FRONTEND DEV/css
$```

Otra opcion es ingresar a la directorio donde se encuentra el archivo scss y aplicarlos de esta manera:

➜  inicio-sesion ls
iniciosesion04.html  style_ini_sesi.scss
➜  inicio-sesion sass style_ini_sesi.scss style_ini_sesi.css
➜  inicio-sesion ls
iniciosesion04.html  style_ini_sesi.css  style_ini_sesi.css.map  style_ini_sesi.scss
➜  inicio-sesion```

los que tengan problemas en windows para ejecutar sass porque sale un anuncio como «No se puede cargar el archivo XXXX.ps1 porque en el sistema está deshabilitada la ejecución de scripts. Vea «get-help about_signing» para obtener más información»
Ejecuten el comando en power shell (no se si se podra desde la terminal en Visualstudio) Get-ExecutionPolicy, seguramente les devuelve “restricted”, ejecutan lo siguiente Set-ExecutionPolicy Unrestricted, luego le dan Si y listo, ya Sass les debe funcionar como a la profe y como a mi.

Yo tengo algunas carpetas con espacios y eso hace que me genere error cuando intento pegar una ruta larga donde están incluidas esas carpetas con espacios. Si eso te pasa a ti, ve directamente a la carpeta y haz la conversión ahí mismo…

sass archivo.scss archivo.css

En la línea de arriba recuerda estar en la misma carpeta donde está “archivo.scss”

La forma más directa de hacer que esto suceda es en su terminal. Una vez que se instala Sass, puede compilar su Sass a CSS utilizando el sass comando. Tendrá que decirle a Sass desde qué archivo compilar y dónde generar CSS . Por ejemplo, ejecutar sass input.scss output.css

https://desarrolloweb.com/articulos/que-es-sass-usar-sass.html
este articulo les sera de gran ayuda para entender mejor, yo sufri hasta con la conversion de .scss a .css cuando al final era tan simple con solo poner

sass ejm.scss ejm.css

La verdad que estar copiando y pegando la ruta del archivo es un poco ineficiente y abrumador.
Les recomiendo sacar algun curso de comando y de la terminal para que sepan comandos basicos y ser mas productivos.
En este caso creo que es mejor simplemente moverte a la carpeta donde esta el archivo sass y asi solo usar sass style.scss style.css para compilar, y si queremos compilar automaticamente los cambios que estamos haciendo usar sass --watch style.scss style.css

Qué hay de PostCss?

Realmente no comprendí nada de este video :v

Para evitar escribir toda la ruta del archivo, es mejor ubicarse en el termina en la carpeta donde se encuentra el archivo styles.scss y de esa forma solo usar el comando

sass styles.scss styles.css

Me presentaba el error:

Pero me di cuenta que la solución estaba a la vista:

Es decir, primero escribir el comando sass , seguido del archivo .scss y despues el archivo .css

Tengo este problema e hice paso a paso todos los procedimientos del video incluyendo la instalación con npn previamente me toco instalar node.js porque no tenía ni idea que era npn

No puedo avansar hasta solucionar este tema

Estuve explorando las opciones tanto de usar la extension Live Sass Compiler asi como manejarlo desde la consola git bash y personalmente la consola es mágica pues puedes manosear todo lo que quieras y me hace sentir un hacker XD.

Dentro de Live Sass Compiler vi que para cambiar la carpeta donde se creaban tus archivos .css y .css.map tenias que meterte a unas cuantas configuraciones. Desde la consola solo le dices donde se guarde en un comando y listo.

Estoy seguro que desde la consola también puedes manipular como se comprime el archivo .css . Nuevo reto

Para quienes tienen el problema del Error al instalar SASS desde la consola y deben instalar nvm (Node Version Manager), para luego instalar node.js con “nvm install node”, leer bien el siguiente articulo para una correcta instalación: https://www.sergiolepore.net/2014/06/30/nvm-instalando-y-usando-node-version-manager/

Sobre todo es importante saber esto: (Sacado del mismo articulo)
¡ATENCIÓN!
A todos los usuarios de Ubuntu, principalmente: mucho cuidado al copiar instaladores de internet. Algunos caemos en este asunto de que mandamos sh a algún script de terceros. ¿Y el problema de esto? Muchos desarrolladores asumen que en todos los sistemas operativos, sh es alias de bash. Grave error. En Ubuntu, sh es alias de dash, una shell completamente diferente.
Vemos ahora que el script de instalación depende de bash para ejecutarse, pero le encarga la tarea a sh (que es dash). ¿Cómo lo solucionamos? Fácil, reemplazamos sh por bash y ya estamos listos.
Una vez instalado nvm y node.js con nvm, podremos ejecutar el comando npm install -g sass y funcionará.

Ella en el terminal de Vs-Code tiene ‘zsh’, a mi no me aparece y tampoco puedo ponerlo, que debo hacer? Gracias!

Para una mejor explicación de como enlazar CSS y SASS , den clic Aqui

Cuando instalaba con npm me aparecía que se instaló correctamente pero luego no reconocía ningún comando del sass, lo que hice fue instalar:

sudo apt install ruby-sass

La sufrí bastante, porque usaba fish. Luego cambié a zsh, instalé homebrew y luego sass 😃

Hola a todos, se que es un poco obvio, pero yo tarde un tiempo en saber que es npn y como instalar scss. para las personas que están empezando en el desarrollo web como yo.

Deben instalar Node js, luego abrir la terminal en visual studio code y por ultimo ejecutar los comandos.

https://www.youtube.com/watch?v=QFAnWcridxI

Por si acaso se les dificultó la instalación con la documentación de la profesora, les dejo un video para la instalación (windows) que es bastante descriptivo.

Una vez que installo sass (npm install -g sass) no me deja ejecutar el comando sass.
Me sale zsh: command not found: sass
¿Que puedo hacer?

Sass me gusta mucho, es muy fácil de usar y muy potente. Aquí usamos directamente el compilador de Sass, pero en un proyecto es normal que también uses bundlers y transpiladores para JavaScript, entonces tener tantas herramientas instaladas que hagan una cosa en específico que vuelve tedioso, afortunadamente existe webpack, el cual nos ayudará a de alguna manera tener todo en uno, claro, hay que configurarlo, pero tampoco es un problema, porque afortunadamente existen herramientas preconfiguradas para todo esto, la que más me gusta es Laravel Mix que te permite transpilar y hacer bundles de JavaScript y a su ves compilar el Sass todo con un solo comando ^^ Pd. Laravel Mix no es Laravel, es una dependencia de Laravel para Frontend que se puede usar en cualquier proyecto

Hay una extension
Live Sass Compiler
ayuda muchisimo

Esta clase no está muy fácil de entender, sin embargo, averiguando un poco, hay varios aportes con consejos para compilar a través de Visual Studio Code con su extensión «Live Sass Compiler» y logré hacer todo lo que hizo la profe en esta clase en menos de cinco minutos.

Ojalá en el futuro actualicen esta clase o se pueda explicar de una forma más fácil de comprender. A veces supongo que asumen que ya sabemos cómo llegar hasta ahí.

Tenia problemas para ejecutar sass en la terminal en Vs Code usando windows 7

Me daba un mensaje de error en color rojo <<No se puede cargar el archivo porque en el sistema está deshabilitada la ejecución de scripts>>.

Econtre que el error era porque en el sistema esta deshabilitada la ejecución de scripts.

Si abrimos el Windows PowerShell como administrador y ejecutamos el comando «Get-ExecutionPolicy» nos tendría que devolver «Unrestricted» o lo que es lo mismo «Restringido». Para cambiar esta configuración basta con ejecutar «Set-ExecutionPolicy Unrestricted».

Luego cerre Vs Code, lo abri nuevamente y ya pude usar sass

Espero les sirva 😃

Para los usuarios de VSCode hay una extensión muy simple

Solo basta con activarlo cuando lo queramos usar y automáticamente creara un archivo css en la ruta donde se encuentre tu archivo sass .

Posteriormente compilara cada vez que guardemos los cambios en nuestro archivo sass

To be honest, I almost drove installing sass on my WSL (Windows Subsystem for Linux) crazy. But finally I could. the thing was I needed sudo rights, so wrote the next command sudo npm install -g sass and after checking the instalation I typed sass --version.
I share my the structure creded after compiling my *.css files
https://github.com/borisbikes/platzi/tree/main/JSChallenge/frontend-developer/classes/37SASS/main
Cheers, mates. ✌😎

Ayuda porfa.
Tengo este error y no s que hacer.

npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]~2.1.2 (node_modules/sass/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/roches/.npm/_logs/2020-07-10T05_21_40_668Z-debug.log```

no me deja terminar la configuracion sass

DESKTOP-QC83MQQ% pwd
/mnt/c/proyecto
DESKTOP-QC83MQQ% sass c/proyecto/iniciar-sesion/styles.scss c/proyecto/iniciar-sesion/styles.css
Error reading c/proyecto/iniciar-sesion/styles.scss: no such file or directory.
DESKTOP-QC83MQQ%

Ooookkk¡ Aqui es cuando quiero tirar la toalla¡ La mayoria usamos Windows y con sus Mac todo parece tan facil #MundoInjustoyCruel

Recomiendo hacerlo como el curso pero para más tarde o gente que no le guste la terminal, otra opción de forma visual es usar algun programa como puede ser Koala, que compila tanto Sass como Less a CSS.

Koala App

Funcionando, tener en cuenta que si tienes espacios en la rura del archivo hay que colocar comillas dobles

sass "/mnt/c/DBZ/DBZ ESTUDIO/PROGRAMACION/FrontendDeveloper/pagina/styles.scss" "/mnt/c/DBZ/DBZ ESTUDIO/PROGRAMACION/FrontendDeveloper/pagina/styles.css"

al intentar correr sass estoy obteniendo el error

"Command ‘sass’ not found, but can be installed with:

sudo apt install ruby-sass"

Será porque no tengo instalado zsh?

Para hacer la conversion mas fácil pueden instalar la Extensión en Visual Studio “Live Sass Compiler”, luego le dan en la parte de abajo donde dice “Watch Sass” y lo genera automático en la carpeta.

Como yo tengo mis archivos css separados decidí buscar una forma de compilarlos todos de una sola vez.

Encontré un código en github de un archivo Makefile que modifiqué un poco. ¡Ojo! es importante que el archivo tenga el nombre de Makefile

CSS_C=sass
CSS_FLAGS=
CSS_SRC=scss#carpeta fuente donde tienes tus archivos scss
CSS_OUT=css#carpeta donde se crearan tus archivos css y css.map
CSS_TARGETS=$(patsubst $(CSS_SRC)/%.scss,%.css,$(wildcard $(CSS_SRC)/*.scss))

all: clean css

final: CSS_FLAGS = -t compact --sourcemap=none
final: all

css: $(CSS_TARGETS)

.SECONDEXPANSION:
%.css: $(CSS_SRC)/$$*.scss
	$(CSS_C) $(CSS_FLAGS) $? $(CSS_OUT)/[email protected]

 clean:
	rm -f $(CSS_OUT)/*
#para utilizar el makefile unicamente coloca en consola "make" sin comillas
#para eliminar los archivos css ejecuta "make clean" sin comillas 
#fuente:
#https://gist.github.com/emilbjorklund/77cb39aafd04d60ef1f5

En un video de GIOCODE youtube, menciona que tambien podems utiizar el sass en VS

en mi caso lo que hice fue primero irme a la carpeta donde esta el archivo styles.scss y allí colocar

sass --watch styles.scss:styles.css

Para los usuarios de windows, la instalación de Sass es bastante sencilla: https://sass-lang.com/install <- Aquí explican

Pasos previos tener instalado -> nodejs

  1. npm install -g sass

Listo c:

Para verificar le das sass --version y te debería aparecer la versión del sass.

Realmente Git bash, Node y VSCode son FUNDAMENTALES para acortar procesos a un programador en windows, realmente yo no tuve ningun problema con ellos en esta clase y eso que tengo windows 32 bits

Al hacerlo me marcaba un erorr que decia:

sass : File C:\Users\simon\AppData\Roaming\npm\sass.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. At line:1 char:1 + sass C:\Users\simon\Desktop\html\inicio-de-sesion\styles-iniciosesion … + ~~~~ + CategoryInfo : SecurityError: (😃 [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

La solucion es correr el Windows PowerShell como administrador, y desde ahi poner el comando “Set-ExecutionPolicy RemoteSigned”

Para los que quieran trabajar en Linux (Normalmente mas amigable para los que trabajamos en este mundo), pero no quieren dejar de usar Windows y usar una maquina virtual no es una opcion para ustedes, pueden usar WSL (Windows Subsystem for Linux), lo que te permite correr linux en paralelo con Windows, te dejo aqui un enlace de MICROSOFT sobre como instalarlo: https://docs.microsoft.com/en-us/windows/wsl/install-win10

[Evitar error]

sass Only two positional args may be passed

El problema surge al no quitar los espacios en los nombres de carpetas o archivos que conforman las direcciones absolutas, ejemplo:
/User/tu_nombre/Platzi/Curso front-end/styles.scss (error)
/User/tu_nombre/Platzi/Curso_front-end/styles.scss (bien)

buenas noches, me sale este error

sass : El término ‘sass’ no se reconoce como nombre de un cmdlet, función, archivo de script o
programa ejecutable. Compruebe si escribió correctamente el nombre o, si incluyó una ruta de
acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo.
En línea: 1 Carácter: 1

  • sass style.scss style.css
  •   + CategoryInfo          : ObjectNotFound: (sass:String) [], CommandNotFoundException
      + FullyQualifiedErrorId : CommandNotFoundException

Hay una extensión en VS llamada Sass Live Compiler de Ritwick Dey, que les facilita mucho la vida. Espero les sirva.
Por cierto la extensión Live Server del mismo autor también es una joya.
Saludos!.

Un vídeo corto y complementario para aprender más sobre SASS:
https://www.youtube.com/watch?v=rDBzoq86SXY

Como reto personal estoy desarrollando un pequeña librería de estilos utilizando SASS.
Les dejo el repositorio por si la quieren utilizar o contribuir: https://github.com/adonyssantos/palm-treee-css

Si ya tienes instalado nodejs es solamente seguir los pasos de la página: https://sass-lang.com/install
Al hacerlo ya lo tienes instalado y no necesitas hacer la línea del chocolatey package

Dejo mi página de Notion en la cual al día de hoy todavía sigo sumando cosas, ojalá le sirva a alguien:
https://www.notion.so/Sass-6d07272b3eca4715b648564c0b792569

Instalando sass no me funciono me sale un error al compilar pero con el Live Sass de visual studio me corre perfecto

tengo problemas con la termina powershell me sale este mensaje:
\sass.ps1 no
está firmado digitalmente. No se puede ejecutar este script en el sistema actual.

trate de solucionarlo de todas las formas pero hasta ahora nada ya no se q hacer me está atrasando 3 días

Besties I think it’s easier using an app like Prepos, just saving your project it compiles it and groups all the files in the corrects folders

¿Para que sirve la bandera --watch? Porque al final la maestra no la utilizó

Les recomiendo tomar los cursos de Preprocesadores de la escuela de Desarrollo Web.

Si no vamos a ver Sass más a profundidad, porque hacer esto?

Es importante saber configurar tu entorno de trabajo de manera manual. Pero después que ya tienes eso claro. Recomiendo utilizar una extensión de VScode llamada live sass compiler.

joda eso de consola me esta causando molestia, pero bueno se pudo ajajajjaja

:v

para los que tienes problemas con la isntalacion o los comando les recomadno “prepros” que es muy bueno y tiene una interfaz muy facil de usar

Antes de este curso estaba usando Atom como editor de código, pero al ver que VSC tiene una terminal integrada y que la puedo cambiar a que sea git bash y manejar todo desde ahi pffff me lo instalé corriendo.

Gracias Atom fue lindo mientras duró XD

para los que no tienen la consola ir al curso anterior a este en la escuela de js

Usando Live Sass Compile

Les recomiendo la herramienta Prepros nos ayuda a compilar SASS, STYLUS, LESS Y PUG en un solo lugar 😊👍

Prefiero utilizar Prepros

Yo he practicado antes con SASS, para mi gusto es muy cómodo a la hora de trabajar ya que solo se necesita de espaciados con el tabulador para crear clase por clase con sus respectivos atributos. Yo uso un programa externo para trabajar con SASS llamado Koala, compila cualquier archivo SASS y luego los implementa en un archivo CSS, si les gusta aqui esta el link de la documentacion:
https://github.com/oklai/koala/wiki#docs

No me funcionó el métopdo propuesto en el video tutorial con brew, lo desarrolle con la propuesta de Leonardo Tenorio con Live Sass Compiler y funcionó de inmediato. Posdata: Hice paso a paso todo al pie de la letra. Gracias

Me demore un poco mas de lo esperado, por que uso Windows con Ubuntu en WSL lo que me lio al principio. Lo logre, pero sigue siendo mejor opcciòn usar la extensiòn

live sass compiler

En Visual Studio Code.

no es necesario colocar la ruta solo ubicarse donde esta el archivo y luego ejecutar el comando.

😃

Despues de hacer la prueba teniendo en cuenta que manejo 4 archivos css, quedó de la siguiente manera:

Muy util los preprocesadores.

Estoy un poco confundido, pero bueno vamos a repetir video…

Para los que les salga el siguiente error en Windows 10: “No se puede cargar el archivo tu-ruta\npm\sass.ps1 porque la ejecución de scripts está deshabilitada en este sistema.” Lo pueden resolver siguiendo estas instrucciones: https://protegermipc.net/2018/11/22/permitir-la-ejecucion-de-scripts-powershell-en-windows-10/

es necesario usar saas para el project que estamos haciendo ahora?

No entiendo por qué pasar de CSS a SASS y de SASS regresarlo a CSS… ¿Solo quería mostrar que se puede hacer eso o porque más fue?

Link del curso de teffcode en github: https://github.com/teffcode/sass-workshop

Configuralo fácil:

sass --watch $(pwd)/styles.scss $(pwd)/styles.css

Esto mismo se puede hacer con Prepros no?