bsass - basically sass
Linux | Mac | Windows | Alpine | Other | bsass.app

bsass (Basically SASS)

bsass is a simple application that will compile .scss files into .css files using the normal sass parameters and protocol.

Why bsass is bsass

bsass was created to be a micro scss compiler without any requirements, all you need is the precompiled binary for your operating system. I personally needed something that could compile sass on Alpine linux for my Docker project called Statup.

No Requirements

Unlike other sass compilers, bsass has 0 requirements. Download the latest release for your operating system and your good to go. bsass is less than 3mb after extracting! No need to install node, ruby, go, C, or anything else!

Install

MacOS install with brew

brew tap hunterlong/bsass
brew install bsass

Linux install with bash/curl

bash <(curl -s https://bsass.app/install.sh)
statup version

Docker snippet

FROM alpine:latest
ENV VERSION=v0.12
RUN apk --no-cache add libstdc++ ca-certificates
RUN wget -q https://github.com/hunterlong/bsass/releases/download/$VERSION/bsass-linux-alpine.tar.gz && \ 
      tar -xvzf bsass-linux-alpine.tar.gz && \ 
      chmod +x bsass && \ 
      mv bsass /usr/local/bin/bsass

Commands

bsass version
//bsass v1.34

Compile a file by using bsass <scss file> <output css>.

bsass theme.scss theme.css

loads base.scss and exports a compiled css to base.css

Variables

Variable's are just like normal $foobar: 12px;.

$container: 780rem;
$container-padding: 5rem;

.container {
    width: $container;
    padding: $container-padding;
}

.container {
    width: 780rem;
    padding: 5rem;
}

Math

You can do math, and more complex math of other objects.

$container: 780rem;

.math {
   padding-left: $container - 80;
   padding-right: $container + 20;
   padding-bottom: $container * 10;
   padding-top: $container / 5;
}
.divide_multi {
  padding: $container / 4 * 10 + ((420 * 50) / 4 );
}

.math {
   padding-left: 700rem;
   padding-right: 800rem;
   padding-bottom: 7800rem;
   padding-top: 156rem;
}
.divide_multi {
  padding: 7200rem;
}

Importing

Just like normal, but you can include an http file if you need to.

@import 'reset';
@import 'variables';
@import 'https://assets.statup.io/remote.css';

.container {
    width: $container;
    padding: $container-padding;
}

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

.remote_location {
    color: #bababa;
}

.awesome_test {
    background-color: orange;
}

.container {
    width: 780rem;
    padding: 5rem;
}

Functions

Function can be useful, there's a couple.

$box-color: #5cd338;

.darken_me {
  background-color: darken($box-color, 30%);
}
.lighten_me {
  background-color: lighten($box-color, 80%);
}

.darken_me {
  background-color: #1c3f11
}
.lighten_me {
  background-color: #4aa92d;
}

• darken darken hex code color down a percentage
• lighten lighten hex code color up a percentage

Mixins

Mix it up and do it like you normally would with sass.

@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box {
    @include transform(rotate(30deg));
}

.box {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

Extends

Make's your CSS easier to handle for the future.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
    @extend %message-shared;
}

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

Features

• Variables $container: 500px
• Import @import 'reset'
• Mixins @mixin transform($property)
• Extends %extend
• Functions darken("#bababa", 25%)

License

MIT - I hope bsass is working in your application. 💁