Functions in SASS Tutorial
Learn How to Write Functions in SASS
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
Sass functions can receive arguments and return a single value.
They add an element of programming to writing CSS code, and we can now do the math!
The standard math operators +, -, *, /, and % can all be utilized.
An Example Function
The following function can accept two arguments, $first-number and $second-number. The value that is returned by the function is the sum of the two variables:
@function add-numbers($first-number, $second-number) {
@return $first-number + $second-number
}
Say we want to replace the value of a padding property with the sum of two separate values.
We would call our function and pass in the arguments like so:
.box1 {
padding: add-numbers(5px, 10px);
}
The resulting CSS output would be:
.box1 {
padding: 15px;
}
Let's see the full code:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
And our SASS:
@function add-numbers($first-number, $second-number) {
@return $first-number + $second-number
}
.navbar {
background-color: red;
padding: add-numbers(5px, 100px);
ul {
list-style: none;
}
li {
text-align: center;
margin: 1rem;
}
}
As you can see, functions help you write more readable and DRY Sass, as you can utilize reusable logic in a very efficient manner. This can make a huge difference when you start working on larger and more complex projects!
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
