nusu / spectre.scss

port of spectre.css to sass

Sass Version of Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre.css

This sass version converts less to sass for better integration with your sass project and allows you to use sass mixins and @extends to create, for example, additional buttons, labels etc.

Install

Spectre.scss can be installed from:

npm

npm install spectre.scss

bower

bower install spectre.scss

or manually you can clone this repository

Where is normal css files?

In order to get processed css files first you need to run

npm install
gulp

gulp will process the scss files to dist/ folder

Usage

Simply add your main sass file this

@import "spectre";
@import "spectre-icons";
@import "spectre-exp";

Scope

This is a minimual less->sass conversion.

Syntax for variables and mixins has been converted, but the syntax remains css-like and does not adopt sass' minimal syntax. This has been done to reduce the effort when the less project updates.

Documentation

For framework documentation, see original Spectre.css project.

Credit

Full credit for this brilliant and useful framework goes to Yan Zhu.

Contributions

Feel free to submit a pull request. Help is always appreciated. Please ensure your gulp builds work before requesting.

spectre.scss's Issues

Less fade() and Sass fade-in() are not equivalent

#2 Refactored fade() to fade-in(), but their behaviors are not the same. The Sass equivalent to fade(color, amount) is rgba(color, alpha).

LESS fade:

Set the absolute opacity of a color.

SASS rgba:

Sets the opacity of an existing color.

SASS fadein:

Takes a color and a number between 0 and 1, and returns a color with the opacity increased by that amount.

Note that rgba() takes the alpha as a number 0-1 instead of a percentage like fade().

fade() does not work

Hi !

First of all, thanks for your job !

I started using Spectre.scss for a VueJS project, and when the scss is being compiled, some backgrounds are set to fade(<color>, <amount>), which is compiled as-is. The browser (Chrome) does not recognise it.

Shouldn't you use fade-in() instead ?