DEV Community: Fahad Bin Faiz

Exploring Sass Tint and Shade Functions for Color Manipulation

Fahad Bin Faiz — Sat, 16 Nov 2024 18:59:51 +0000

Exploring Sass Tint and Shade Functions for Color Manipulation

In web design and development, colors play a vital role in creating visually appealing and accessible interfaces. Sass, a powerful CSS preprocessor, makes color manipulation effortless with custom functions like tint and shade. These functions allow developers to adjust colors dynamically, adding consistency and flexibility to design systems.

In this blog post, we’ll dive into how the tint and shade functions work, how they are implemented in Sass, and why they’re essential for modern web development.

What are Tint and Shade in Design?

Tint: A tint is created by mixing a color with white, making it lighter.
Shade: A shade is created by mixing a color with black, making it darker.

Tints and shades help create a cohesive color palette by providing variations of base colors, ideal for themes, hover effects, and UI components.

Implementing Tint and Shade in Sass

Below are simple yet effective Sass functions to create tints and shades:
Tint Function
The tint function lightens a color by mixing it with white.

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

Explanation:

mix(white, $color, $percentage) blends the given $color with white based on the $percentage value.
A higher $percentage results in a lighter color.

Shade Function
The shade function darkens a color by mixing it with black.

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

Explanation:

mix(black, $color, $percentage) blends the given $color with black based on the $percentage value.
A higher $percentage results in a darker color.

Practical Example

Let’s create a base color palette and use the tint and shade functions to generate variations.

Sass Code:

$primary-color: #3498db;

.light-tint: tint($primary-color, 20%);
.darker-shade: shade($primary-color, 40%);

button {
  background-color: $primary-color;
  &:hover {
    background-color: tint($primary-color, 10%);
  }
  &:active {
    background-color: shade($primary-color, 10%);
  }
}

Output CSS:

.light-tint {
  background-color: #69b7ef;
}
.darker-shade {
  background-color: #216387;
}

button {
  background-color: #3498db;
}
button:hover {
  background-color: #4aa3e1;
}
button:active {
  background-color: #297bb1;
}

Benefits of Using Tint and Shade Functions

Consistency: Generate consistent color variations throughout your design.
Efficiency: Avoid manually calculating or selecting colors.
Scalability: Easily adapt to changes in the base color for themes or branding updates.
Readability: Code is more descriptive and easier to maintain.

When to Use Tint and Shade

Hover and Active States: Use tints for hover effects and shades for active states.
Theming: Create light and dark mode themes dynamically.
Gradients: Generate gradient backgrounds with subtle tints and shades.
Accessibility: Ensure sufficient color contrast for improved readability.

Conclusion

Sass functions like tint and shade provide an elegant way to manage colors in your projects. They streamline your workflow, ensure consistency, and give you the flexibility to create stunning designs with minimal effort.

So, the next time you’re working on a UI, try these Sass functions to add that perfect touch of color!

Have you used tint and shade in your projects? Let me know how they’ve enhanced your workflow in the comments below!

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Fahad Bin Faiz — Sat, 16 Nov 2024 18:42:16 +0000

Dot Notation

Dot notation is simpler and more readable. It's used when:

The property name is a valid identifier (contains only letters, digits, $, or _, and doesn’t start with a digit).
You know the property name ahead of time.

For example:

const person = { name: 'alice', age: 30 };
console.log(person.name); // 'alice'

Bracket Notation

Bracket notation is more flexible and allows you to:

Use property names stored in variables.
Access properties with special characters, spaces, or numbers that aren’t valid identifiers.
Dynamically build property names at runtime.

Examples:
**

Using variables to access properties: **

const person = { name: 'alice', age: 30 };
const prop = 'name';
console.log(person[prop]); // 'alice'

**
2.Properties with special characters or spaces:
**

const person = { 'first name': 'alice', age: 30 };
console.log(person['first name']); // 'alice'

**
3.Dynamically generated property names:
**

const property = 'name';
console.log(person[property]); // 'alice'

When to Use Bracket Notation

If the property name is dynamic or stored in a variable.
If the property name has spaces, special characters, or starts with a number.

For most other cases, dot notation is preferred because it’s more readable and concise.

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Fahad Bin Faiz — Tue, 12 Nov 2024 16:30:33 +0000

Dot Notation

Dot notation is simpler and more readable. It's used when:

The property name is a valid identifier (contains only letters, digits, $, or _, and doesn’t start with a digit).
You know the property name ahead of time.

For example:

const person = { name: 'alice', age: 30 };
console.log(person.name); // 'alice'

Bracket Notation

Bracket notation is more flexible and allows you to:

Use property names stored in variables.
Access properties with special characters, spaces, or numbers that aren’t valid identifiers.
Dynamically build property names at runtime.

Examples:
1. Using variables to access properties:

const person = { name: 'alice', age: 30 };
const prop = 'name';
console.log(person[prop]); // 'alice'

2.Properties with special characters or spaces:

const person = { 'first name': 'alice', age: 30 };
console.log(person['first name']); // 'alice'

3.Dynamically generated property names:

const property = 'name';
console.log(person[property]); // 'alice'

When to Use Bracket Notation

If the property name is dynamic or stored in a variable.
If the property name has spaces, special characters, or starts with a number.

For most other cases, dot notation is preferred because it’s more readable and concise.

CSS Combinators

Fahad Bin Faiz — Sat, 20 Jun 2020 18:26:09 +0000

In this article, I will discuss CSS Combinators.

Descendant combinator
Child combinator
Adjacent sibling combinator
General sibling combinator

Descendant combinator

The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

<div class="box">
   <p>Text in .box</p>
</div>
<p>Text not in .box</p>

/* This is descendant combinator example */
.box p {
    color: red;
}

Child combinator

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendent elements further down the hierarchy don't match.

<ul>
    <li>Unordered item</li>
    <li>Unordered item
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ul>

/* this is child combinator example */
ul > li {
    border-top: 5px solid red;
}

Adjacent sibling combinator

The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy

<article>
    <h1>A heading</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>
    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

/* this is adjacent sibling combinator example */
h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}

General sibling combinator

If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). To select all img elements that come anywhere after p tag.

<article>
    <h1>A heading</h1>
    <p>I am a paragraph.</p>
    <div>I am a div</div>
    <p>I am another paragraph.</p>
</article>

/* this is general sibling combinator example*/
h1 ~ p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}

Thanks for reading...

Original article Click here

DEV Community: Fahad Bin Faiz

Exploring Sass Tint and Shade Functions for Color Manipulation

Exploring Sass Tint and Shade Functions for Color Manipulation

What are Tint and Shade in Design?

Implementing Tint and Shade in Sass

Practical Example

Benefits of Using Tint and Shade Functions

When to Use Tint and Shade

Conclusion

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Dot Notation

Bracket Notation

When to Use Bracket Notation

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Dot Notation

Bracket Notation

When to Use Bracket Notation

CSS Combinators

Table Of Contents

Descendant combinator

Child combinator

Adjacent sibling combinator

General sibling combinator

Thanks for reading...