SASS/Compass Support in XenForo Style Properties/Templates

[John L.]

Hi Guys,

As a web designer I've taken to learning more about Sass and how it can make my life a bit easier. It's been a fantastic find for me and I would like to propose this solution to put XenForo in the forefront with designers in mind.

What is SASS/Compass?
Sass is an extension of CSS3, adding nested rules, variables,mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Source: http://sass-lang.com/

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.
Source: http://compass-style.org/help/

What's so good about it?
Compass allows you to utilize various Sass features using pre-defined mixins which have been invaluable in saving me time. For those who design you know it can be tedious writing out all the various browser specific selections when adding design elements. For example, when you want to add rounded corners to an element, you will usually have to write out the following:

.element{-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;}

Well, that's not cool. What Sass and Compass mixins allow you to do is write this out with much less pain:

.element{@include border-top-radius(5px);}

This will write out the exact same as above...with far less initial markup. This is of course a small sample of what it can do, but I think having it integrated into the XenForo template and style properies system will help in many ways (not only with Mike and Kier, but theme builders).

Another helpful example is the above mentioned "nesting rules". It gets annoying have to write over and over these specific selectors for elements. Well, skip that now. Instead of having to write:

.element{border:1px solid red;}
.element h2{padding-top:0;}
.element h2 span{color:green;}

You can simply write:

.element
{
border: 1px solid red;
h2 {
padding-top:0;
span {
color:green;
}
}
}

It looks a bit more messy without indents, but indented it's much easier to read and find your code. It also helps keep you in check from being too specific with your CSS markup as you never want to go more than 3-levels deep in nesting.

How do we integrate this into XenForo?
Sass and Compass are actually built in Ruby, but there are some PHP versions in development. I'm trying to find some, since it wouldn't be right to require people to install Ruby on their servers to use this. If I find new links to help I will.

 

[Rocket]

Great suggestion @LP-John . For years with vB I suggested the ability to move past the "color picker interface" so advanced users could at least make use of more powerful options.

I'd really like to have the ability for more advanced designers to not be crippled by the system that is currently in the admin panel.

It seems to me that forum software just doesn't seem to care as much about the ever-expanding toolset designers and front-end developers can use around the web. Much of it is local and precompiles. Something like Sass as mentioned above is insanely powerful, and theme designers could create much more valuable and customizable offerings if somehow we could get to the .css files without having to fight through a bloated interface.

Right now (unless someone has figured out a way) it is nearly impossible to work with Sass, Less, or Stylus on any Forum Software.

I work a lot with WordPress, and it is just so much less frustrating because I have access to the files I need to compile. Maybe its just wishful thinking but I'd love at some point to be able to use these tools with Forums.

 

[Brent W]

I have been trying to get Rocket on board the xenForo bandwagon but he has been spoiled by SASS. He is an amazing designer who works for http://www.socialknowledge.com (just browse through their website portfolio to see his work with vB 3.)

xenForo would be a much better place with more people like him on board. Hope @Kier and @Mike entertain his and others concerns around advancing designing for forum software.

 

[Robbo]

Great suggestion @LP-John . For years with vB I suggested the ability to move past the "color picker interface" so advanced users could at least make use of more powerful options.

I'd really like to have the ability for more advanced designers to not be crippled by the system that is currently in the admin panel.

It seems to me that forum software just doesn't seem to care as much about the ever-expanding toolset designers and front-end developers can use around the web. Much of it is local and precompiles. Something like Sass as mentioned above is insanely powerful, and theme designers could create much more valuable and customizable offerings if somehow we could get to the .css files without having to fight through a bloated interface.

Right now (unless someone has figured out a way) it is nearly impossible to work with Sass, Less, or Stylus on any Forum Software.

I work a lot with WordPress, and it is just so much less frustrating because I have access to the files I need to compile. Maybe its just wishful thinking but I'd love at some point to be able to use these tools with Forums.

Not only cripplying design ability with so much in the admin panel but also developers. I have been making tools to move things to the file system and command line. Next is trying to get sass working (which is how I found this thread). Hopefully sass can ignore the custom syntax for xenforo.

 

[CreationNation]

Digging this thread out of the grave.

I've also recently been extending my skillset and am neck deep in the Sass pond, and it's no fad.

I didn't happen upon this thread by accident. I googled "xenforo sass" - and here we are. This would be a dreamy addition to xenforo - and would save designers and devs tons of time (including the XF staff themselves).

 

[Robbo]

I have this working with guard however I haven't had time to properly package it yet. It also requires certain things to be done with sass code which I will have to outline. And is focused on addon development. You can see it here if you know ruby - https://github.com/robclancy/xf-addon-skeleton/blob/master/Guardfile#L23

 

[Sim]

Just as a general follow-up to this thread, there are multiple areas in recent years where web development has progressed dramatically towards widely used techniques, patterns and even standards.

While I recognise the importance of keeping XenForo easy to implement and modify for not-so-technical users, I feel the real power of the platform is being left behind by a lack of support for some of these new tools and technologies.

I also do recognise that this is still a v1.x product and development was started before a lot of these technologies matured - but moving forward to v2.x and future major releases, I would love to see more of these technologies embraced.

Most importantly, I feel there is a need for:

• SCSS support for theme development (hence my post in this thread)
  
• More self-contained directory structure for add-ons so that it is easier to use source control and automated deployment tools for production sites - specifically, everything (including all assets) required for an add-on is contained within a since directory - none of this copying files to different parts of the filesystem on deployment.
• Allow add-ons to be installed and managed using Composer. Despite its flaws, it really is the standard for PHP development now.

 

[gldtn]

This would be great. I just ran into a CSS grid framework that seems far better than html grids and less confusing, but requires SASS. If anyone is interested look up Susy. I think something like this could make life a lot easier to create responsive layouts for add-ons within Xenforo.