sass vs less vs stylus vs css mesameergaikwad

 

sass vs less vs stylus vs CSS

SASS

1	$siteWidth: 1024px;
2	$gutterWidth: 20px;
3	$sidebarWidth: 300px;
4
5	body {
6	margin: 0 auto;
7	width: $siteWidth;
8	}
9	.content {
10	float: left;
11	width: $siteWidth - ($sidebarWidth+$gutterWidth);
12	}
13	.sidebar {
14	float: left;
15	margin-left: $gutterWidth;
16	width: $sidebarWidth;
17	}

LESS

1	@siteWidth: 1024px;
2	@gutterWidth: 20px;
3	@sidebarWidth: 300px;
4
5	body {
6	margin: 0 auto;
7	width: @siteWidth;
8	}
9	.content {
10	float: left;
11	width: @siteWidth - (@sidebarWidth+@gutterWidth);
12	}
13	.sidebar {
14	float: left;
15	margin-left: @gutterWidth;
16	width: @sidebarWidth;
17	}

Stylus

1	siteWidth = 1024px;
2	gutterWidth = 20px;
3	sidebarWidth = 300px;
4
5	body {
6	margin: 0 auto;
7	width: siteWidth;
8	}
9	.content {
10	float: left;
11	width: siteWidth - (sidebarWidth+gutterWidth);
12	}
13	.sidebar {
14	float: left;
15	margin-left: gutterWidth;
16	width: sidebarWidth;
17	}

Compiled CSS

1	body {
2	margin: 0 auto;
3	width: 1024px;
4	}
5	.content {
6	float: left;
7	width: 704px;
8	}
9	.sidebar {
10	float: left;
11	margin-left: 20px;
12	width: 300px;
13	}