Sass Basics – 6

Math + Color

Operations supported by Sass

Different ways of using division operator in Sass

You can sum up different units in Sass(Only Sass compatible combination units). px +pt can be combined to px in Sass.

em + px are incompatible units

Math Functions

Colors

Color Functions

Advertisements

Sass Basics – 3

Mixins

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.

Mixins Usage

Do not confuse when to use @include and @import..small tip here..

Adding Arguments

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..

Multiple Arguments

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

 

Sass Basics – 2

Variables

We gonna cover the below topics..

Variable Declaration

We will be using $ for a variable name to declare it as a variable and can be used with that name in classes.

Default flag

After using default flag, my variable will not get override in any case..

Types

Variable types can be booleans, numbers, colors, strings, lists and null

Scoping Variables

example:

So, never and ever re-assign a value to existing variable.

Variable Interpolation

 

Sass Basics – 1

Thanks to Code School – Assemble Sass tutorial for explaining in simple steps..

Sass Basics:

Importing other scss files..

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.

To avoid this situation, use Partials.

Nesting

Nesting Properties

When to use & ?

Symbol references the parent selector

Another usage of parent selector

How to apply css properties from child to parent??

Can achieve simply by the following using scss..

Another Example usage of it..

Javascript Debugging with Console

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