Giter Club home page Giter Club logo

sassessentials's Introduction

Sass Essential Training

This is the repository for my course Sass Essential Training. The full course is available on LinkedIn Learning and Lynda.com

Sass Essential Training

Learn the fundamentals of Syntactically Awesome Stylesheets (Sass), a modern web development language that helps you write CSS better, faster, and with more advanced features. Ray Villalobos shows you the best way to install Sass and work with its main features: variables, nesting, partials, and mixins. Plus, learn how to use SassScript to create complex functions from Sass lists and control statements.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add /tree/BRANCH_NAME to the URL to go to the branch you want to peek at.

Branches

The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch 02_03b then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A b means that this is how the code looks at the beginning of the video, an e means that is how the code looked at the end of the video.

You may find additional branches that correspond to other states, so for example, you may see a t, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The master branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course.

Installing

  1. Make sure you have these installed
  2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) > git clone CLONEURL
  3. CD to the folder cd FOLDERNAME
  4. Run npm install to install the project dependencies
  5. Run gulp to start live preview server

More Stuff

Check out some of my other courses on LinkedIn Learning and lynda.com. You can follow me on LinkedIn, read my blog, follow me on twitter, or check out my youtube channel.

sassessentials's People

Contributors

dependabot[bot] avatar planetoftheweb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sassessentials's Issues

Gulp/Ruby Error! Gem cmd is not installed.

I have poured at least 8 hours into troubleshooting with no avail to get Gulp to work properly. I am taking a course on sass and have downloaded its repository. Also, installed git bash, ruby, sass, and gulp. I have attached images that show my errors, versions of all in git, and my environmental variables paths in Windows 7.

When running gulp, I get error:
" [22:32:30] Finished 'webserver' after 15 ms
Error! Gem cmd is not installed."

When doing a search it stated that my path in environmental variables needs to be directed to the ruby folder, which it is.

Also, when I save the .scss file in Atom, I get the other error:
" 'node-sass' is not recognized as an internal or external command,
operable program or batch file."

I have uninstalled/reinstalled ruby 3 times and get the same error. Not sure what to do... Any help would be great. Thanks so much!
errorinbashgulp
errorinatomonsave
versions
environmentalvariables
rubyfolder

cloning the repository

Hi, I'm a Lynda.com premium user. My issue is when I'm using the git clone and the URL, it only downloads 1 file. It only contains the same things as the master. It doesn't download the entire group of files for every chapter and each corresponding beginning and ending versions.

Issue: Cloning into 'sassEssentials'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 488 (delta 0), reused 0 (delta 0), pack-reused 487
Receiving objects: 100% (488/488), 1.14 MiB | 574.00 KiB/s, done.
Resolving deltas: 100% (180/180), done.

Other than this, the way you present the information is amazing.

Thanks and God Bless.

Respectfully,

MicKey_Phoenix77

Gulp Ruby error on branches 2_05b, 2_05e, 2_06b (Windows)

When running gulp on these branches, I get this error:

internal/modules/cjs/loader.js:716
    throw err;
    ^

Error: Cannot find module 'jshint/src/cli'
Require stack:
- C:\Users\fdmarcin\Downloads\sassEssentials\node_modules\gulp-jshint\src\extract.js
- C:\Users\fdmarcin\Downloads\sassEssentials\node_modules\gulp-jshint\src\index.js
- C:\Users\fdmarcin\Downloads\sassEssentials\gulpfile.js
- C:\Users\fdmarcin\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js
- C:\Users\fdmarcin\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\index.js
- C:\Users\fdmarcin\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:713:15)
    at Function.Module._load (internal/modules/cjs/loader.js:618:27)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (C:\Users\fdmarcin\Downloads\sassEssentials\node_modules\gulp-jshint\src\extract.js:1:17)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Module.require (internal/modules/cjs/loader.js:771:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\fdmarcin\\Downloads\\sassEssentials\\node_modules\\gulp-jshint\\src\\extract.js',
    'C:\\Users\\fdmarcin\\Downloads\\sassEssentials\\node_modules\\gulp-jshint\\src\\index.js',
    'C:\\Users\\fdmarcin\\Downloads\\sassEssentials\\gulpfile.js',
    'C:\\Users\\fdmarcin\\AppData\\Roaming\\npm\\node_modules\\gulp\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js',
    'C:\\Users\\fdmarcin\\AppData\\Roaming\\npm\\node_modules\\gulp\\node_modules\\gulp-cli\\index.js',
    'C:\\Users\\fdmarcin\\AppData\\Roaming\\npm\\node_modules\\gulp\\bin\\gulp.js'
  ]
}

I thought something got messed up in my installation of Ruby, Node, or Sass, but it works correctly in other branches.

OS: Windows
Ruby: ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
Gulp CLI version: 2.2.0
Gulp Local version: 4.0.2
Sass: Ruby Sass 3.7.4

Instructions

I am a Lynda.com Premium member, and I needed to use the instructions to install all programs I needed. When I came across the step npm-install - the step would never complete.
It took me 1 full day to figure out it's a command npm install

Please remove the - so other people don't get confused as me.

Lynda.com is a great place to learn

Gulp not grunt.

Hi Ray.

On line 24 of the readme.md file you tell the reader to type 'grunt' and not 'gulp' to launch the live server.

I guess you originally wrote this course using grunt.

HTH.

Rob

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.