Out of interest, who's using Less/Sass vs plain old CSS

[Wanze]

I never used less/sass only "pure" CSS.

To be honest, I never took time to read more than the basics and I didn't

see benefits using it. But after reading throught this topic, maybe this will change with

the next bigger project

[yellowled]

By the way, this „I don't think I need this, I don't see the benefits of it.“? Me, about a year ago. Actually, everyone now using a preprocessor said so before giving it a try.

Give it a try. We promise you'll love it.

[slkwrm]

Guys, I've just commited a very first version of the module which compiles less to css. It almost haven't been tested so there's quite a possibility of bugs appearing. And don't expect much, it's very basic

Edit: Forgot to mention. it's a wrapper which uses lessphp library, not my creation .

A css-file is generated when you access frontend page and only if this css-file doesn't exist or it's older then less-file associated with it. The module also creates cache files in your css folder, but I hope I'll get rid of them in future versions. You can create full and minified versions of your css (it takes 2x more time to create both for now as it's not optimized).

I hope it will be helpful (after a lot of improvements) to those who want to have less working "out of the box".

Download it on GitHub.

Will be happy to get your feedback. Won't be able to be here during the day though.

Cheers.

[Pete]

slkworm - that sounds good. Presumably that CSS file would then work fine with my Minify module

[onjegolders]

I've created a monster!

Great to see so many people's views on this and I sort of see both sides of the argument. I've never not enjoyed writing pure CSS but think I can definitely see benefits of something like SASS.

For what it's worth, I would definitely be put off if it were pure command line but an app like CodeKit looks highly promising.

[teppo]

Should've known it: only editor you'll ever need my editor of choice already has solid support for SASS / SCSS: http://www.emacswiki.../emacs/ScssMode. Another reason to give it a try.

A stylesheet full of mixins, if/else, loops, variables, functions, etc, will be as hard to maintain as a bloated hand-crafted stylesheet, if not harder. Developers have an inherited desire to be “clever” and that is usually a red flag.

That's actually exactly what I was talking about earlier. I can't help feeling that stylesheets should be as simple and "dumb" as possible to serve their original purpose, which IMHO is to provide separation of concerns; HTML for structure, CSS for style (presentation) and server-side scripts / programming (PHP, Perl, Ruby / Rails etc.) + Javascript / ECMAScript for logic.

All these features being added by SASS, LESS and even vanilla CSS3 (transitions, transformations, animation, media queries, variables..) are -- no matter how useful they may be -- constantly taking it further down the road to becoming less (no pun intended) of a presentation / styling language and more of a "lightweight programming language" -- and that's definitely not something I'm happy about.

[ryan]

Nice module slkwrm! Don't forget to add to the modules directory.

[alan]

+1 for SASS. Like Martijn I also like to separate out functionality into SASS 'partials' (files prefixed with '_' e.g. _navigation.scss).

I also used to use (may continue to use) CodeKit and also loved that it found naughtinesses (weak syntax, errors, etc) in my jQuery.

My problem with CodeKit is that on a big .scss file it seems to miss tiny edits sometimes and so I may adjust a colour, check if I like the result but the compile-on-file-change failed to happen so I have to force it by adding a newline with a comment etc. Very distracting and annoying, and hence finally part of the reason I am adding to this thread, to say I am trying to replace CodeKit with brunch.io. But it's "doing my head in" (confusing me).

Would be interested to know if anyone else is using brunch.io (will try to remember to start a Pub thread if I get it working).

[Mike Rockett]

+1 for SASS. Like Martijn I also like to separate out functionality into SASS 'partials' (files prefixed with '_' e.g. _navigation.scss).

I also used to use (may continue to use) CodeKit and also loved that it found naughtinesses (weak syntax, errors, etc) in my jQuery.

My problem with CodeKit is that on a big .scss file it seems to miss tiny edits sometimes and so I may adjust a colour, check if I like the result but the compile-on-file-change failed to happen so I have to force it by adding a newline with a comment etc. Very distracting and annoying, and hence finally part of the reason I am adding to this thread, to say I am trying to replace CodeKit with brunch.io. But it's "doing my head in" (confusing me).

