Materialize: Feature Request: SASS for Meteor.js

[boustanihani]

Could you please provide an official SASS package on https://atmospherejs.com/materialize ?

Users could then override variables by creating (for example) a file named client/materialize-override.scss and still get updates...

You could make use of: https://atmospherejs.com/fourseven/scss

Also check: https://atmospherejs.com/grigio/materialize-sass

[dcworldwide]

:+1

I use fourseven's scss (libsass) package with materialise.

Its less then ideal atm because the atmosphere materialize release does not include the scss files. It would be great to have scss files in the package.

I agree a seperate atmosphere package would be a more elegant design.

[laurentpayot]

Yes, as it's not possible to change the primary and secondary color variables in the redish/greenish current package its only use is for testing, so that's not very useful. A package with the latests scss files and a way to override _varriables.scss would be SO cool...

[dhampik]

:+1:

[mcoenca]

Same Here, it would be great !
Can help contribute if someone gives me a clue of where to start / look at. (Where is the repository or the folder for materialize:materialize meteor package ?)
It also breaks all the materialize sass mixins and functions.

[ryandeussing]

:+1:

[daltonrenaldo]

:+1:

[funkybunky]

:+1:

[adamdawkins]

:thumbsup:

[TimoRuetten]

+1

[ofstudio]

+1

[Chun-Yang]

I wrote a package. Check if out: https://atmospherejs.com/yang2007chun/materialize-scss

[dcworldwide]

@Chun-Yang Thanks. I can't use your package though. Reasons are:

Using https://atmospherejs.com/materialize makes sense as it will always have the latest materialize release. Your package will soon be out of date unless you continually maintain it. You should use a submodule to upstream instead. Or; you could simply change your package so that it contains only the upstream sass files. That means your package would be used in conjunction with the https://atmospherejs.com/materialize package.

[Chun-Yang]

@dcworldwide Thank you for your feedback, I will update my package and use submodule. I do not think using materialize smart package is a good choice since it will import compiled css and js. Again, thank you.

[dcworldwide]

OK i agree with you. In that case your package will work great

[ryandeussing]

Thanks @Chun-Yang I'll have a look at your package!

[pistou]

:+1:

[laurentpayot]

@Chun-Yang nice package, working great for me! :+1:

[fabyeah]

:+1:

[tdbs]

:+1: This is a must

[bbshopadmin]

+1

[artshostak]

Are we any closer to getting SASS support on this official Materialize library for Meteor.js?

[ModrichBadr]

+1

[donwojtallo]

+1

[afifsohaili]

Someone has already made a package for this.
https://atmospherejs.com/poetic/materialize-scss

[elie222]

+1

[boustanihani]

In Meteor 1.2 you could make use of @import "{}/file.scss" to allow users to override variables...

Check: https://quip.com/RXFlAk9Rc2xI
The less and stylus packages now support cross-package imports! If you specify a file like
@import "{package}/file.less" (with the curly braces), it will load the file from that package. Use @import "{}/file.less" to load a file from your app.

[artshostak]

That's a great addition to Meteor — but I don't think it solves anything in this case as the package doesn't actually contain the SASS files, just a single CSS output. Or am I missing something?

[boustanihani]

@artshostak yes this is the case now, but they could make one with sass and use the new feature to allow us to customize things :)

[elie222]

There is a sass materialize package for meteor already. I recommend using
it. Search atmosphere for it
On 31 Aug 2015 21:52, "boustanihani" [email protected] wrote:

@artshostak https://github.com/artshostak yes this is the case now, but
they could make one with sass and use the new feature to allow us to
customize things :)

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/1018#issuecomment-136464222
.

[boustanihani]

I know, we would like to have an official one :bowtie:

[mitar]

It would be really great to have a Meteor package where you could specify variables like colors and so on.

[elie222]

There is one. You're using the wrong package
On 20 Oct 2015 11:42 a.m., "Mitar" [email protected] wrote:

It would be really great to have a Meteor package where you could specify
variables like colors and so on.

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/1018#issuecomment-149478949
.

[mitar]

You mean poetic/materialize-scss? The issue is that it is not recent. See this ticket: https://github.com/poetic/meteor-materialize-sass/issues/10

This is exactly the situation why there is this ticket and why 3rd party package is not enough. Because 3rd party package has to fix some issues to work with Meteor which are not merged upstream it is complicated to maintain it.

[elie222]

Ah. Ok. I haven't upgraded the project I was using it on to 1.2 yet
On 20 Oct 2015 11:57 a.m., "Mitar" [email protected] wrote:

You mean poetic/materialize-scss
https://github.com/poetic/meteor-materialize-sass/? The issue is that
it is not recent. See this ticket: poetic/meteor-materialize-sass#10
https://github.com/poetic/meteor-materialize-sass/issues/10

This is exactly the situation why there is this ticket and why 3rd party
package is not enough. Because 3rd party package has to fix some issues to
work with Meteor which are not merged upstream it is complicated to
maintain it.

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/1018#issuecomment-149482955
.

[yok0]

:+1:

[NitroBAY]

Yes please, we should be able to have sass files to customize variables, and we could also remove unused imports in sass. Please implement that :D Don't hesitate on taking the code of unofficials plugins...

[elie222]

There's another package that offers sass for materialise as mentioned above
I believe
On 7 Jun 2016 00:23, "NitroBAY" [email protected] wrote:

Yes please, we should be able to have sass files to customize variables,
and we could also remove unused imports in sass. Please implement that :D
Don't hesitate on taking the code of unofficials plugins...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/1018#issuecomment-224092614,
or mute the thread
https://github.com/notifications/unsubscribe/AC8oXwIKihX6So5KWjsgsJXkK4fNkaOkks5qJI--gaJpZM4D1_bm
.

[NitroBAY]

That I use, but the official one have to include sass support

[andrewjrhill]

👍

[NitroBAY]

5afb6000a says to fix the problem, tough the package.js seems still unpublished and there is no documentation about sass support for meteor. I'll try to manually install package.js and try to tell if that works like poetic. In any way, thanks to materialize's team :D

[NitroBAY]

So I tried to use it as poetic materialize but it wasn't working because package.js forgot to import a file so I fix package.js in #3280. Once the fork merged, all should working like with poetic, I test it.
PS : it seems that the whole materialize.scss is automatically pushed to the client so when I import scss variables/colors to override default variables these files are in twice in the final css so I'm really confused on how correctly use sass files

[Dogfalo]

Still need to add a few lines to the readme on how to use it in a meteor app, but other than that, the package should be working with Sass for the next release!

[NitroBAY]

Yeah, as #3280 is forked now you just need to fix #3281 and it should be great. Thanks @Dogfalo

[mitar]

Could anyone explain how to configure custom colors with Meteor? So how to set SCSS variables using Meteor?

[mitar]

I figured it out. I changed in package.js of this package the addFiles line to:

api.addFiles(scssFiles, 'client', {isImport: true});

And then I just create a SCSS file in my app and do:

@import "{materialize:materialize}/sass/components/color";
$primary-color: color("blue", "lighten-2");

@import "{materialize:materialize}/sass/materialize";

[Dogfalo]

Already been added!

[NitroBAY]

@Dogfalo please it seems that the atmosphere package is somewhat broken as sass import only works if one install materialize from a local version fetched from the repo.

[Dogfalo]

This was fixed in the newest version