Ruby On Rails Classroom image

Anil  Bist / Professional / Web Technology

 
To post your Question Join Classroom
 
Lesson Topics's No:-  |1 | 2 | 3 | 4 | 5|Last
Lessons:- Syntactically Awesome Stylesheets

Syntactically Awesome Stylesheets

Sass is a language for writing stylesheets that improves on CSS in many ways. In this section, we cover two of the most important improvements, nesting and variables. (A third technique, mixins, is introduced in Section 7.1.1.)

                      As noted briefly in Section 5.1.2, Sass supports a format called SCSS (indicated with a .scss filename extension), which is a strict superset of CSS itself; that is, SCSS only adds features to CSS, rather than defining an entirely new syntax.9 This means that every valid CSS file is also a valid SCSS file, which is convenient for projects with existing style rules. In our case, we used SCSS from the start in order to take advantage of Bootstrap. Since the Rails asset pipeline automatically uses Sass to process files with the + extension, the custom.css.scss file will be run through the Sass preprocessor before being packaged up for delivery to the browser.

            Nesting

A common pattern in stylesheets is having rules that apply to nested elements. For example, in Listing 5.5 we have rules both for .center and for .center h1:

 

.center   {
text-align:   center;
}
.center  h1  {
margin-bottom: 10  px;
}

 

We can replace this in Sass with

.center  {
    text-align:  center ;
   h1  {
       margin-bottom: 10  px;
   }

 

Here the nested h1 rule automatically inherits the .center context. 

               There’s a second candidate for nesting that requires a slightly different syntax. In Listing 5.7, we have the code               

 

Here the logo id #logo appears twice, once by itself and once with the hover attribute (which controls its appearance when the mouse pointer hovers over the element in question). In order to nest the second rule, we need to reference the parent element #logo; in SCSS, this is accomplished with the ampersand character & as follows:

 

#logo {
        float:   left;
        margin-right:  10px ;
        font-size: 1.7
em ;
         color:  #fff ;
   text-transform:   uppercase ;
   letter-spacing: -1  px ;
   padding-top: 9  px  ;
  font-weight:  bold  ;
  line-height: 1 ;
 &: hover  {
     color: #fff  ;
    text-decoration: none;
    }
}

 

 

 
 
 
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)