sass vs less vs stylus vs CSS
SAMEER GAIKWADSASS
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 | } |
SAMEER GAIKWAD :- https://www.linkedin.com/in/mesameergaikwad/
mesameergaikwad It's a blog that provides free source code ( using jQuery, HTML, CSS, SVG, JavaScript ) for our Projects. freely download source code of projects.
Subscribe to my newsletter
Read articles from SAMEER GAIKWAD directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
SAMEER GAIKWAD
SAMEER GAIKWAD
ASP.NET • MVC • JavaScript • jQuery • AJAX • Responsive Design • C# • Web API • SVN • Postman • Swagger • MS SQL • HTML • HTML5 • CSS • CSS3 • Angular • SASS • LESS • Bootstrap • Tailwind • Angular Material • FlexBox • webpack • middleware • Jenkins • Webpack • Webpack • NodeJS • ExpressJS •