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
base.scss
and exports a compiled css to base.css
loads 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.