Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bonarja/microsass
simple scss to css in the web navigator
https://github.com/bonarja/microsass
compiler javascript libsass sass scss
Last synced: about 2 months ago
JSON representation
simple scss to css in the web navigator
- Host: GitHub
- URL: https://github.com/bonarja/microsass
- Owner: bonarja
- License: other
- Created: 2019-06-07T18:08:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-06-29T15:50:01.000Z (over 5 years ago)
- Last Synced: 2024-11-19T16:28:37.560Z (2 months ago)
- Topics: compiler, javascript, libsass, sass, scss
- Language: JavaScript
- Homepage: https://bonarja.github.io/microsass/
- Size: 193 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Microsass [](https://github.com/bonarja/microsass/blob/master/LICENSE) [](https://www.npmjs.com/package/microsass)
Microsass is a script that can convert the basic structures of **SCSS** into **CSS** directly in the browser.
Microsass can process the staggered selectors of **SCSS**, and supports the declaration and use of basic variables, as well as the basic arithmetic processing of variables.
It also interprets the properties to add the -webkit, -moz-, -o and -ms required.
# Testing and live example
## [https://bonarja.github.io/microsass](https://bonarja.github.io/microsass) 🔨⛏
# Support
Microsass supports sass staggered selectors, the use of & (self selector), @media screen, @keyframes and @font-face.
Microsass allows to create variables using `$size1: 300px`; and basic arithmetic processes (addition, subtraction, multiplication and division)
```scss
.item {
width: $size1 + $size2;
}
```
## NOTE Microsass still can not interpret @media screen inside another 🙁
# USE
## Autoload
```html
Microsass
```
For multiple load you can separate using commas
```html
```
## Autoload by Promise
Load by javaScript
```html
microsass.import(["./main.scss", "./style.scss"]).then(() => {
console.log("ready");
});
```
# Convert SCSS text
Convert micro sass string to css minify string
```javascript
var scss = `
$w1: 400px;
$w2: 200px;
#app {
background: orange;
.item{
width: $w1 + $w2;
p {
color: white;
}
}
}
`;
var css = microsass.convert(scss);
```
Convert micro sass string to css with format, html format and colors
```javascript
var scss = `
$w1: 400px;
$w2: 200px;
#app {
background: orange;
.item{
width: $w1 + $w2;
p {
color: white;
}
}
}
`;
var css = microsass.convert(scss, {
format: true, // default is false
html: true, // default is false, format is auto-set true when html is true
color: true // default is true, only works when html is true
});
```
# Convert by NPM module
`npm install microsass -save`
```js
const microsass = require("microsass");
var css = microsass.convert(scss, {
format: true, // default is false
html: true, // default is false, format is auto-set true when html is true
color: true // default is true, only works when html is true
});
```
# Media abbreviation:
An abbreviation has been created for the media screen
Use:
```scss
@if x <= 400px {
.item {
width: 300px;
}
}
```
Compiled output:
```css
@media screen and (max-width: 400px) {
.item {
width: 300px;
}
}
```
Cases:
```
@if x >= xx ----> @media screen and (min-width xx)
@if x <= xx ----> @media screen and (max-width xx)
@if y >= xx ----> @media screen and (min-height xx)
@if y <= xx ----> @media screen and (max-height xx)
```