Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass keywords()

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
👁ī¸ 13 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass keywords()

Photo Credit to CodeToFun

🙋 Introduction

The keywords() function in Sass is designed to work with color functions and provides a way to get the keyword value of a color.

This function helps in converting color values into their respective color names, making it easier to work with named colors in your stylesheets.

It is particularly useful when you want to standardize colors across your design system or ensure consistency in color naming.

💡 Syntax

The syntax of the keywords() function is as follows:

Syntax
Copied
Copy To Clipboard
keywords(color)

đŸ”ĸ Parameters

  • color: A color value that can be in various formats (e.g., #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)).

↩ī¸ Return Value

The function returns a keyword name that corresponds to the specified color. If the color does not match any known keyword, the function returns null.

📝 Example Usage

Let's explore some examples to see how the keywords() function can be used effectively.

📜 Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
$color1: #ff0000; // Red
$color2: rgb(0, 255, 0); // Green

$keyword1: keywords($color1);
$keyword2: keywords($color2);

body {
  color: $keyword1; // Expected to be "red"
  background-color: $keyword2; // Expected to be "lime"
}

In this example, the keywords() function converts the red and green colors into their respective keyword names.

📜 Example 2: Using with HSL Colors

example.scss
Copied
Copy To Clipboard
$color3: hsl(240, 100%, 50%); // Blue

$keyword3: keywords($color3);

header {
  border-color: $keyword3; // Expected to be "blue"
}

Here, an HSL color is converted into its keyword name, which is then used for styling the border color.

📜 Example 3: Handling Unknown Colors

example.scss
Copied
Copy To Clipboard
$color4: #abcdef; // A custom color not in the standard list

$keyword4: keywords($color4);

section {
  background-color: $keyword4; // Expected to be null or fallback color
}

For colors that do not match any known keywords, the keywords() function will return null, which means you might need to handle such cases in your styles.

🎉 Conclusion

The keywords() function in Sass is a useful utility for working with color names. By converting color values into keyword names, you can simplify your stylesheets and maintain consistency in your color usage. Whether you're working with standard colors or need to ensure that custom colors fall back to standard names, keywords() provides a straightforward solution.

Understanding how to use the keywords() function can enhance your ability to manage colors effectively in your Sass projects. Experiment with different color values and observe how they are translated into keywords to fully leverage this function in your design workflow.

By integrating the keywords() function into your stylesheet, you can improve readability and maintainability, making your design process more efficient and streamlined.

👨‍đŸ’ģ Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy