CSS preprocessors and compilers

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
This group should probably have more organizers. See documentation on this recommendation.

This group is interested in non-standard stylesheet languages that are transformed into CSS. This includes Sass, Less CSS and probably others. We invite you to share mixins, ask questions, provide support and promote the good usage of these tools for more efficient, sturdy and reusable styles in Drupal themes.

kpyan8s's picture

Announcing TWBS LESS: Simple LESS Support for Drupal 7

Introducing LESS support in Drupal 7 would be a great idea when combine with Bootstrap and Font Awesome. A helper module named "TWBS LESS". The goal of TWBS LESS is to provide a handy support for LESS and act as the helper module for on going Drupal-Bootstrap-Remix development.

Read more
amirtaiar's picture

Install scss plugin for fading link

I am trying to intall this plugin in my Sasson [http://drupal.org/project/sasson] Sub-theme in order to make a fading-in links:
http://thecssguru.freeiz.com/animate/

I added the _animate.scss file in - sites/all/themes/subtheme/animate/_animate.scss [BTW I have change it to scss from sass]

I have add:
@import "animate/animate.scss";

scss command:
a:hover {
+animate(fadeIn, 3s, 2s)
}
No success, help will be great.

Read more
JohnAlbin's picture

D8 Mobile Initiative Meeting #27.5

Start: 
2013-01-16 04:00 - 05:00 UTC
Organizers: 
Event type: 
Online meeting (eg. IRC meeting)

Please join us for our next Mobile Initiative meeting to discuss issues related to the Drupal 8 mobile initiative. The meeting will be held as a Google+ Hangout (online video) with concurrent text chat in #drupal-mobile on IRC at:

Wednesday, January 16:
San Francisco — 8pm (Tuesday)
London — 4am
India — 8:30am
Taipei — 12pm
Sydney — 3pm

Read more
JohnAlbin's picture

Year end Drupal 8 Mobile Initiative Status

Hi all,

Last week's meeting was cancelled because I was sick and this week's meeting is, unfortunately, going to be cancelled too as I'll be attending a funeral back in the US. (I live in Taiwan.)

But, we will be revving things up to 11 the first week in January with 2 world-wide meetings (1 for US/Europe/Africa and 1 for India/Asia/Pacific). We'll be finishing up making all the admin forms work on mobile and REWRITING ALL THE CSS IN CORE. Stay tuned for details.

And have a happy holidays!

Read more
Elijah Lynn's picture

Up and Running with Sass and Compass

Start: 
2012-10-20 13:00 - 16:00 America/New_York
Organizers: 
Event type: 
User group meeting

This is a public hangout that will focus on helping those interested in Sass and Compass getting "up and running". There will be lots of screen sharing and many opportunities to ask questions. GNU/Linux, Mac and Windows users are welcome, although I personally only use Ubuntu I think we can figure it out for other OSes as well. Especially if some others attend as well!

We will also cover Live Reload setup since it runs hand in hand with Sass/Compass compilation.

Read more
tsi's picture

File watcher - now with live css update

Just wanted to get some feedback about a new feature we've released.

Not sure how many of you know about Sasson's "file watcher". for those who don't - you can watch a list of files (entered in theme settings form under "Development"), everytime a file is modified - your browser will automatically refresh itself so you get instant feedback on the changes you just did in the files. cool.

The news are that on the latest release, the file watcher works (for stylesheets - CSS/SCSS/SASS) without refreshing your page (!).

Read more
decibel.places's picture

Omega theme with Compass and SASS - what are the best practices?

For background, I am using Compass on the command line with an Omega HTML5 starter kit subtheme. Also, I'm in local dev on Windows 7 and abandoned trying to use the Compass module, but I'm pretty sure that doesn't matter if I can use the command line.

I have created a compass project in my theme and I have the SASS default stylesheets ie.scss print.scss and screen.scss - I created a .scss file for each of the Omega stylesheets. They are then compiled to CSS and watched by Compass.

Read more
tsi's picture

Sasson - new drupal base theme with Sass & Compass

Check out Sasson, you're gonna love it !

  • It includes Sass & Compass framework - no extra requirements, simply enable and start writing sass/scss (thanks peroxide and SASSy )
  • It's mobile friendly - with responsive, content-first layout, out of the box. optional mobile-first responsive layout, media queries break-points are configurable.
  • It converts the core template files to HTML5 markup - <header>, <footer>, <article> for nodes, <section> for blocks, <aside> for sidebars, <nav> for menus etc.(thanks Boron)
  • It includes a perfectly semantic grid system - no more non-semantic grid classes (based on 960gs via Compass).
  • It includes an HTML5-friendly CSS Reset (normalize), cross-browser styling compatibility improvements and other tweaks & best practices from HTML5Boilerplate v2.0
  • It enables HTML5 in oldIEs via HTML5shiv
  • It *doesn't* give you a pile of CSS rules you will have to override.
Read more
SteveK's picture

Comparison of Less vs SASS

A couple of people had asked me the differences between SASS vs LESS Syntax. Chris Eppstein, the creator of Compass, graciously forwarded me this comparison chart showing both syntaxes side by side.

https://gist.github.com/674726

Read more
nsrivastav09's picture

Calling onClick function

Hi,

I have created an image map. It means clicking on different parts of image will popup different content. It is working well on my local system but when I am uploading the same on the drupal website, its popup feature is not working. I am new to the drupal and need your help.

Please let me know how to call OnClick function in drupal.

Thanks.

Neelabh

Read more
barraponto's picture

Sass Mixins for Zen theme overrides

I have written a Sass base file with variables and mixins meant to ease the override of Zen layout-fixed.css
http://gist.github.com/614645

It provides variables like $zen-content-position, which controls whether the content comes before the two sidebars, in the middle of the sidebars or after them. other variables control sidebars and content width, and navigation height.

The idea behind this sass file is making Zen easier to manipulate without editing any of the provided css files.

Read more
Subscribe with RSS Syndicate content