Create a beating heart icon using font-awesome, JQuery and CSS animations.
css , SASS , Snippets / May 9, 2020

This code snippet helps you in creating a simple beating heart icon using font-awesome, JQuery, and CSS animation The scale() CSS function defines a transformation that resizes an element on the 2D plane. Modify this code to add more effects

   

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…

Sass Part 3 – Operators and control directives
css , SASS , Uncategorized / December 29, 2019

This is the third part of our Sass series aimed at providing insight in o  Sass operators and control directives. Part 1 of the series provided an introduction and taught by example about variables and nesting in Sass.  Part 2 of the series provided a better understanding of @-rules and Directives.   WHAT YOU WILL LEARN Operators and types of operators in Sass. Control directives and types of control directives in Sass. Operators in Sass Expressions are written using operators. There are different types of operators supported by sass and they can be broadly classified into Numeric operators, Relational operators/ Comparison operators, and Boolean operators. Numeric operators: +, – , *,  / ,% are numeric operators. These operators are used to write expressions that perform mathematical operations just like in most programming languages.   +, – and / can be used with values of string data type to perform operations like string concatenation.   +,-,/ are also used as unary operators(operators which require one operand).

TRY IT OUT Relational operators/Comparison operators:    <=, >=, >, <!=, == are  relational operators. These operators are used to write comparison expressions.

  Control Directives Control Directives are directives that are used to create…

Sass part 4 – Built in modules and functions. Writing custom functions with @function and @return
css , SASS , Uncategorized / January 15, 2020

This is the fourth part of our Sass series. This part covers built-in modules, functions, and modularization in Sass. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass       WHAT YOU WILL LEARN Sass modularization, built-in modules, and functions in Sass. Writing custom functions in Sass.   Sass modularization Sass moved built-in functions into separate built-in modules in its Dart version DartSass. The C++ version of the preprocessor LibSass and the Ruby version of the preprocessor RubySass do not have this modification. Sass introduces @use and @forward which can be used to create custom modules. @forward makes mixins, variables, and functions in your Sass module available in other Sass sheets.  The modules with these forwarded variables, mixins, and functions, are loaded to Sass sheets using @use. The built-in modules have functions and mixins which can be used to work on data types and selectors. Functions to observe the internal operations of Sass are also combined into a module. Functions can be classified into three types.  Functions to work with values of different data types, selector functions, and introspection functions….

Sass Part 5 – Understanding mixins, creating mixins in Sass using @mixin
css , SASS , Uncategorized / January 26, 2020

This is the fifth part of our Sass series. This part covers the concept of mixins, creating mixins in Sass using @mixins. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass Part 4     – Built-in modules and functions. Writing custom functions with @function and @return     WHAT YOU WILL LEARN Concept of mixins mixins in Sass Mixins with arguments Mixins with content block   Mixins Mixins are a programming language concept by which a class is created to inject code into other classes. Units of functionality are combined together to form a mixin and this mixin can be used by other different classes. Methods of the Mixin class can be used by multiple classes and these classes need not be a child class of the Mixin. Mixins make the code clean and more maintainable.   Mixins in Sass Mixins in Sass are used to create styles that are to be reused throughout the stylesheet. Mixins improve code reusability.mixin are created using @mixin directives. @mixin Directive: Used to create Mixins.

The mixins are included in code using @include directives @include Directive: used to include…

Sass Part 6 – Sass with Node.js based applications, Sass output styles
css , SASS , Uncategorized / January 30, 2020

This part of the Sass series aims at helping to set up Sass in Node.js projects. Sass preprocessor used with Node.js is the one written in c++ called libSass. node-sass is the library which binds Node.js applications to LibSass preprocessor. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass Part 4     – Built-in modules and functions. Writing custom functions with @function and @return Part 5     – Understanding mixins, creating mixins in Sass using @mixin   WHAT YOU WILL LEARN Setting up Sass in Node.js applications. The four output styles of Sass.   Sass with Node.js applications and Sass output styles Create a project with npm init. Install node-sass using the command

Now create an SCSS file, test.scss with the following syntax.

Now, there are four output styles in Sass. compressed nested compact expanded Output styles determine the style of generated CSS. –output-style provides the option for providing output style.      Now run the command

This command will generate a CSS file test.css, with a compressed style.

 

–output-style nested will generate a CSS file test.css with style like…

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