yosssi / gcss Goto Github PK
View Code? Open in Web Editor NEWPure Go CSS Preprocessor
License: MIT License
Pure Go CSS Preprocessor
License: MIT License
I was using tabs in the .gcss file, and the output was missing selectors and brackets. No errors were thrown. Converting tabs to spaces will fix it.
Hello,
Thanks for the great work. I have been using it for production for a while. However, I was wondering if you would consider introducing a way to import/include other gcss files, it will come extremely handy with Mixins
specially.
I think compiling/preprocessing* every gcss file first as text/template
would be a good solution, so you can just basically do {{ template "mixinCollection" }}
.
Of course, using text/template
would allow not only just including other templates but brings the complete power of Go templates in gcss. A bit of a madness be extremely powerful nonetheless.
I'm trying to use Gcss with polymer and some of the components require the use @apply
in the CSS. Currently gcss
strips these tags out when compiled. It would be helpful if when compiling gcss
would ignore such tags.
To see an example of how these are used see https://github.com/PolymerElements/iron-flex-layout/blob/master/demo/x-app.html
Example gcss file
html, body
height: 100%
body
margin: 0
:host
@apply(--layout-horizontal)
@apply(--paper-font-body2)
[nav]
@apply(--layout-vertical)
width: 200px
background-color: var(--paper-grey-300)
Generated css
html,body{height:100%;}body{margin:0;}[nav]{width:200px;background-color:var(--paper-grey-300);}
CompileBytes
& check its commentfont: 100% $font-stack
Compile
: See http://www.reddit.com/r/golang/comments/2gkofb/yosssigcss_pure_go_css_preprocessor/Code is not setup to run under modules, need to call go mod init ; go tidy.
Hi,
I'm trying to reference an external stylesheet from GCSS. Can it be done? Is there a way?
$font: 'Lato'
@import url("//fonts.googleapis.com/css?family=" + $font)
body
font-family: $font, sans-serif
Best regards,
Aleander Rødseth
Using the following GCSS I have a $base-fonts
variable I have some common fonts defined, and I have custom fonts before and after the variable. The problem is when the variable is surrounded by static items the variable seems to get skipped.
GCSS file (surrounded variable)
$color1: #2e6580
$color2: #3a83a7
$color3: #509ec4
$color4: #75b3d2
$color5: #9bc9df
$base-fonts: 'Helvetica Neue', Helvetica, Arial
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
font-family: 'Droid Serif', $base-fonts, serif
color: $color1
a,a:hover,u
color: $color1
text-decoration: none
small
color: $color2
body
font-family: 'Roboto', $base-fonts, sans-serif
footer
margin-top: 10px
Produces
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: 'Droid Serif', serif;
color: #2e6580;
}
h1 a,h1 a:hover,h1 u,h2 a,h2 a:hover,h2 u,h3 a,h3 a:hover,h3 u,h4 a,h4 a:hover,h4 u,h5 a,h5 a:hover,h5 u,h6 a,h6 a:hover,h6 u,.h1 a,.h1 a:hover,.h1 u,.h2 a,.h2 a:hover,.h2 u,.h3 a,.h3 a:hover,.h3 u,.h4 a,.h4 a:hover,.h4 u,.h5 a,.h5 a:hover,.h5 u,.h6 a,.h6 a:hover,.h6 u {
color: #2e6580;
text-decoration: none;
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small {
color: #3a83a7;
}
body {
font-family: 'Roboto', sans-serif;
}
footer {
margin-top: 10px;
}
Removing the serif
and sans-serif
the $base-fonts
works as expected.
Is there an option to indent with 4 spaces instead of 2? Getting invalid indents while compiling:
indent is invalid [line: 2]
$ printf '$a: black\n$b: $a\nbody\n background-color: $b\n'|gcss
body{background-color:$a;}
I expected "black".
I don't get it... is this some project to show that Go can be used to do such things or was this really solving a pain point...? Why not just use execute an external program like lessc? Usually compiling from the sever side is done just once.. so am I missing something?
Without space padding variables don't work within parentheses. If I pad them with spaces like this ( $url )
they work though.
GCSS:
$image-url: ../image/svg/footer.svg
$background-mixin($url)
background-image: url($url)
#background
$background-mixin($image-url)
EXPECTED:
#background{background-image:url(../image/svg/footer.svg);}
ACTUAL:
#background{background-image:url($url);}
The last commit was 2014. Issues do not seem to get answered.
Is it safe to assume that this project can be considered unmaintained?
Has anyone gotten media queries working with gcss? Any '@' rules I try to use just get striped.
I've tried it with variables, nesting, and even just good'ol css.
max-width: 100%
will not parse and produces: max-width: 100%! (MISSING)
.
display:block
will not parse and produces no output. spaces should not necessarily be required between rules but if they are, surely this should throw an error.
Is this something you'd consider adding if I put together a PR for it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.