Introduction to SASS

        


INTRODUCTION TO SASS:

             From the previous post, we came to know about BEM methodology. You might feel like naming the class based on BEM would be the toughest one. But this one can be easily resolved by using SASS/SCSS.

                What is SASS? Syntactically Awesome Style Sheet (SASS). It is a CSS preprocessor, which adds special features such as variables, nested rules and mixins.

                  First, what is a CSS preprocessor? It is nothing but a scripting language that extends CSS by allowing developers to code in one language  and that will get compiled to CSS. SASS is one of the preprocessors. There are some other preprocessors like LESS, Stylus etc.

                Now, we get into our case ”SASS”.

                Why SASS?
  • Allow writing clean CSS in a programming construct.
  • Reduce repetition
  • Create more manageable, reusable, compact style sheets which can be imported and used.
  • Faster development time
  • Programmatic CSS features.

 How to use SASS?

EXTENSIONS:

   SASS provides two extensions

  1.  .scss  (Sassy CSS) - Implementing with curly braces.
  2.  .sass - implementing without curly braces. 

   But both should be compiled in the SASS compiler. 

 

   How to compile SASS? 

            I would recommend you to follow either of these following ways: 

  • Vscode extension - Live SASS compiler.
  • By installing node-sass dependency in NodeJS.

IMPLEMENTATION:

                 This jotting is completely for the novice. To know more about SASS, I strongly suggest you peer through SASS documentation.

1. VARIABLES:

    Just like CSS, SASS also allows us to provide variables.             DECLARATION: $variable-name

$font-color: #fff;
 Body{
                        color: $font-color;

                }


                2. NESTING:

                            Nesting helps in reducing the inordinate combinators.

                            Example:

                        nav{
                                ul{
                                     list-style-type: none;
                                     li{
                                         margin-top: 10px;
                                         margin-bottom: 10px;                                    
                                       }
                                }
                        }

                            Output: (After compilation)

                            nav ul{
                                    list-style-type: none;
                            } 
                            nav  ul li{
                                    margin-top: 10px;
                                    margin-bottom: 10px;   
                            }
                                    
                               BEM Methodology can be applied easily using SCSS/SASS.

                                  EXAMPLE:

                                            .card{
                                                     &__title{
                                                                // some styles
                                                     }
                                                      &__desc{
                                                               // some styles
                                                     }
                                             }     

                                     " & => Parent selector"                       

                                  OUTPUT:

.card__title{
        // some styles
}
.card__desc{
        // some styles
}
                               

                    3. PARTIALS:

                            Partial files are just the snippet of the whole code. This can be imported and used. This is just like a module. Partial files cannot be compiled separately.

                     DECLARATION:  _partials. scss                                       

                    4. MIXINS:
                                Mixins help in reusing the same codes. This reduces the lines of code that we are typing. This can be done by using the keyword @include mixin-name.

           DECLARATION: @mixin mixin-name{}


                   5. EXTENDS:                                 Extends are simply the inheritance. These codes can be inherited and used for some other components.                        DECLARATION: @extend class-name
                    
                     This post is just for letting you know about the existence of the SASS concept. I firmly recommend you to read the documentation. This concept may look difficult at the initial stage. But practice makes perfect. So practise a lot. Have you enjoyed reading this post? Leave your thoughts in the comment section. To boost up your computer knowledge, I put forward you to get along with our posts.
                    
                       
                                                

Comments

Post a Comment

Popular posts from this blog

MULTIMEDIA

Image
  These days, most of us carry a fully functional multimedia studio around in our smartphones says Austin Kleon . We people  really wanted to engage with our own generation, one that is increasingly speaking in an audio/video multimedia language.  Multimedia is an effective way to communicate and share the ideas with users. W hat is multimedia??.... In what ways are they used ??.. Well, The proper definition of multimedi a is a computerized method of presenting information combining text, audio, video, graphics and animation . As the name suggests it is the combination of multi and media that different types of hardware and software tools  are used for communication of information. Let us see some examples related to multimedia from the bricks to the brains; ·         The text we see in books, newspapers or any means of media ·         The sound we hear when we listen to music ·         The graphics...
Read more

Exploring The Hidden Internet

Image
What is the internet to us? Facebook, Instagram, Twitter, Youtube, Amazon, Flipkart, and many more websites, That's it? Well, no! The most fascinating and shocking fact is that the internet we use each day is just 4%. In this article, we are going to learn about the mysterious side of the internet.  Curious? Let's head on to our topic. Introduction The Internet is a vast network that connects all the computers across the globe which enables people to share information as well. The internet pieces of information are broadly classified into three types : Surface Web Deep Web Dark Web Surface VS Deep VS Dark Web Let's imagine the internet like a glacier. As we know the visible part of the glacier is small but the non-visible parts of the glacier under it are too deep. SURFACE WEB: The surface Web is often compared to the top of the glacier which is small, visible, and can be accessed easily. In other words, the Surface Web is simply the internet we use in our daily life. The s...
Read more

SKINPUT TECHNOLOGY

Image
Touch screens may be popular both in science fiction and real life as the symbol of next-gen technology, but an innovation called Skinput suggests the true interface of the future might be us “Skinput” turns body into touch screen interface. The founders of this great technology  is Microsoft and Carnegie Mellon University. By the way, what do skinput technology mean?....           Skinput is a technology that appropriates human body for acoustic transmission, enabling the skin to be utilized as an input surface.           This technology allows human hand and arm as touch screens, by sensing various low-frequency vibrations and sounds that are generated by touching different part of the hand or arm.           These signals are sensed using various sensors worn on the arm in the form of arm band. "The arm band is a crude prototype, the next generation could be made considerably smaller – likely easi...
Read more