sbt-sass and sbt-less with multiproject

[Michael Slinn]

Two questions:

1. Play's sbt-less docs and play-sass docs  do not mention any special consideration for Play multiprojects. I know that asset path computations are more complex with subprojects. Does anyone have specific advice for Play projects built from several subprojects?
2. Any preference to using less or sass? I found some discussion here and here. Looks like SASS is winning. Comments? War stories?
   

Mike

[Greg Methvin]

Hi Mike,

On Sun, Sep 18, 2016 at 9:15 PM, Michael Slinn <msl...@gmail.com> wrote:

1. Play's sbt-less docs and play-sass docs  do not mention any special consideration for Play multiprojects. I know that asset path computations are more complex with subprojects. Does anyone have specific advice for Play projects built from several subprojects?

I don't think there is anything specific to sbt-less or sbt-sass that would differ with subprojects.

 

1. Any preference to using less or sass? I found some discussion here and here. Looks like SASS is winning. Comments? War stories?
   

Their philosophies are slightly different. Less is a declarative language that essentially extends the existing CSS syntax. Sass is an imperative language with built-in CSS syntax, so it's more like writing a script to generate your CSS. Sass has more features, but there is often a way of doing the same way in Less if you need to (e.g. using recursive mixins where one would use loops).

I have a slight bias towards Less because it's simpler and more CSS-like, and I don't like to put much logic in my CSS anyway.

Mike

--
You received this message because you are subscribed to the Google Groups "Play Framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to play-framework+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/0601900f-f4d4-4a26-b0ca-59d7d4f85b12%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Greg Methvin

Senior Software Engineer

Lightbend, Inc.

[Mike Slinn]

On 09/18/2016 11:58 PM, Greg Methvin wrote:

I have a slight bias towards Less because it's simpler and more CSS-like

That was true before SCSS (Sass 3) came out. See http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html

"Sass 3 introduces a new syntax known as SCSS which is fully compatible with the syntax of CSS, while still supporting the full power of Sass. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax.

"Since SCSS is a CSS extension, everything that works in CSS works in SCSS. This means that for a Sass user to understand it, they need only understand how the Sass extensions work. Most of these, such as variables, parent references, and directives work the same; the only difference is that SCSS requires semicolons and brackets instead of newlines and indentation."

I'll give it a whirl and see what happens.

Mike

[Mike Slinn]

... and there is this survey, which shows SASS/SCSS is 5x more popular than Less:



Mike

[Michael Slinn]

In my multimodule Play webapp, I put the following in modules/cadenza/app/assets/stylesheets/main3.css:

@import "lib/cadenza/redmond/jquery-ui.css";
@import "lib/cadenza/redmond/jquery.ui.theme.css";
@import "lib/cadenza/css/bootstrap.css";
@import "lib/cadenza/css/bootstrap-datepicker.css";
@import "lib/cadenza/dropzone.css";

I had to modify the @import path recommended by the Play docs to account for the placement of the lib/ directory in a multimodule project. The following files were output:

./target/web/public/main/stylesheets/main3.css

./target/web/classes/main/META-INF/resources/webjars/cadenza/3.0.0/stylesheets/main3.css

./target/web/sass/main/stylesheets/main3.css

All of the generated files had the @import statements intact, without any expansion. Does sbt-sassify work with multimodule projects, or do I need to configure something?

Mike

[Michael Slinn]

Correction: the source file had a .scss extension, not a .css extension

[Greg Methvin]

Hi Mike,

SCSS behaves exactly like the original Sass syntax; it just looks different. It would be impossible support all the features and control structures without keeping the imperative nature of the language.

I found a fairly good blog post explaining the philosophy behind Less and it's differences from Sass/SCSS: https://getcrunch.co/2015/10/08/less-the-worlds-most-misunderstood-css-pre-processor/.

Like I said, use what makes sense for your use case. I don't think either is dying anytime soon.

--

You received this message because you are subscribed to the Google Groups "Play Framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to play-framework+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/e92c502b-4236-f4f8-0aee-e2b50609bc1c%40gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Michael Slinn]

I should also explain why I commented out the first @import:

@import "lib/compass-mixins/lib/compass";

Results in:

Error: Functions may not be defined within control directives or other mixins. on line 81 of modules/cadenza/target/web/web-modules/main/webjars/lib/compass-mixins/lib/compass/functions/_lists.scss >> @function compact($vars...) { --^

In /var/work/training/cadenza/modules/cadenza/target/web/web-modules/main/webjars/lib/compass-mixins/lib/compass/functions/_lists.scss:81

77  @return nth($list, 1);

78}

79

80@if not(function-exists(compact)) {

81  @function compact($vars...) { 

82    $list: ();

83    @each $var in $vars {

84        @if $var {

85            $list: append($list, $var, comma);

Changing the first line to incorporate the subproject into the import path yields:

Error: File to import not found or unreadable: lib/cadenza/compass-mixins/lib/compass Parent style sheet: /var/work/training/cadenza/modules/cadenza/app/assets/stylesheets/main3.scss on line 1 of modules/cadenza/app/assets/stylesheets/main3.scss >> @import "lib/cadenza/compass-mixins/lib/compass"; ^

In /var/work/training/cadenza/modules/cadenza/app/assets/stylesheets/main3.scss:1

1@import "lib/cadenza/compass-mixins/lib/compass"; 

[Michael Slinn]

I made significant progress, and put together a little demo project. Some questions remain, shown in the README, plus one question about a stubborn subproject whose reverse routes are not prefaced with the subproject prefix.