Ruby On Rails Classroom image

Anil  Bist / Professional / Web Technology

 
To post your Question Join Classroom
 
Lesson Topics's No:-  |1 | 2|Last
Lessons:- Sass and the Asset Pipeline

  Sass and the Asset Pipeline

One of the most notable differences between Rails 3.0 and more recent versions is the asset pipeline, which significantly improves the production and management of static assets such as CSS, JavaScript, and images. This section gives a high-level overview of the asset pipeline and then shows how to use a remarkable tool for making CSS called Sass, now included by default as part of the asset pipeline.

 

  The Asset Pipeline

The asset pipeline involves lots of changes under Rails’ hood, but from the perspective of a typical Rails developer there are three principal features to understand: asset directories, manifest files, and preprocessor engines.8 Let’s consider each in turn.

 

Asset Directories

       In versions of Rails before 3.0 (including 3.0 itself), static assets lived in the public/ directory, as follows:

• public/stylesheets
• public/javascripts
• public/images

 

Files in these directories are (even post-3.0) automatically served up via requests to http://example.com/stylesheets, etc.
              Starting in Rails 3.1, there are three canonical directories for static assets, each with its own purpose:

• app/assets: assets specific to the present application
• lib/assets: assets for libraries written by your dev team
• vendor/assets: assets from third-party vendors

As you might guess, each of these directories has a subdirectory for each asset class, e.g.,

 

$  ls  app/assets/
images   javascripts  stylesheets

 

At this point, we’re in a position to understand the motivation behind the location of the custom.css.scss file in Section 5.1.2: custom.css.scss is specific to the sample application, so it goes in app/assets/stylesheets. 

 

Manifest Files

Once you’ve placed your assets in their logical locations, you can use manifest files to tell Rails (via the Sprockets gem) how to combine them to form single files. (This applies to CSS and JavaScript but not to images.) As an example, let’s take a look at the default manifest file for app stylesheets (Listing 5.14).

 

Listing 5.14 The manifest file for app-specific CSS.
app/assets/stylesheets/application.css

/*
* This  is  a  manifest  file  that'll  automatically  include  all  the  stylesheets
* available  in  this  directory  and  any  sub-directories.  You're  free  to  add
* application-wide  styles  to this  file  and  they'll  appear  at  the  top  of  the
* compiled  file,  but  it's  generally  better  to  create  a  new  file  per  style
* scope.
*= require  self
*= require  tree .
*/

 

The key lines here are actually CSS comments, but they are used by Sprockets to include the proper files:

 

/*
.
.
.
*= require  self
*= require  tree .
*/

 

Here

*=   require   tree . 
 
 
 
image
Anil  Bist

Skills    Ruby On Rails

Qualifications :- High School - SLV, College/University - Graphic Era Deemed Univ University,
Location :-Dehradun,Dehradun,Uttarakhand,India
Description:-

I started my Professional Journey in 2006 with one of the Web Development Company in Bangalore and my 1st framework was "Ruby on Rail" as Web development and delivered around 5+ Projects using this platform. Then came another dimension as JEE/Sturst framework, Gradually I realized that I want to build something on my own and give my passion and energy on creating something different a
Explore

 

  Students (0)