How to Structuring SASS with @import

SASS, also known as Syntactically Awesome Stylesheets, is a kind of meta-language that have helped Ruby on Rails Developers to redefine the CSS throughout the world.

There are two syntax’s of SASS, first is known as SCSS, ie., sassy CSS, that uses .scss extensions. Whereas another is Sass, that provides a much more convenient way of writing CSS, by using .sass extensions.

Sass With Ruby

Sass with Ruby comes up in three different unique ways,
1. As a standalone module – Being used as a gem.
2. As Plugin for Rack-enabled framework.
3. Simply as a tool from command line.

Standalone Module:

By using it as a ruby module, it can be included in the gemfile of rails application, or be added from the command line by gem installation command:

==>  gem install sass

Sass with Ruby is a very simple way to be included. After gem installation, Sass::Engine comes into the frame:

==> engine =“#main { bg-color: black }”, :syntax=>:scss)
==> engine.render #-> “#main{bg-color: black;}\n”

Rack enabled framework:

To enable sass in Rails, following needs to be added in the environment.rb file:

==>config.gem “sass”

Assets Pipelines in Rails comes with Sprockets

While creating a Ruby on Rails Application, when you run command rails new app, it takes sprockets-rails gem by default installed within the application. To avoid it one can rewrite the command as, rails new app –skip-sprockets.

By skipping the sprockets, rails will generate slightly different config/application.rb file, says,

#require “sprockets/railite”

Sprockets directives are in general used by many to be combined with SASS applications.

Imagine an application created in SASS, when you compiling it for the very first time, it consumes 30-40 seconds approx for the page load. As on time proceedings, on adding more styles the time may extend to 50 seconds that tends to be highly bogging server down.

Changes: Rescue from sprockets

For the performance of Ruby on Rails Application Development in an efficient manner, it is highly recommended to switch rule for coding CSS from sprockets to @import.

The asset pipelines in Rails treats SASS with @import differently and SASS with sprockets differently. If we talk about @import, it saves and compiles the files each time, no matter whatever partials are saved. Whereas sprockets work in a way, it recompile the partials those saved and than injects it to the page locally on every refresh. By adding @import to every non-code partials, may sound little annoying but it makes things really simple and flat.

A simple CSS file, application.css (using sprockets), looks like:

*= require partials/variables
*= require partials/typography
*= require partials/elements
*= require vendor/grid
*= require vendor/mixins
*= require pages/home
*= require pages/listing
*= require pages/detail
*= require_tree

Same file with Sass @import rule looks like:

@import partials/variables
@import partials/typography
@import partials/elements
@import vendor/grid
@import vendor/mixins
@import pages/home
@import pages/listing
@import pages/detail
  • Global namespaces are created in the @import rules, whereas in sprockets those are not. With the help of these variables, it gets easy for Ruby on Rails Developers to reuse the variables where they would need and where they would not.
  • Also these @import syntax’s are easy to read and understand whereas sprockets are not. @import compiles the code at a very fast speed as compared to sprockets, which can lead to less time while first or any number of page loads. 

Winding Up:

As a ROR developer if you are spending a whole day in coding and using sprockets for your styling, you may refresh a page 100 times per day. If these refreshes take 40 seconds per refresh, then it is near about 400 seconds approx for a day that is spent as a waste of time. This is a large amount of time and very effective for a developer and his work. Whereas in case of using @import with CSS stylings the time deprecates directly from 40 seconds to 2-3 seconds which is a very good compiling time than prior.

Motive is to change the perspective from sprockets to @import for better Ruby on Rails application development.

Leave a Comment