workshopper / learn-sass Goto Github PK

:school: Learn SASS and SCSS through a workshopper adventure.

License: MIT License

JavaScript 91.56% CSS 8.44%

learn-sass's Introduction

Learn SASS

Teach yourself the basics of SASS and SCSS through simple coding exercises. Based on the node workshopper adventure format popularized by NodeSchool.

This adventure utilizes tutorials from the awesome Sass guide.

Get help

Having issues with learn-sass? Get help troubleshooting in the nodeschool discussions repo.

Install Node.js

Make sure Node.js is installed on your computer.

Install it from nodejs.org/download

Install `learn-sass` with `npm`

Open your terminal and run this command:

npm install -g learn-sass

The -g or --global option installs this module globally so that you can run it as a command in your terminal.

Having issues with installation?

If you get an EACCESS error, the simplest way to fix this is to rerun the command, prefixed with sudo:

sudo npm install -g learn-sass

You can also fix the permissions so that you don't have to use sudo. Have a look at the npm documentation.

Run the workshop

Open your terminal and run the following command:

learn-sass

You'll see the menu:

Navigate the menu with the up & down arrow keys.
Choose a challenge by hitting enter.

Acknowledgements

Thanks to Hampton Catlin, Natalie Weizenbaum, and Chris Eppstein for writing Sass, and to Sam Richard for evangelizing it.

Translations

Brazilian Portuguese by Nikolas Silva
Korean by @eunsucking
German by @Maroel for informatica feminale

License

MIT

learn-sass's People

Contributors

Stargazers

Watchers

learn-sass's Issues

Co-Maintainer?

Hello @claudiopro

learn-sass is nice but it seems you havn't had much time to update it. Would you like me to become a co-maintainer that helps keeping it up-to-date?

Verify don't ignore order

This solution for exercise 2 don't pass:

aside {

  a {
    color: red;
  }

  ul {
    margin: 0;
  }
}

Basically it's the same like your solution and it matches the requirements. Maybe you could improve the verify-function.

Chinese (Simplified) translation

Looking for a native speaker to contribute a Chinese (Simplified) translation for learn-sass. Follow the instructions in the CONTRIBUTING file. Use PR #22 as a model.

[CI Error] `select` should dont break down with the selection of nothing

> workshopper-adventure-test



  Exercises should be 
    ✓ more than 0 (550ms)
    ✓ unique (449ms)
    ✓ with an empty last-line (476ms)

  `version` should
    ✓ be equal to the package.json (436ms)
    ✓ work via -v (429ms)
    ✓ work via --version (424ms)
    ✓ work via v (438ms)

  `current` should
    ✓ work with none selected but show an error (440ms)
    ✓ should store a selection (935ms)
    ✓ be reset on reset (1447ms)

  `select` should
    ✓ allow the selection of the first entry as number (2375ms)
    ✓ allow the selection of the last entry as number (1133ms)
    ✓ allow the selection of the first entry as text (1146ms)
    ✓ allow the selection of the last entry as text (1080ms)
    ✓ allow the selection of text and be okay with spaces before, after (1032ms)
    1) dont break down with the selection of nothing
    ✓ allow spaces (1023ms)


  16 passing (15s)
  1 failing

  1) `select` should dont break down with the selection of nothing:

      Uncaught AssertionError: 255 == 1
      + expected - actual

      -255
      +1

      at /learn-sass/node_modules/workshopper-adventure-test/spec/state.js:119:11
      at ChildProcess.exithandler (child_process.js:210:5)
      at emitTwo (events.js:87:13)
      at ChildProcess.emit (events.js:172:7)
      at maybeClose (internal/child_process.js:818:16)
      at Socket.<anonymous> (internal/child_process.js:319:11)
      at emitOne (events.js:77:13)
      at Socket.emit (events.js:169:7)
      at Pipe._onclose (net.js:469:12)

Remove name from adventure specification object

Remove the name from the workshopper-adventure specification object, it will be automatically loaded from the package.json.

Improve description of Mixin Content exercise

Hi, I think that are a mistake in the mixin-content sample

The sample says:

 @mixin apply-to-ie6-only {  
       * html {  
         @content;  
       }  
     }  
     @include apply-to-ie6-only {  
       #logo {  
         background-image: url(/logo.gif);  
       }  
     }

