Sass Part 1 – An introduction, Sass variables and Nesting rules and properties in Sass
css , SASS , Uncategorized / December 15, 2019

Hey, folks! Welcome to the  Sass series. The aim of this series is to give a general idea of what Sass is, why it is beneficial and what are the key properties of Sass which makes it beneficial. Becoming an expert is in Sass can be achieved through rigorous practice and hands-on experience in real projects. This series will give you guys a platform to start with. WHAT YOU WILL LEARN Sass is a CSS preprocessor Sass has two syntaxes Sass syntax allows variables, mixins, nesting rules and properties, function Variables declared using $ , 7 data types are supported,and scope of variable. Interpolation for selector or property names using {} Parent selector using & and nesting     Sass or syntactically awesome stylesheet Sass is a CSS preprocessor that will generate CSS files for your project. “A CSS preprocessor is a program that will generate CSS  from a syntax supported by it.” Sass generates CSS files from .sass or .scss files that have their own syntax. Sass allows using features like variables,functions, mixins, etc that CSS files do not allow(CSS now supports variables but the usage is a bit different and browser support is limited).   SASS is originally written in Ruby. A…

Sass Part 2 – @-Rules and Directives
css , SASS , Uncategorized / December 25, 2019

This is the second part of our Sass series, aimed at providing a better understanding of  Sass  @-rules and Directives. Part 1 of the series provided an introduction and taught by example about variables and nesting in Sass.   WHAT YOU WILL LEARN @-rules and Directives 11 Directives @-rules of CSS  CSS provides statements called @rules which are rule statements preceded by an @symbol. Most commonly used @rules are @media,@keyframes,@import, etc Sass extends some of these  @rules and provides other directives as well. “A directive is something that introduces new syntax. Sass directives help in writing CSS in an easy and better way” There are 7 @rules and directives you can use in Sass. They are as follows @import @media @extend @debug @warn @error @at-root @forward @use @mixin and @function       @-Rules and Directives @import directives – @import directive is used to import Sass files (SCSS/SASS) into one another. Using the @import directive while properly modularizing the application can improve code reusability and avoid repeats. Consider two scss files _sectionone.scss _sectiontwo.scss These have styles for two sections and these scss files are called partials.  _ is what sass uses to identify a partial file. These partial files can…

first-child and nth-child selectors : Styling multiple Elements with same class – CSS
css , Beginner , Uncategorized / July 7, 2018

first-child  – This selector selects first child of its parent. To color first one of elements with the same class,we use first-child selector.Consider below example with multiple divs(.box)  inside parent div(.container).To change the style of first div

  nth-child – This selector selects nth child of its parent. We can achieve the above result using nth-child selector .The number in the bracket indicates the order of the child


Share this page in social media platforms
Download Formatting took