Welcome to my blog !

How to print and debug console and output in Sass with examples

January 27, 2022 ·  2 min read

This tutorial shows How to debug sass code. Sometimes, We want to know the value of a variable during CSS compile generation. It is possible with sass inbuilt commands. How to print sass value to output and console. Let’s see multiple ways to print the sass variable data to console and output. Use sass Inbuilt rules and directives Sass provides the following rules @debug: This function is called when debug message is emitted to the console....

Difference between @import and @use in Sass/scss

January 27, 2022 ·  2 min read

SASS provides @import and @use allows to reuse mixins functions and variables in other modules. @import and @use in Sass @import allows you to import sass and CSS stylesheets into another stylesheet. component.scss $primary-color: blue; @mixin button { background-color:$primary-color; color:white } Let’s import component.scss in style.scss @import "component.scss"; .buttonId{ @include button; } Let’s import component.scss in style.scss use @use @use "component.scss" as component .buttonId{ @include component.button; } Let’s see what is different between these two...

Top 3 Input placeholder style examples in css/html

January 26, 2022 ·  2 min read

It is a short tutorial about input placeholder usage in CSS/HTML with examples. placeholder is a short text displayed in input controls to tell the user about the input control. It acts as a label for the input element. It is introduced in HTML5 You can check my previous available post: Angular Placeholder Example React input placeholder examples CSS provides non-standard pseudo selectors to change the styles of an input element....

How to make pre code block 100% responsive in mobile CSS example

January 26, 2022 ·  3 min read

In this tutorial, You learn how to make pre-code block 100% responsive with CSS. This tutorial solves the following things. pre tag is not responsive in mobile pre tag should be horizontal scrollable Boostrap pre-code block with horizontal scrollable Pre is an HTML tag used to display code snippets or store the formatted text like line the pre tag is a full form or abbreviated as preformatted HTML content...

How to add css styles to input type file upload in html

January 26, 2022 ·  2 min read

In Html forms, the Input type=file button allows us to upload the documents from web pages. The look of the upload button behaves differently in different browsers. Styling this upload button is a tedious task, It covers applying the styles for the upload button in CSS/Javascript. There are other file upload widgets available in Bootstrap, the tutorial only tells about custom CSS styles. In HTML, a File widget can be created using the below snippet of code....

You'll get a notification every time a post gets published here.