em + px are incompatible units
Extend Pitfalls..
There are some pitfalls while extending with classes..like shown in below…
create a %btn placeholder and extend it in .btn-a and .btn-b. with this you can overcome the above issue and scope no longer shared.
When should we use mixins??
Lets consider an example, btn-a and btn-b has repeating properties. We can avoid such repeating in each class and write our own mixins for re-usable purpose.
Do not confuse when to use @include and @import..small tip here..
Lets use mixins in more efficient way.. Will try passing arguments in it.. In below example, i am can pass border-box/content-box as argument and generate accordingly.
What if we forgot to passing arguments?? you can pass optional arguments if you failed to include it by the following way..
border-box will applied like shown in below if no arguments passed..
You can only pass optional arguments at last…
What if your argument value contains multiple keywords with ‘,’ separated?
say, color 0.3s ease-in, background 0.5s ease-out is your argument in place of $val..it will throw error… Hence you can achieve this functionality using vararg($val…)
Reverse Vararg
Mixins Interpolation
We gonna cover the below topics..
We will be using $ for a variable name to declare it as a variable and can be used with that name in classes.
After using default flag, my variable will not get override in any case..
Variable types can be booleans, numbers, colors, strings, lists and null
example:
So, never and ever re-assign a value to existing variable.
Thanks to Code School – Assemble Sass tutorial for explaining in simple steps..
when you import button.scss file in application.scss file and compile, a new button.css file will be created even if we are importing it to application.css file which is not our intention.
Symbol references the parent selector
Another usage of parent selector
Can achieve simply by the following using scss..
Another Example usage of it..
Yes, we all know its basics:
console.log(‘Hello World!’); //log a message or an object to console
console.info(‘Something happened…’); //same as console log
console.warn(‘Something strange happened…’); //same as console log but outputs a warning
console.error(‘Something horrible happened…’); //same as console log but outputs an error
So hopefully now, I can give you some tips which you didn’t know before, and which will make you a PRO debugger.
Tip #1 console.trace()
If you want to know where the log is being prompted from use console.trace() to get the stack trace with the logged data.
Tip #2 console.time() && console.timeEnd()
If you are trying to find a sneaky performance issue, start counting time with console.time() and print with console.timeEnd().
Tip #3 console.memory
If your performance issue is even trickier, and you are looking for a sneaky memory leak, you might like to try and utilize console.memory (property, not a function) to check out your heap size status.
Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)
This is not standard, but is widely supported. You can start and end a browser performance tool – performance profile from the code using console.profile(‘profileName’) and then console.profileEnd(‘profileName’). This will help you profile EXACTLY what you want, and prevents you from having to be mouse-click, timing dependent.
Tip #5 console.count(“STUFF I COUNT”)
In a case of recurring function or code, you can use console.count(‘?’) to keep count of how many times your code is read.
Tip #6 console.assert(false, “Log me!”)
Yes, conditional logging without wrapping your logs with if-else 🙂
You can use console.assert(condition, msg) to log something when the condition is falsy.
*disclaimer — in Node.js this will throw Assertion Error!
Tip #7 console.group(‘group’) & console.groupEnd(‘group’)
After writing so many logs, you might want to organize them. A small and useful tool for that is the console.group() & console.groupEnd(). Using console group, your console logs are grouped together, while each grouping creates another level in the hierarchy. Calling groupEnd reduces one.
Tip #8 String substitutions
When logging, you can incorporate variables using string substitutions. These references should be types (%s = string, %i = integer, %o = object, %f = float).
Tip #9 console.clear()
Well, having written so many logs, it’s now time to clear your console a little.
Tip #10 console.table()
Saving the best for last, this is a true gem in my opinion! You can actually print a very nice table with the objects you log using the console.table()
I really hope these tips make your debugging a bit more productive, and even a little fun!
11.
console.dir(myObject, {colors: true, depth: null})
In Node, this prints the entire object (depth: null) with syntax highlight (colors: true). You can control the depth to be printed by passing a number to depth.
12.
Another fun one is adding CSS to console.log statements:
console.log(‘%c Oh my heavens! ‘, ‘background: #222; color: #bada55’);
Source: https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6