Would be interested to know if anyone else is using brunch.io (will try to remember to start a Pub thread if I get it working).

I'd planned on using Brunch at some point, but I feel that it is too 'automagical' for my needs. I see that it is indeed really quick, but that's not necessarily a selling point for me.

And yeah, I can see how it can become confusing - even the starting from scratch docs are kinda weird.

Right now, I'm not using a specific build tool - just using npm to build my assets.

[alan]

Thanks Mike, I am relieved to hear it's not just me that can see the confusing in brunch.io's offering (particularly if like me you are focussed on front end and have relied on CodeKit in the past).

Right now, I'm not using a specific build tool - just using npm to build my assets.

I've read a few posts where people are going that route, sounds good though outside my skill set at present.

[Mike Rockett]

I've read a few posts where people are going that route, sounds good though outside my skill set at present.

It's actually quite simple once you get the hang of it. For one, it's far less scripting in coparison to Grunt/Gulp.

Right now, my NPM config for my own site in development is this:

{
    "name": "FoundryAssetsPackage",
    "preferGlobal": true,
    "private": true,
    "devDependencies": {
        "rimraf": "latest",
        "mkdirp": "latest",
        "less": "latest",
        "uglifyjs": "latest",
        "watch-cli": "latest",
        "jshint": "latest"
    },
    "scripts": {
        "clean": "rimraf build/* && mkdirp build/ecma build/css",
        "prebuild": "npm run clean",

        "less": "lessc --clean-css src/less/main.less build/css/main.css",

        "ecma:lint": "jshint src/ecma/site.js",

        "ecma:packages": "uglifyjs src/ecma/packages.js -o build/ecma/packages.min.js -cm --comments",
        "ecma:site": "uglifyjs src/ecma/site.js -o build/ecma/site.min.js -cm --comments",

        "tasks": "npm run less && npm run ecma:packages && npm run ecma:site",

        "build": "npm run tasks",
        "watch:less": "watch \"-p src/less/**\" -c \"npm run less\"",
        "watch:ecma": "watch \"-p src/ecma/**\" -c \"npm run ecma:packages && npm run ecma:site\"",
        "watch:all": "watch \"-p src/**\" -c \"npm run build\"",
        "all": "npm run build && npm run watch:all"
    }
}

As soon as you understand how to use a terminal, understanding the above is quite simple.

[alan]

Thanks a lot for sharing Mike. Very tempting to forget brunch and try the above...

[gebeer]

I'm using good old "compass watch" in the terminal from within my template folder to compile my SASS/SCSS. So I don't need any other tools than compass.

