Skip to content

Latest commit

 

History

History
398 lines (297 loc) · 8.78 KB

README.md

File metadata and controls

398 lines (297 loc) · 8.78 KB
Raw

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 true if the parameter is of number type and an integer.
  • The function returns false if the parameter is of number type but not an integer.
  • The function returns null if the parameter is not of number type.

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

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments