Ampersand Tutorials

Author: Dinesh Kumar R

  • Materialize Card Animation

    —

    by

    Dinesh Kumar R
    in

    Learn Materialize Card Animation and implement in your projects Materialize Card Animation – Introduction: Materialize CSS Framework provides several card layouts which include Simple Card, Card with Image, Card with Action, Horizontal Cards, etc. There are several instances where web developers require card animation. For example, when a mouse hovers on a card, it should…

  • Navbar with Autocomplete Search Box in 3 Easy Steps

    —

    by

    Dinesh Kumar R
    in

    Learn Navbar with AutoComplete Search Box and implement in your web project The navigation bar is one of the important components in the website, which allows the user to navigate the website. Materialize CSS provides several variations, however, there are no variants with the Navigation bar with Search. For several websites, it requires a search…

  • Nested Dropdown in Materialize CSS in Easy 3 steps

    —

    by

    Dinesh Kumar R
    in

    Learn how to create Nested Dropdown in Materialize CSS Nested dropdown is one of the most important elements web developers look for while designing the website. Materialize CSS Framework does not offer nested dropdown in their repository. In this tutorial, you will be learning how to create a nested dropdown menu in Materialize CSS framework. …

  • Extension and Operators in SASS

    —

    by

    Dinesh Kumar R
    in

    Extension and Operators in SASS. Learn and implement Extension and operators in SASS. The extension is a feature in SASS / SCSS through which we can apply styles of one class to another just by calling the @extend in the subsequent class. Here’s the following example in which we have explained the classic use case…

  • Light and Dark Theme using Mixin

    —

    by

    Dinesh Kumar R
    in

    Light and Dark Theme using Mixin and implement in your web projects. It is possible to switch between a dark and light theme using simple SCSS  / SASS without many code lines. We can leverage Mixin to achieve the change in light and dark themes. Following is the code for creating Mixin which can easily…

  • Mixins in SASS

    —

    by

    Dinesh Kumar R
    in

    Learn Mixins in SASS and reutilize style Mixins permit you to characterize styles that can be re-utilized all through your stylesheet. They make it simple to try not to utilize non-semantic classes like .float-left and to disperse assortments of libraries’ styles.  Mixins are characterized utilizing the @mixin at-rule, which is composed @mixin <name> { ……

  • Functions in SASS

    —

    by

    Dinesh Kumar R
    in

    Learn functions in sass. Create functions, call them and level up your SASS Skills. Functions permit you to characterize complex operations on SassScript values that you can reuse all through your stylesheet. They make it simple to extract out standard formulae and practices in a decipherable manner. The function helps in computing calculations and return…

  • Easily implement Partials in SASS in 2021

    —

    by

    Dinesh Kumar R
    in

    Learn Partials in SASS quickly in 5 mins and start implementing in your projects Partial in SASS / SCSS is useful when the project files are enormous. Reusing or maintaining such huge SCSS files is cumbersome. Partial SCSS allows developers to split the variable, resets or page-wise SCSS separately and quickly embed them in the…

  • Nesting in SASS

    —

    by

    Dinesh Kumar R
    in

    Learn Nesting in SASS with easy guide and working examples Nesting in SASS / SCSS is easy with the help of “&” to achieve the nesting. In SASS “&” behaves uniquely and it denotes the current selector.  The selector changes as we nest down.  If we want to define a division with a width of…

  • Variables in SASS

    —

    by

    Dinesh Kumar R
    in

    What are variables in SASS and Learn Variables in SASS Sass variables are basic: you relegate a value to a name that starts with $, and afterwards, you can allude to that name rather than the actual worth. In any case, notwithstanding their straightforwardness, they’re perhaps the most valuable tool Sass brings to the table.…