
Get the current position of the mouse from a JavaScript event
24/05/2020Lets look at how to get the current clientX and clientY position of the mouse pointer from a JavaScript 'mousemove' event.
Programming blind would be a dark and lonely place for any modern developer. Fortunately, Sass has debugging features to make problems easier to work with. With @debug, @warn and @error we can debug useful information straight to our consoles.
It is worth noting that I use node-sass in my examples, so your mileage may vary.
Ever wondered how to dump a variable in Sass? @debug has you covered. This handy rule allows you to output variables and expressions directly to your console. It even adds the file and line-number for your convenience.
$colour: #fff;
div {
background: $colour;
@debug "The colour is: #{$colour}";
}
In this example we are simply dumping the current value of $colour to the console.
/* Console Output */
path/to/style.scss:6 DEBUG: The colour is: #fff
@warn allows you a form of validation. It doesn’t stop Sass from running but will throw a warning if the code is run. This is a neat way to remind yourself, or your users, of certain stylistic typos or problems.
$background: #fff;
$colour: #fff;
div {
background: $background;
color: $colour;
@if $background == $colour {
@warn "Background and text are both #{$colour}!";
}
}
In this example the background colour and text colour are the same, therefore a warning is shown in the console.
/* Console Output */
WARNING: Background and text are both #fff!
on line 9 of style.scss
Finally we have the meaty ‘hey, stop everything… you’ve F***ed up!’ rule. If run, @error will print an error message and then stop the compiler dead.
$background: #fff;
$colour: #fff;
div {
@if $background == $colour {
@error "Background and text are both #{$colour}!";
}
background: $background;
color: $colour;
}
The example stops the style sheet from being written and throws an error and stack trace which looks something like this:
/* Console Output */
{
"status": 1,
"file": "path/to/file",
"line": 10,
"column": 10,
"message": "Background and text are both #fff",
"formatted": "Error: Background and text are both #fff\n on line 6 of path/to/file... etc"
}
Lets look at how to get the current clientX and clientY position of the mouse pointer from a JavaScript 'mousemove' event.
Find out whether a JavaScript array contains single or multiple values by passing an array of values to includes() with the help of some() and every().
Would you like to match the closest number in an array using JavaScript? Find out how to achieve this using both reduce() and sort().
What are web components? Learn about web components, the shadow DOM, styling and lifecycle callbacks in this JavaScript tutorial series.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
Using Bulma but don't know how to integrate it with Nuxt? I'll show you how to load Bulma into your Nuxt project with full control over variables.