A typical site/templates/config.rb (taken from my https://github.com/gebeer/site-pwbs profile) for compass looks like: 

require 'compass/import-once/activate'
# Require any additional compass plugins here.
add_import_path "bower_components/bootstrap-sass-official/assets/stylesheets"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

[pwired]

Looks like another dependency to me. Since I learned the delayed output strategy I can separate code from front

like never before. page in backend - page.php - page.inc and page.css which makes workflow and maintenance a breeze.
Maybe in real bigger projects less/sass would be a time saver.

[gebeer]

Looks like another dependency to me. Since I learned the delayed output strategy I can separate code from front

like never before. page in backend - page.php - page.inc and page.css which makes workflow and maintenance a breeze.

Maybe in real bigger projects less/sass would be a time saver.

Sure this is another dependency. Using LESS/SASS you will always need some dependencies like preprocessors. But with package managers like bower etc. organizing dependencies is a breeze. And this can be used with any template approach, be it the delayed output strategy or not.

What makes using LESS/SASS a big timesaver for me is that writing the CSS code becomes much faster. Also separating your CSS into chunks (partials) improves maintainability a lot. 

[Bill C]

Hi,

  I was looking for a CSS grid to use. I looked at Skeleton, PocketGrid and one or two others briefly. I am ok with CSS. Not an expert at all. But CSS positioning.. not my strong point .. sometimes reminded me of playing Jenga. After enough tweaks, I'd get what I wanted, but it was not usually painless.  I saw Bourbon/Neat mentioned and visited their site. Next thing I know, I have Ruby, Sass,  Node.js , Bourbon and Neat installed. So, yeh, you're not just installing Sass if  you go the Sass route. I'm not saying it's a big deal. I was going to get Node at some point anyway And I also went with a piece of software called Koala. It does the Sass compiles after a scss file changes. It crashes sometimes, but I'm on Windows 10, so say no more. Seems like a lot of moving parts just to get a grid going , no? lol So what's your take on Flexbox?   https://www.reddit.com/r/Frontend/comments/3fm2qi/flexbox_ready_for_primetime_or_not_lets_discuss/

[alan]

Hi Bill, Ever since I found Susy I've not used any other. I'm not a Flexbox user so can't comment on that, but Susy + SASS is a delightful combo, good luck to you Cheers, -Alan

[gebeer]

Susy is totally great. It might have a bit of a steep learning curve at the beginning. But once you have wrapped your head around it, it is a pleasure to use and the most flexible grid solution I have encountered so far. There's a ton of great resources out there that can help to grsp the concept. Good starting point: http://zellwk.com/blog/susy2-tutorial/

Flexbox is definitely worth exploring. Recently I discovered https://flexeble.space/ which is a flexbox grid with inline-block fallback for >= ie9.

But since everything can be accomplished with Susy and browser support for flex is not yet fully there, I prefer to wait until it is nativel;y supported in Susy.

And there seem to be good reasons why you shouldn't use flex for overall page layout: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/

[LostKobrakai]

I'm using Susy in a current project and I'm so annoyed of having to clear floats all over the place, let alone that neither nth-child nor nth-of-type are capable of recounting items if you're hiding (adding/removing classes) some elements in the flow, so removing the first/last margin is a pain for dynamic items. As long as I'm using fixed gutter width's I'm using a mixin version of inuit's layout object. Might not be as powerful, but at least more sane.

[tpr]

I'm afraid I don't entirely get the drawback of flexbox written in the "Don't use flexbox for overall page layout" article. Is it only the layout re-draw? If so, I can live with it.

[LostKobrakai]

It's not that hard to create your overall layout with floats or inline-block styling and it just works and you'll hardly have any browsers not being able to render it. Why then use flexbox, which is really meant to style content "in-a-line (column)" and not a whole grid of content and introduce issues like mentioned above or the browser support.

[Bill C]

Hi Bill, Ever since I found Susy I've not used any other. I'm not a Flexbox user so can't comment on that, but Susy + SASS is a delightful combo, good luck to you Cheers, -Alan

Hi Alan! Hey thanks for the input, I'll add Susy to the always growing list of things to check out. Appreciate your comment! Have a good one. Comments by LostKobrakai and gebeer   have also been noted. Thank you also.

[Bill C]

I'm using Susy in a current project and I'm so annoyed of having to clear floats all over the place, let alone that neither nth-child nor nth-of-type are capable of recounting items if you're hiding (adding/removing classes) some elements in the flow, so removing the first/last margin is a pain for dynamic items. As long as I'm using fixed gutter width's I'm using a mixin version of inuit's layout object. Might not be as powerful, but at least more sane.

Sane is always good ... So is Sane's second cousin, Simple. I found this mini-book on CSS layout a short time ago. http://book.mixu.net/css/ . I liked it and found it helpful for myself. Plan on reviewing it every so often. Someone else might find it helpful also. Thanks again gentlemen.

[Can]

Maybe I missed it but for Less to work you wont need anything else than AIOM and because I'm using this module always it's literally just renaming your .css file to .less

processing, minifying and caching in one step

I'm mostly using variables and nesting so far...

And separated files are also combined by AIOM

[tpr]

As I wrote earlier I use gulp for a while and it's a huge help. Last time for example I worked on an earlier project where I used Less, and wanted to make adjustments to one of my modules where I had Sass. No problem, just set up a new gulp task for the scss files and ready to go. It's good to have such flexibility.