Installing, Setup and Nesting | Starting with Sass

Поділитися
Вставка
  • Опубліковано 31 гру 2024

КОМЕНТАРІ • 118

  • @JesseShowalter
    @JesseShowalter  6 років тому +9

    I will be releasing a new video in this little mini-series every day for the next few days. Make sure you hit that little bell 🔔🔔🔔 so you know when it drops

  • @hassanatbusari4723
    @hassanatbusari4723 2 роки тому

    This is my first time using SASS as a developer, and I was able to set it up very easily. Thank you!

  • @user-zd1hj2lv3n
    @user-zd1hj2lv3n 5 років тому +3

    Every sass tutorial ive viewed has a different way of initially setting up sass so things can get confusing. I choose to use the Live Sass Complier extension in vsCode. Im sure knowing how to compile it manually using terminal has its own benefits but its the quickest way to get up a running for a newb like myself. By the way, Great series!

    • @JesseShowalter
      @JesseShowalter  5 років тому +1

      VS Code Live Sass is legit! I just wanna make sure people know the manual way too

  • @BenWindsorTV2
    @BenWindsorTV2 5 років тому +3

    Thank you so much for this video, I think it is the single best tutorial I have seen for SASS and for some reason the first to get it working as it's so simple, Thanks again!! :)

  • @danielreidy1918
    @danielreidy1918 4 роки тому +1

    Simple & clear...subscribed!

  • @draybaba
    @draybaba 3 роки тому +1

    I subscribed because Jesse Showalter is funny, gat swag and teaches well with fun!

    • @JesseShowalter
      @JesseShowalter  3 роки тому +1

      Thank you so much! Stoked you’re here!

  • @blahablast3070
    @blahablast3070 6 років тому +2

    Killer video man! I've watched a ton of coding tutorials. You have an excellent approach. I'm going to be recommending you to everyone.

  • @chatastrify
    @chatastrify 6 років тому +1

    Perfectt! This video and series is coming out just when i wanted to learn sass ! I will definetly keep up with the rest of the series.

  • @jlopekkos2164
    @jlopekkos2164 2 роки тому

    Just what I was looking for, thank you man

  • @alexsanchez-olvera2711
    @alexsanchez-olvera2711 6 років тому +1

    Awesome vid! You explained everything so clearly. Keep up the good work - would definitely love to see more tutorials like this in the future

  • @iuhere
    @iuhere 2 роки тому

    thank you very basic and to the point, helpful for getting started or setup , those tags might help video, "if possible" please include the difference of setting up in some other video on windows/linux/mac about setting nps as that is needed for the basic sass service and would complete the setup/tutorial part. Great job on this one. THank you and good luck for the next one! ❤

  • @comaster5066
    @comaster5066 4 роки тому +1

    nice tutorial but can u zoom the terminal can't see the command

    • @JesseShowalter
      @JesseShowalter  4 роки тому

      Whoops! Sorry about that! I’ll be sure to zoom in next time.

  • @lovorka3321
    @lovorka3321 5 років тому

    is it faster and better to use apps or comand line forinstalling sass? im using scout app in my class. seems dull..

  • @HanishGuptaHoney
    @HanishGuptaHoney 4 роки тому +1

    Good Explanation.
    It Helped me.
    Thanks!

  • @minowmuncher
    @minowmuncher 4 роки тому +1

    Thank you dude! Insanely clear and concise.

  • @dariusemanuel8895
    @dariusemanuel8895 3 роки тому +1

    Still perfect this video in 2021. THX!

  • @haidarhanif7772
    @haidarhanif7772 4 роки тому +1

    "sass style.sass:style.css" doesn't work on mine. Any solutions?

  • @raissatalehata8685
    @raissatalehata8685 4 роки тому +1

    Thank you for sharing the step by steps in installing this very useful css extension. I was having a trouble in the beginning because macOS Catalina requires the user to install Homebrew prior to installing Sass. But at the end, it's all work out! Thank goodness. Anyway, I have a quick question. Do we need to set --watch every time we create a new project? Or does it automatically connected once we set --watch in our terminal? Thank you. Looking forward for more tutorials and keep up the great work! :)

  • @anuragmathews5459
    @anuragmathews5459 6 років тому

    Great work Jesse , it was indeed a helpful video series and I think it can take my game of productive up. Well, thanks for this astonishing content.

  • @bulldog2024
    @bulldog2024 6 років тому

    I also started using vs code more often and am really starting to like it a lot.

  • @adebiyial
    @adebiyial 6 років тому +3

    Good JESSE. Even better, there's an extension that Live Compiles Sass. It's Live Sass Compiler by Ritwick Dey. I hope that helps.

  • @bibishamin9706
    @bibishamin9706 4 роки тому +1

    It's not working for me D:

  • @narenderkonka3609
    @narenderkonka3609 5 років тому +3

    I installed Sass in globally but typing Sass is not recognize
    Please help solution?

    • @JesseShowalter
      @JesseShowalter  5 років тому +1

      They have updated since this video, check their documentation

  • @safasouli8895
    @safasouli8895 3 роки тому

    Can I Run scss without compiler?

  • @godswillinyama1217
    @godswillinyama1217 4 роки тому +1

    Thank you so much Jesse, you just saved me the stress ........😪

  • @christiangoye
    @christiangoye 4 роки тому +1

    Hi! I have a problem. When im trying to do the sass command, the terminal shows me "command not found". Ive already change directory but I don't know why keeps happened. Can you help me pls?
    psta: Sorry my English...

  • @DylanVillian22
    @DylanVillian22 6 років тому +1

    Great video! Thanks Jesse

  • @skidak541
    @skidak541 5 років тому +1

    This was actually more useful than a Lynda course.

  • @kaylajohnson3314
    @kaylajohnson3314 6 років тому +1

    Love your teaching style. Short and to the point and still very educational! However this is the first time I've seen that sass doesn't need curly braces. And I tried it on my own and the compiler got angry. I'll probably still add them out of habit anyway so it's a non-issue for me.

    • @JesseShowalter
      @JesseShowalter  6 років тому

      You have Scss and Sass. Slightly different snytax

  • @stillnai
    @stillnai 6 років тому

    Yes - a Sass series! Thank you so much!

  • @shiningdragon8737
    @shiningdragon8737 6 років тому +1

    I have a question, how would I target something specific that is already nested in another element? Example I have two six column rows, each class named .col-6. They both have images I already styled, however I also named one of those divs col-6 and images-2. How would I nest styling the images in images-2?

    • @JesseShowalter
      @JesseShowalter  6 років тому

      I think I understand what your saying... kind of. I would assume you either need to honest those image styles or create a combined selector

    • @shiningdragon8737
      @shiningdragon8737 6 років тому

      @@JesseShowalter a combined selector? So like .images-2 img?

  • @adrianthomas4163
    @adrianthomas4163 6 років тому

    Nice. Q: What VSCode theme, icons, and font are you currently using?

  • @aleksaprebiracevic9710
    @aleksaprebiracevic9710 4 роки тому +1

    Amazing tutorial, please keep it up.

  • @NZMPlays
    @NZMPlays 2 роки тому

    Got stuck at downloading NPM and couldnt understand anything you said after that.

    • @NZMPlays
      @NZMPlays 2 роки тому

      Mainly I guess its just not very clear what Node or NPM are or what they do or why we need them or what they have to do with Sass, idk. Just confused me. Good video though I just cant understand this Sass stuff i dont get it

  • @sayedakbarali5650
    @sayedakbarali5650 6 років тому

    thanks & Best wishes for another great series

  • @tebellosentlemabina7799
    @tebellosentlemabina7799 4 роки тому +1

    Thank you very much. This really works

  • @HumbleHistorian
    @HumbleHistorian 6 років тому +1

    You just saved one life bro :)

  • @Nb-dandr
    @Nb-dandr 4 роки тому

    Hey I’ve been having some problems with live sass compiler. I’ve read so many forums trying to solve the issue but basically when I go to start live sass compiler I get ‘working on it’ and it just freezes on that. I don’t get the styles.css.map or styles.css. It’s driving me crazy. Any help would be amazing

  • @osmanmusse6223
    @osmanmusse6223 6 років тому +1

    @Jesse Showalter Loving the series you're creating keep in up man. Just to ask do you need to know javascript well to use Gulp as a task runner.

    • @JesseShowalter
      @JesseShowalter  6 років тому

      I think it would help but it’s not mandatory if you have good documentation 🤘🏻

  • @carlray7909
    @carlray7909 6 років тому +1

    Any reason why when I save my style.sass file there is a full minute delay till the changes appear in the style.css? My setup is exactly the same as you have here.

    • @JesseShowalter
      @JesseShowalter  6 років тому

      A full minute! Wow that’s strange. I checked Github and there are some reasons as to why it could be slow. They all seem to point to the way your computer is setup. I would read some of the GitHub issues and see if you can find answers.

  • @adebayomustapha9817
    @adebayomustapha9817 6 років тому +1

    Thanks Jesse, waiting for this since....

    • @JesseShowalter
      @JesseShowalter  6 років тому

      Releasing a new video in this series every day for the next few days 👍🏼

    • @adebayomustapha9817
      @adebayomustapha9817 6 років тому

      Jesse Showalter you have really help boost my career ...

  • @karthikeyan_vellingiri
    @karthikeyan_vellingiri 6 років тому +1

    Superb.. just nw I started learning sass.

  • @luisasoto2750
    @luisasoto2750 6 років тому

    Hey, great video for someone who's just starting to use SASS. I would like to know your reason to use SASS instead of the SCSS syntax?

    • @JesseShowalter
      @JesseShowalter  6 років тому +1

      It’s easier to write. No curly brackets, slicker syntax, focus on clean indentation. Just my preference

  • @lightningresaba146
    @lightningresaba146 5 років тому

    why is my intellesense in sass is not showing up? any idea?
    edit:
    styles.sass = intellesense not woking
    styles.scss = its working
    maybe .sass is deprecated?

    • @rcsnaps4007
      @rcsnaps4007 5 років тому

      Same here. Scoured ever place I could think of for an answer to, no avail.

    • @rcsnaps4007
      @rcsnaps4007 5 років тому

      @Lightning Resaba: Below is a blurb from the VSCode docs. I tried the extension listed. It didn't work for me, but that could be something I'm overlooking on my end. I'd be interested to know if you try it and have any luck. Cheers
      " Is there support for the indentation based Sass syntax (.sass)?
      No, but there are several extensions in the Marketplace supporting the indented flavor of Sass, for example, the sass-indented extension by Robin Bentley. "

    • @lightningresaba146
      @lightningresaba146 5 років тому

      @@rcsnaps4007 that works for me, the name of the extension is Sass
      by Syler, it's no longer maintain though, i think it's alright

    • @JesseShowalter
      @JesseShowalter  5 років тому

      Wish I could help sorry

  • @tejjmk
    @tejjmk 6 років тому +1

    Hello Jesse, Thank You For The Series 😁So I’ve Been Watching Loads Of Web Dev Videos And This Was The First Time I Came Across Just Sass To Convert It To CSS. Is There A Difference Between Node-Sass, Gulp-Sass And Sass? Or Is It Personal Preference.

    • @JesseShowalter
      @JesseShowalter  6 років тому

      From Stack Overflow:
      The difference between them is that gulp-sass has node-sass as a dependency :)gulp-sass is a plugin for Gulp - an excellent build tool.And it uses node-sass which it itself is using lib-sass which is a Sass compiler written in C or C++.
      That makes it faster than Ruby Sass, but it is not as feature complete I think, but they are pretty close to each other.I think that the Sass project recently switched from Ruby Sass to LibSass as the 'official' compiler / tool - but don't arrest me on that. :)

    • @tejjmk
      @tejjmk 6 років тому

      Thank You, I'll Look Into It :)

  • @shriramgawade7925
    @shriramgawade7925 5 років тому

    'touch' is not recognized as an internal or external command, that error comes what i do

    • @pranshusingh7470
      @pranshusingh7470 5 років тому +1

      Run this in cmd- "npm install touch-cli -g"

    • @JesseShowalter
      @JesseShowalter  5 років тому

      That's odd

    • @sammorgan7143
      @sammorgan7143 4 роки тому

      @@JesseShowalter i had the same problem, replace touch with New-Item if you have windows

  • @hedy5096
    @hedy5096 5 років тому +1

    your videos are great!

  • @conor527
    @conor527 5 років тому

    the color and autocomplete wont work on sass. can someone help me with dis?

  • @ksoo3109
    @ksoo3109 3 роки тому

    Nice video! But pls make the code editor's font size bigger next time.. Too hard to read for users with poor eyes >.

  • @kafkahani7343
    @kafkahani7343 5 років тому +1

    cant see your written code, too small to see

    • @JesseShowalter
      @JesseShowalter  5 років тому

      Ill start making it bigger in screencasts, thanks for the feedback

  • @pradhumnapancholi4350
    @pradhumnapancholi4350 6 років тому +1

    Hi there, I am currently on my way to become a web/ app developer. I am really enjoying your SaSS tutorials coz I know it's simple if you already know CSS and I was looking for something to learn this but most of the courses were either not as good as yours or they were too lengthy like hours. So, thanks to you I can get started with SaSS within just 4 small sittings. Also, can you make some tutorials or suggest some to learn to make mock-ups with photoshop for beginners. Also, I had a question that apps like Adobe Xd are very easy to learn and I was able to make app design within 1 hours (first time). So, is it worth to learn photoshop because I am really looking forward to get decent enough with Adobe CC suite? I know it's long but really couldn't help it.
    Thanks

    • @JesseShowalter
      @JesseShowalter  6 років тому

      I think new designers should know how to use a photo editing software and a vector editing software of some kind. Doesn't matter what as long as it works for you. If you want to do UI or UX design there a lot of new modern design tools that tend to focus on that too.

  • @dfjama
    @dfjama 6 років тому +1

    As a Windows user, this method did not work for me for some reason. I wonder if you can make a video solely for Windows users and with different text editors. Thank you for the valuable videos Jesse.

    • @JesseShowalter
      @JesseShowalter  6 років тому

      I wish I was able to do more videos about windows specific workflows. Maybe Microsoft will sponsor me and send me a machine to try this out on.

  • @alirahmani5601
    @alirahmani5601 4 роки тому +1

    Tank you, this really helped me! 😘

  • @mchand
    @mchand 6 років тому +1

    I loved wowwwwwww.....fantastic

    • @JesseShowalter
      @JesseShowalter  6 років тому +1

      Thanks! Sass is really cool and a lot of fun 👍🏼

  • @alamsyahcatur7196
    @alamsyahcatur7196 3 роки тому

    thanks for your great video

  • @boribilder_sem_basal
    @boribilder_sem_basal 4 роки тому +1

    Thanks so much!

  • @HumbleHistorian
    @HumbleHistorian 5 років тому +1

    great one more time

  • @kostakondratenko6166
    @kostakondratenko6166 4 роки тому +1

    WTF too hard to read - you should zoom in when recording.

    • @JesseShowalter
      @JesseShowalter  4 роки тому

      Thanks for the feedback! Have a good day! 🤘

  • @user-og9nl5mt1b
    @user-og9nl5mt1b 3 роки тому +1

    I do not own a Apple device .

  • @franciscoicarocs
    @franciscoicarocs 6 років тому +1

    Thanks, bro.

  • @kressckerl
    @kressckerl 4 роки тому +1

    WHYYYYYYYYYYYY! Are all front-end developers like this (shouting and such). Trying to learn front-end as a backend dev

    • @JesseShowalter
      @JesseShowalter  4 роки тому +1

      I don’t think it’s a designer type kinda thing, I’m this energetic and full of zeal for pretty much everything haha. Thanks for the feedback! 🤘

    • @kressckerl
      @kressckerl 4 роки тому

      @@JesseShowalter I like your energy... as long as you don't shout in the beginning. And I respect that you answer non-positive feedback

  • @shoxerpetrosyan8678
    @shoxerpetrosyan8678 2 роки тому

    coooll TNX a LoT