and the correct use of the mixin would be:

 @mixin apply-to-ie6-only {
  * html {
    @content;
  }
}

#logo {
  @include apply-to-ie6-only {
    background-image: url("/logo.gif");
  }
}

Unable to Install learn-sass

D:\NodeSchool>npm install -g learn-sass
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: The sprintf package is deprecated in favor of sprintf-js.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: no longer maintained
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'C:\\Users\\bilal\\AppData\\Roaming\\npm\\node_modules\\learn-sass\\node_modules',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-sass\src\libsass'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\bilal\\AppData\\Roaming\\npm\\node_modules\\learn-sass\\node_modules\\node-sass\\src\\libsass'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\Users\\bilal\\AppData\\Roaming\\npm\\node_modules\\learn-sass',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-gyp'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\bilal\\AppData\\Roaming\\npm\\node_modules\\learn-sass\\node_modules\\node-gyp'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\bilal\\AppData\\Roaming\\npm\\node_modules\\learn-sass\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:201:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:201:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Users\bilal\AppData\Local\Programs\Python\Python312\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\bilal\AppData\Local\Programs\Python\Python312\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:422:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1105:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:305:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22631
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\bilal\\AppData\\Roaming\\npm\\node_modules\\learn-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\bilal\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-sass
npm ERR! gyp ERR! node -v v20.11.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in: C:\Users\bilal\AppData\Local\npm-cache\_logs\2024-04-22T11_24_57_976Z-debug-0.log

spawn error ENOENT ?

D:\Nodejs\sass>learn-sass verify stylesheet.scss

Result -->
events.js:137
throw er; // Unhandled 'error' event
^ Error: spawn C:\Users\pauli\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-sass\bin\node-sass ENOENT
at _errnoException (util.js:1003:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
at onErrorNT (internal/child_process.js:389:16)
at process._tickCallback (internal/process/next_tick.js:152:19)

node : 9.5
npm : 5.6
window : 10

Help ?

Chinese (Traditional) translation

Looking for a native speaker to contribute a Chinese (Traditional) translation for learn-sass. Follow the instructions in the CONTRIBUTING file. Use PR #22 as a model.

ENOENT error at "variables" step (Windows)

Hi there,
I'm getting this error when I try to verify the very first exercise:

Solution:

$color: #000;

body {
  color: $color;
}

Error:

PS C:\git\learn-sass> learn-sass verify app.scss
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn C:\Users\pmetz\AppData\Roaming\npm\node_modules\learn-sass\node_modules\node-sass\bin\node-sass ENOENT
    at exports._errnoException (util.js:1007:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32)
    at onErrorNT (internal/child_process.js:348:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

As you can see, this is on Windows. I've tried saving the file with *nix line endings instead, but still the same.

EDIT:
Note, I have installed learn-sass on the bash subsystem of Windows. It works fine there, so this is evidently an issue on Windows shells only.

German translation

Looking for a native speaker to contribute a German translation for learn-sass. Follow the instructions in the CONTRIBUTING file. Use PR #22 as a model.

Add exercise on @while directive

Write up exercise for @while directive. See docs.

Update workshopper-adventure to v4.2.x

See issue #16 for more details on workshopper-adventure interface changes.

Cant run on Windows Opeerating System??

`Tester@Localhost MINGW64 /c/xampp/htdocs
$ learn-sass
C:\Users\Tester\AppData\Roaming\npm\node_modules\learn-sass\node_modules@hapi\joi\lib\types\object\index.js:255
!pattern.schema._validate(key, state, { ...options, abortEarly:true }).errors) {
^^^
SyntaxError: Unexpected token ...
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\Tester\AppData\Roaming\npm\node_modules\learn-sass\node_modules@hapi\joi\lib\types\func\index.js:5:20)
at Module._compile (module.js:570:32)

Tester@Localhost MINGW64 /c/xampp/htdocs
$
`

Use expanded #RRGGBB hex colors for consistency

Better to use expanded hex colors for consistency e.g. #f00 -> #ff0000.

Exit from application

After install I do have your windows as in your example but after choosing lesson, I do have short info about syntax and the program breaks, to choose new lesson there is a need to restart the program.

I don't know if it's normal but if yes there is no issue.