1

I'm getting familiar with the official documentation of Zen Theme on Drupal 7. I'm wondering about the SASS- and SCSS-Files. The CSS-Interpreter can't understand these files ofcourse. I read about gulp.js which is the preproccessor for SCSS-Files. I also read about the server nodejs - what I used years before - that gulp.js needs for action. I read it here: getting started SASS and Compass

Can someone explain me, how dose MS Server with no Drush works to handle SCSS with gulp.js-File - what is not been found in the Zen Theme-Folder by me - to preprocess clean CSS-Files?

  • Welcome to Drupal Answers :) You better ask that in Zen's issue queue on drupal.org. As support request maybe. Zen is third party and you will probably find no one here with that much insight to help you. – leymannx Sep 9 at 11:51
  • Thank you for your advice :). – user95245 Sep 9 at 12:32
  • @leymannx is it almost enough link? I'm realy sorry, I'm very new and I don't know where to ask. – user95245 Sep 9 at 13:03
  • Every Drupal module and theme have an Issue tracker you can access from the project page, for Zen it's: drupal.org/project/issues/zen?categories=All Most of development and support activity related to particular projects happen in there so it's better to go to appropriate projects issues instead of general support forums. – prkos Sep 9 at 15:10
1

I don't have experience with MS server but I expect the entire process to be the same as described.

This applies to themes in general, not only Zen:

Using Sass preprocess to compile CSS is independent from Drupal, or Drupal themes. This is just an outside tool that you can use to make your CSS life easier, if you are familir enough with CSS and Sass. The end output that themes use will always be CSS, because that is what browsers understand.

Some themes have opted to integrate Sass preprocessing into their workflows. You don't have to use Sass, you can always just override the base CSS that was generated through Sass with your own CSS. But some themes have Sass so tightly integrated that it would a pitty not to take advantage of it. It's entirely your call.

Most of Sass preprocessing situations define which folder on your system contain Sass files, and which folder stores the compiled CSS, they are usually different folders (it's a cleaner practice not to keep the compiled CSS in the same folder as its source Sass). This is what you will find in most themes that use Sass, you will have a dedicated folder for Sass, and another one for compiled CSS, so you can continue using that structure. This structure is then recorded in the gulp.js file, so the preprocessor software knows which files to use as sources, and where to save the compiled code.

If you're not using Sass, but only pure CSS, you should keep your CSS in the third place! Don't keep it in the folder with the compiled CSS, because if a preprocessor is ever triggered, the contents of that folder might be deleted! Keep your dry CSS in a dedicated folder that doesn't have anything to do with Sass. You will add the CSS files to your Drupal theme configuration, so they are applied after all the theme code. This is how you can bypass dealing with Sass if a theme is using it.

Nodejs isn't the only way to get Sass working on your computer, there are other technologies that have it, but either way you'll have to install some engine that makes the Sass processor available.

Once you install nodejs, and the preprocessor packages as noted in the Zen tutorial, you will be able to start compiling CSS out of Sass files "anywhere" on your computer, given the correctly configured gulp.js.

You will probably just want to work on your Zen subtheme, which already comes with a great gulp.js, so if you have the preprocessor installed correctly you can start compiling the Zen subtheme Sass into CSS.

This can be done manually, you edit the Sass files to edit/add new Sass/CSS code, then (through terminal) use nodejs and Sass commands to execute Sass to CSS compiling. So you manually execute the compile command each time you want to compile your Sass changes and test them in browser.

More commonly it is done automatically by using a command to start watching Sass folder (a process is opened on your computer in your terminal). This way when you save changes to a Sass file the processing starts automatically, old CSS files get overwritten with the new CSS that contains the changes. There is also the Browsersync option that refreshes CSS automatically in the page where you're developing (local environment server) but it's more complicated with caching...

So this is what the development steps are with Sass, once you have the preprocessor installed:

  1. Open terminal, go to your subtheme folder
  2. Start watching (there's a command for that, the process is started and is kept active)
  3. Edit the Sass files to make your changes (in what ever editor you usually use)
  4. Save Sass file(s), this is when the preprocessor will compile the CSS, you will see the output in terminal, if you have any errors you need to fix them etc. The output will tell you when the CSS is compiled so you can check your changes in browser (it can be miliseconds or seconds depending on circumstances)
  5. Repeat
  6. When you're done with development you stop watching the subtheme folder after your latest compile (you stop the process you started in step 2)

What is also usually involved in development is commiting changes to Git once you have a meaningful piece to commit (not after every Sass file save). For this I keep another terminal (shell) open, one for keeping an eye on CSS compiling with the watch command, the other for "regular" commands and git.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.