• Latest
  • Trending
SASS in 5 minutes

SASS in 5 minutes: All in one

April 29, 2021
Chia network - chia coin (Credit : todayuknews)

Chia Coin will be the Next Bitcoin? All About Chia Project

May 5, 2021
Quokka JS Scratchpad

Quokka.js virtual JavaScript scratchpad: No more CLIs

March 22, 2021
What is Gulp JS? For Beginners

What is Gulp JS? For Beginners

March 22, 2021
Top Gaming Sites To Improve Your Coding Skills

Top Gaming Sites To Improve Your Coding Skills

March 22, 2021
The Purposes of Frontend Frameworks

The Purposes of Frontend Frameworks

March 22, 2021
css to sass

Why We Should Move from CSS to SASS? Beginners

March 22, 2021
Best Web UI Trends in 2021: You should follow

7 Best UI Trends You Should Follow in 2021

March 22, 2021
Should You Learn Bootstrap in 2021

Should You Learn Bootstrap in 2021?

March 22, 2021
SASS Best - 5 reasons

Why You should move to SASS? 5 Reasons

March 22, 2021
Should not Become a Full-Stack Developer

Why You Shouldn’t Become a Full-Stack Developer as a Beginner?

March 22, 2021
Web Development Course at Harvard University

Free Web Development Course at Harvard University: Apply Now

March 22, 2021
The Fundamental Concepts of React library

The Fundamental Concepts of React library

March 22, 2021
HOT
Web & Tech News
No Result
View All Result
Web & Tech News
No Result
View All Result
Advertisement Banner
Home CSS Sass/SCSS

SASS in 5 minutes: All in one

Chathura Jayasanka by Chathura Jayasanka
April 29, 2021
in Sass/SCSS
5 min read
481 31
0
SASS in 5 minutes

SASS in 5 minutes

704
SHARES
Share on FacebookShare on Twitter

syntactically awesome stylesheets or SASS is a language that can extend your CSS with superpowers.

modern UIs are extremely complex and if you attempt to build one with plain CSS you’ll find yourself repeating yourself often.

SASS comes to the rescue by providing a compiler that allows us to write style sheets in a completely different language.

Two different languages to be exact the original indented syntax that you find in .sass files remove the syntactic salt of semicolons and curly braces(; {}).

.sass File Example

nav
	ul
		margin:0
		padding:0
		list-style: none

	li
		display: inline-block

	a
		display:block
		padding:6px 10px
		text-decoration: none

but the more popular version is the superset syntax that you find in SCSS files.

you can write regular CSS then extend it with additional bonus features as needed

.scss file Example

nav{

	ul{
		margin:0
		padding:0
		list-style: none
		}
	li {
		display: inline-block
	}

	a{
		display:block
		padding:6px 10px
		text-decoration: none
	}
	

SASS has been around for nearly 15 years and one of its original killer features was variables.

use a dollar sign to name a variable then reference it somewhere else in your code.

now if that value ever changes you only have to update one line of code.

$red: #FF0000 (0, 100%, 50%);

	.button.danger{
		color: $red;
		border: 1px solid $red;
	}

killer feature number two is nesting in many cases.

classes are used as name spaces which means they’re often duplicated over and over again

.button a {
		font-weight: bold;
	}

	.button.danger{
		color:red;
	}

	.button.warning{
		color:yellow;
	}

we can avoid this duplication by nesting styles inside the parent.

SASS FILE

.button{
	.success{
		color:red;
	}
}

Converted CSS FILE

.button .success {
		color:red;
	}

bydefault these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand.

which itself is a tool that tells sas to combine the parent selector with the nested child selector.

SASS FILE

	.btn{
		&:focus{};
		&:hover{};
		&:active{};
	}

Converted CSS FILE

.btn:focus{}
	.btn:hover{}
	.btn:active{}

READ MORE : Why We Should Move from CSS to SASS? Beginners

Other issue with css is that you’ll often find yourself including a similar group of styles on multiple classes.

Mixins allow you to encapsulate a group of styles then apply those styles anywhere in your code using the include keyword.

@mixin flex-column{
	display: flex;
	flex-direction: column;
	background: red;
}

.card{
	@include flex-column;
}

.aside{
	@include flex-column;
}

mixins can also take arguments to create a large number of similar classes.

@mixin new-button ($color, $bg){
	display: flex;
	color:$color;
	background:$bg;
}

.btn-orange{
	@include new-button(black,red);
}

programmatically like a bunch of different colored buttons for example.

in addition SASS provides a whole suite of tools to help you write more programmatic code use if or else in a mixin for conditional logic.

@mixin theme-colors($theme){
	@if $theme == 'light' {
		background-color: $light-bg;
	} @else {
		background-color: $dark-bg;
	}
}

or create an array of values with a variable then loop overthem with each.

$sizes: 40px, 50px, 80px;

@each $size in $sizes{
	.icon-#{$size}{
		font-size:$size;
	}
}

You might even extract all this logic into a reusable function or sas might already have a built-in function for you ready to go.

@function sum($numbers){
	$sum:0;

	@each $number in $number {
		$sum: $sum + $number;
	}

	@return $sum;
}

if you need to adjust a color you can use the lighten or darken functions to adjust a color by a predictable value.

$base-color: red;

.card {
	background: lighten($base-color, 25%);
	color: darken($base-color, 25%);
}

The compiler will take your code and convert it into valid CSS that can run in the browser.

Tags: SASS
Advertisement Banner
Chathura Jayasanka

Chathura Jayasanka

Experienced UI/UX Engineer & Tech enthusiast.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Trending

Chia network - chia coin (Credit : todayuknews)
Tech

Chia Coin will be the Next Bitcoin? All About Chia Project

2 years ago
Quokka JS Scratchpad
JavaScript

Quokka.js virtual JavaScript scratchpad: No more CLIs

2 years ago
What is Gulp JS? For Beginners
JavaScript

What is Gulp JS? For Beginners

2 years ago
Top Gaming Sites To Improve Your Coding Skills
JavaScript

Top Gaming Sites To Improve Your Coding Skills

2 years ago
The Purposes of Frontend Frameworks
Angular

The Purposes of Frontend Frameworks

2 years ago
Web & Tech News

We bring you Web Development Technologies & Tech News.

Follow Us

Recent News

Chia network - chia coin (Credit : todayuknews)

Chia Coin will be the Next Bitcoin? All About Chia Project

May 5, 2021
Quokka JS Scratchpad

Quokka.js virtual JavaScript scratchpad: No more CLIs

March 22, 2021

Categories

  • Angular
  • Bootstrap
  • Component Libraries
  • CSS
  • GIT
  • JavaScript
  • Learn
  • React
  • Sass/SCSS
  • Tech
  • Vue

Tags

AngularJS bitcoin Bootstrap cloud Courses cryptocurrency css Data Devops flutter frontend GIT Gulp JS html javascript Javascript frameworks Programming Quokkajs React SASS sementicui tailwind UI/UX VueJs Web
  • About
  • Terms & Conditions
  • Privacy Policy
  • Contact Us

© 2020 Frontendz - Web & Tech News

No Result
View All Result
  • Home
  • Learn
  • JavaScript
  • About
  • Contact Us

© 2020 Frontendz - Web & Tech News

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In