SASS Developer, London

Sass CSS/SCSS

Sass Logo

Sass makes use of similar extended CSS to LESS for easier maintenance.

Key points offered include variables, nested selectors, mixins and selector inheritance. You will also notice here that SASS adds in some extra items which you won’t find in LESS, too.

The rise in use of SASS and LESS has led to further plugins for each appearing all over the web, with Compass being one of the best known of those.

For TomGurney.org, we have chosen SASS and Compass over LESS for the timebeing because of the greater uptake of it generally, meaning it is more likely to be supported by a larger community on sites like StackOverflow. There are always issues that arise in development, and it is important to feel that there are resources out there to help you to solve them. It may be the in future we revert back to LESS as things develop, and i certainly appreciate it’s Javascript Evaluation options.

Please see below for the key features of Sass.

Nesting

This use of nesting is similar to LESS, but the example below is just a simple one and much more can be achieved beyond what is shown here.

								
								
								#navbar {
								  width: 80%;
								  height: 23px;
								
								  ul { list-style-type: none; }
								  li {
									float: left;
									a { font-weight: bold; }
								  }
								}

Variables

Change it once, and see that change carried across the site with CSS variables. Ideal for things like branding colours and other global items.

								
								
								$main-color: #ce4dd6;
								$style: solid;
								
								#navbar {
								  border-bottom: {
									color: $main-color;
									style: $style;
								  }
								}
								
								a {
								  color: $main-color;
								  &:hover { border-bottom: $style 1px; }
								}

Mixins

Mixins are great for reducing repetition of code for things like CSS vendor pre-fixes.

								
								
								@mixin rounded-top-left {
									$vert: top;
									$horz: left;
									$radius: 10px;
									
									border-#{$vert}-#{$horz}-radius: $radius;
									-moz-border-radius-#{$vert}#{$horz}: $radius;
									-webkit-border-#{$vert}-#{$horz}-radius: $radius;
								}
								
								#navbar li { @include rounded-top-left; }
								#footer { @include rounded-top-left; }

Further Reading on SASS CSS

Leave a Reply

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