Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dbankier/ltss
An Alloy TSS pre-compiler
https://github.com/dbankier/ltss
Last synced: 2 months ago
JSON representation
An Alloy TSS pre-compiler
- Host: GitHub
- URL: https://github.com/dbankier/ltss
- Owner: dbankier
- Created: 2013-07-23T02:04:33.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-07-07T22:03:51.000Z (over 10 years ago)
- Last Synced: 2024-10-01T03:08:47.230Z (3 months ago)
- Language: JavaScript
- Size: 174 KB
- Stars: 24
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Less TSS
An Alloy tss pre-processor inspired by less
__NOTE:__ ltss started as a quick hack/poc and never really improved on it. If you are looking for something more robust, feature rich and SASS like, see [STSS](https://github.com/RonaldTreur/STSS).
__NOTE:__ that it isn't less so less features won't necessarily work
# Syntax
## Variables
```
@color: '#4D926F';
@color2: 'rgba(255,0,0,0.5)';
"#header": {
color: @color
}
"Label": {
color: @color
}
"#header2": {
color: @color2;
}
```
becomes
```
"#header": {
color: '#4D926F'
}
"Label": {
color: '#4D926F'
}
"#header2": {
color: 'rgba(255,0,0,0.5)';
}
```
## Mixins
```
.padding (@pad: '5dp') {
top: @pad,
bottom: @pad,
left: @pad,
right: @pad
}
"#header" : {
.padding()
}
"#footer" : {
.padding('10px')
}
```
becomes
```
"#header" : {
top: '5dp',
bottom: '5dp',
left: '5dp',
right: '5dp'
}
"#footer" : {
top: '10px',
bottom: '10px',
left: '10px',
right: '10px'
}
```
## Includes
This
```
@include("./mixin");
@color: '#4D926F';
"#header": {
color: @color
}
"Label": {
color: @color
}
```
and the file **mixin.ltss** (in the mixin section above) becomes this:
```
"#header" : {
top: '5dp',
bottom: '5dp',
left: '5dp',
right: '5dp'
}
"#footer" : {
top: '10px',
bottom: '10px',
left: '10px',
right: '10px'
}
"#header": {
color: '#4D926F'
}
"Label": {
color: '#4D926F'
}
```
## CLI Usage
Install
```
[sudo] npm install -g ltss
```
then
```
ltss [filename.ltss]
```
converted file will be return to stdout
```
ltss [filename.ltss] filename.tss
```
converted file will be written to the output file provided
## Library Usage
the following commands are available: `compileString(string, callback)`, `compileFile(filename, callback)`,
`writeFile(source, target, callback)`
## Extended Example
```
@variable1: 1;
@test2 : 3
.mixin1 (@arg1, @arg2) {
length: @arg1,
bredth: @arg2
}
.mixin2(@color: 'red') {
backgroundColor: @color
}
".class" : {
height: @variable1,
text: 'hello',
width: @test2,
.mixin2(),
.mixin1(20, 30)
}
".class2" : {
.mixin2("blue")
}
```
becomes
```
".class" : {
height: 1,
text: 'hello',
width: 3,
backgroundColor: 'red',
length: 20,
bredth: 30
}
".class2" : {
backgroundColor: "blue"
}
```
## Contributors
```
project : ltss
repo age : 3 months
active : 9 days
commits : 14
files : 16
authors :
9 David Bankier 64.3%
5 Ashton Williams 35.7%
```
## Grunt Plugin
See this [repo](https://github.com/dbankier/grunt-ltss).