Bitwise operators in Sass.
CSS JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
lib
stylesheets
test
.gitignore
.sassdocrc
.travis.yml
CHANGELOG.md
Gruntfile.js
LICENSE
README.md
SassyBitwise.gemspec
package.json
sache.json

README.md

SassyBitwise Build Status Gem Version

Bitwise operators in Sass (not Ruby). Read API documentation.

Installation

  1. gem install SassyBitwise (in terminal)
  2. require "SassyBitwise" (in config.rb)
  3. @include "SassyBitwise" (in .scss)
  4. ???
  5. Profit

API

And

$value: bw-and(42, 48);
// or
$value: bitwise(42 '&' 48);

// -> 32

Or

$value: bw-or(42, 48);
// or
$value: bitwise(42 '|' 48);

// -> 58

Xor

$value: bw-xor(42, 48);
// or
$value: bitwise(42 '^' 48);

// -> 26

Not

$value: bw-not(42);
// or
$value: bitwise('~' 42);

// -> -43

Shift left

$value: bw-shift-left(42, 2);
// or
$value: bitwise(42 '<<' 2);

// -> 168

Shift right

$value: bw-shift-right(42, 2);
// or
$value: bitwise(42 '>>' 2);

// -> 10

All together

$value: bitwise(1 '|' 3 '|' 3 '|' 7);

// -> 7

Notes

  • Because Sass requires special characters to be either quoted or escaped, it is recommanded you always quote the operators.
  • bw() is an alias for bitwise()

Example

Encoding flags as a single int. You know, because we can.

// Defining global flags,
// Bitwise encoded
$RECURSIVE: bw(1 '<<' 0);
$SAFE_MODE: bw(1 '<<' 1);
$MULTI: bw(1 '<<' 2);
$DEBUG: bw(1 '<<' 3);

// Helper function
// Checking for flag status
// ---
// @param [number] $int: flag encoded value
// @param [number] $flag: a global flag
// ---
// @return [bool]
// ---
@function has-flag($int, $flag) {
  @return bw($int '&' $flag) == $flag;
}

// Defining a mixin with many options
// Accepting a single encoded flag as argument
// ---
// @param [list] $int: list of flags, low-level prog' style
// ---
@mixin custom-test($int) {
  $flags: bw($int); // Bitwise parsing flags
  deep: has-flag($flags, $RECURSIVE);
  safe: has-flag($flags, $SAFE_MODE);
  multi: has-flag($flags, $MULTI);
  debug: has-flag($flags, $DEBUG);
}

// Sample test cast
test {
  @include custom-test($RECURSIVE '|' $SAFE_MODE '|' $MULTI);
}
test {
  deep: true;
  safe: true;
  multi: true;
  debug: false;
}

Thanks

A huge thanks to Valérian Galliat for his help, and Fabrice Weinberg for Travis integration.