sass-is-int
A lightweight Sass function that determines whether a number is integer or not.
Motivation
Unfortunately, at the time of writing, Sass has no way of telling an integer from a fraction – they are both of number type.
This lightweight Sass function utilises the native functionality of Sass to determine whether a given value is an integer or not.
Getting Started
Prerequisites
This Sass function runs on Sass version 3.1.0 or higher. It has no dependencies and can be used in any kind of Sass code.
The code is currently published on npm, a package manager for Node.js, so make sure both of them are installed on your computer for easy use. You can download an installer for your operating system on the Downloads page of Node.js.
Installing
Via npm
In order to get a copy, all you need to do is install the package in your own npm project.
npm install sass-is-int
After this, the source will be downloaded into the project's node_modules folder. From there, you can simply include the code in your own codebase using Sass' @import directive.
If your project depends on Sass to create CSS code, it is recommended to save this package in your project's package.json file.
npm install sass-is-int --save-dev
However, if you happen to use this code in a project which is for instance a Sass framework and you want to include this work in that framework, save the package as a dependency.
npm install sass-is-int --save
Copying the source
Although I personally do not recommend doing this, but you can simply download the source file from this repository and use it in your project that way. Note however, that npm makes updating packages a breeze and you should probably use it anyway.
Usage
Parameters
is-int() expects one parameter of any type. You can pass one directly:
p {
@if is-int(42) {
color: orange;
}
}Because the expression evaluates to true, the output is as follows:
p {
color: orange;
}Or you can pass the function a variable:
$number: 42;
p {
@if is-int($number) {
color: orange;
}
}Which in this case outputs:
p {
color: orange;
}Return values
There are three different return values that the function can produce:
- The function returns
trueif the parameter is ofnumbertype and an integer. - The function returns
falseif the parameter is ofnumbertype but not an integer. - The function returns
nullif the parameter is not ofnumbertype.
It is important to note that the function returns null only if the type of the parameter is not number – neither an integer nor a fraction –, but because null is a falsey value, you should probably check for specific return values.
If you are certain that your parameter is a number, you can use the shorter syntax of Sass:
//Import the partial source file.
@import 'sass-is-int';
$int: 1;
$float: 1.5;
$string: string;
.int {
@if is-int($int) {
color: red;
}
@else {
color: blue;
}
}
.float {
@if is-int($float) {
color: red;
}
@else {
color: blue;
}
}
.string {
@if is-int($string) {
color: red;
}
@else {
color: blue;
}
}The above compiles to:
.int {
color: red;
}
.float {
color: blue;
}
.string {
color: blue;
}However, if you need to make sure your parameter's type is of number, you can use Sass' longer syntax and check for exact return values:
//Import the partial source file.
@import 'sass-is-int';
$int: 1;
$float: 1.5;
$string: string;
.int {
@if is-int($int) == true {
color: red;
}
@if is-int($int) == false {
color: blue;
}
@if is-int($int) == null {
color: green;
}
}
.float {
@if is-int($float) == true {
color: red;
}
@if is-int($float) == false {
color: blue;
}
@if is-int($float) == null {
color: green;
}
}
.string {
@if is-int($string) == true {
color: red;
}
@if is-int($string) == false {
color: blue;
}
@if is-int($string) == null {
color: green;
}
}The above compiles to:
.int {
color: red;
}
.float {
color: blue;
}
.string {
color: green;
}Example
The actual problem I wanted to solve and created this function for was generating grid classes. I used percentage-based width values in the grid classes and in order to avoid calculation issues in modern browsers, CSS calc() functions were used. But for backwards compatibility, plain old percentage values were also kept in the stylesheet.
In a widely-used 12 column setup, using percentage width values, a column spanning 4 of the 12 available columns would have a width of ⅓, which equals to roughly 33.3%. In order to make that calculation easier for the browser, calc(100% / 12 * 4) is a better value for the width property.
In order to generate these classes, I used a simple @for directive:
@for $i from 1 through 12 {
.grid-#{$i} {
width: 100% / 12 * $i;
width: calc(100% / 12 * #{$i});
}
}And this compiles to:
.grid-1 {
width: 8.33333%;
width: calc(100% / 12 * 1);
}
.grid-2 {
width: 16.66667%;
width: calc(100% / 12 * 2);
}
.grid-3 {
width: 25%;
width: calc(100% / 12 * 3);
}
.grid-4 {
width: 33.33333%;
width: calc(100% / 12 * 4);
}
.grid-5 {
width: 41.66667%;
width: calc(100% / 12 * 5);
}
.grid-6 {
width: 50%;
width: calc(100% / 12 * 6);
}
.grid-7 {
width: 58.33333%;
width: calc(100% / 12 * 7);
}
.grid-8 {
width: 66.66667%;
width: calc(100% / 12 * 8);
}
.grid-9 {
width: 75%;
width: calc(100% / 12 * 9);
}
.grid-10 {
width: 83.33333%;
width: calc(100% / 12 * 10);
}
.grid-11 {
width: 91.66667%;
width: calc(100% / 12 * 11);
}
.grid-12 {
width: 100%;
width: calc(100% / 12 * 12);
}The problem here was, that some of those CSS calc() functions are completely unnecessary. The numbers that are integers are unnecessary to be translated into calc() functions. This is one example where a Sass function that checks for integers could be useful.
Using is-int(), the above example Sass code's output can be simplified and optimized as follows:
//Import the partial source file.
@import 'sass-is-int';
@for $i from 1 through 12 {
.grid-#{$i} {
width: 100% / 12 * $i;
@if is-int(100% / 12 * $i) == false {
width: calc(100% / 12 * #{$i});
}
}
}And this compiles to:
.grid-1 {
width: 8.33333%;
width: calc(100% / 12 * 1);
}
.grid-2 {
width: 16.66667%;
width: calc(100% / 12 * 2);
}
.grid-3 {
width: 25%;
}
.grid-4 {
width: 33.33333%;
width: calc(100% / 12 * 4);
}
.grid-5 {
width: 41.66667%;
width: calc(100% / 12 * 5);
}
.grid-6 {
width: 50%;
}
.grid-7 {
width: 58.33333%;
width: calc(100% / 12 * 7);
}
.grid-8 {
width: 66.66667%;
width: calc(100% / 12 * 8);
}
.grid-9 {
width: 75%;
}
.grid-10 {
width: 83.33333%;
width: calc(100% / 12 * 10);
}
.grid-11 {
width: 91.66667%;
width: calc(100% / 12 * 11);
}
.grid-12 {
width: 100%;
}Notice how the classes .grid-3, .grid-6, .grid-9 and .grid-12 are now correctly missing the secondary and in those cases unnecessary width properties with a CSS calc() value as opposed to the first output.
That is because the Sass @if directive evaluates to true, since 25, 50, 75 and 100 are all integers.
Contributing
Questions and feedback are welcome. If you have anything to add, want to correct something in the README, or just want to start a discussion about this project, feel free to open an issue on GitHub.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Zsolt Pentz - Initial work - pentzzsolt
License
This project is licensed under the MIT License - see the LICENSE file for details
Acknowledgments
- Big thank you to PurpleBooth for this lovely README template!
- Legends tell that the wonderful Chris Eppstein is the original author of this solution. He's awesome and you should follow him on Twitter.