>
Sass (stylesheet language)
Welcome, Guest

by Rishi on Friday, 01 April 2011
Sass (stylesheet language)


Sass - Syntactically Awesome  Style sheets

 

What is Sass

Sass (Syntactically Awesome Stylesheets) is a stylesheet language initially designed by Hampton Catlin and developed by Nathan Weizenbaum [1]. After its initial versions, Nathan Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.

Sass is a Cascading Style Sheets (CSS) metalanguage. It is a scripting language that is interpreted into CSS. SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax" uses an syntax similar to Haml. [2] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" uses block formatting like that of CSS. It uses curly brackets to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively.

CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.[3] Sass is simply syntactic sugar for CSS.

Sass is open-source and coded in Ruby. The indented syntax is a metalangauge. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics. Sass supports integration with the Firefox extension Firebug. [4]

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.[2]

 

Variables

Sass allows variables to be defined. Variables begin with a dollar sign ($). Variables used to start with an exclamation mark (!), but this is deprecated. Variable assignment is done with a colon (:). Assignment used to be done with an equals sign (=), but this is deprecated.[4]

SassScript supports four data types:[4]

Variables can be arguments to or results from one of several available functions.[5] During translation, the values of the variables are inserted into the output CSS document.[2]

Variables can be arguments to or results from one of several available functions.[5] During translation, the values of the variables are inserted into the output CSS document.[2]

 

$blue: #3bbfce; 
$margin: 16px;  
.content-navigation {   
	border-color: $blue;   
	color:     darken($blue, 9%);
 }  
.border {   
	padding: $margin / 2;   
	margin: $margin / 2;  
	border-color: $blue;
 } 
Would compile to:
.content-navigation {   border-color: #3bbfce;   color: #2b9eab; }  
.border {   padding: 8px;   margin: 8px;   border-color: #3bbfce; } 


Nesting

CSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.[2]

table.hl {   
	margin: 2em 0;   
	td.ln {     text-align: right;   } }  
li {   font: {    
	 family: serif;    
	 weight: bold;     
	size: 1.2em;   } 
     } 

Would compile to:

table.hl {   margin: 2em 0; } 
table.hl td.ln {   text-align: right; }  l
i {   
	font-family: serif;   
	font-weight: bold;   
	font-size: 1.2em; 
} 

More complicated types of nesting including namespace nesting an parent references are discussed in the Sass documentation.[4]

 

Mixins

CSS3 does not support mixins. Any repeated code must be repeated in each location. A mixin is a section of code that contains any valid Sass code. Whenever a mixin is called, the result of translating the mixin is inserted at the calling location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.[2]

@mixin table-base {   
	th {  text-align: center;     font-weight: bold;   }  
	 td, th {padding: 2px} 
}  
#data {   @include table-base; } 

Would compile to:

#data th {   text-align: center;   font-weight: bold; }
#data td, #data th {   padding: 2px; } 

 

Arguments

Mixins also support arguments.

@mixin left($dist) {   float: left;   margin-left: $dist; } 
 #data {   @include left(10px); } 

Would compile to:

#data {   float: left;   margin-left: 10px; } 

 

In combination

@mixin table-base {   
   th { 
	text-align: center;     
	font-weight: bold;   
   }  
   td, th {padding: 2px}
 }  
@mixin left($dist) {   float: left;   margin-left: $dist; } 
 #data {   @include left(10px);   @include table-base; } 

Would compile to:

#data {   float: left;   margin-left: 10px; } 
#data th {   text-align: center;   font-weight: bold; }
 #data td, #data th {   padding: 2px; }  

Selector Inheritance

While CSS3 supports the Document Object Model (DOM) hierarchy, it does not allow selector inheritance. Inheritance is done by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector's attributes are applied to the calling selector.[2]

.error {   border: 1px #f00;   background: #fdd; }
 .error.intrusion {   font-size: 1.3em;   font-weight: bold; }  
.badError {   @extend .error;   border-width: 3px; } 

Would compile to:


.error, .badError {   border: 1px #f00;   background: #fdd; } 
 .error.intrusion, .badError.intrusion {   
	font-size: 1.3em;   
	font-weight: bold; 
} 
 .badError {   border-width: 3px; }

 

 

Sass supports multiple inheritance.[4]

 



Blogger Image
My Blog Title

Product Engineering, software engineering company, Product Development, Product Migration, Product Re-engineering, Product Maintenance, Product Testing Commercial Application Development, Business Software development, commercial software for startups, Application Support and Maintenance, software testing Product Maintenance, Outsource product maintenance, product support and maintenance Product Migration, Product Re-engineering, product re-engineering services Product Research, Product Engineering, UI Prototyping Services Software Testing Services, Quality Assurance services, professional software testers, Load Testing, Functional Testing, Cross Platform, Browser Testing, Test Automation, Testing Tools, software quality analysis Functional Testing Services, software quality analysis, Software Testing Services, Application Testing Services, Functional Testing Types Automated Testing, Automated Testing Services, automation testing, test script development, Automation Test Tools, outsource automation testing Load Testing, Performance Testing Services, Load Testing Tools Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Benefits of IT Outsourcing, Offshore Software Development companies, offshore software development firms Outsource planning, IT outsourcing, IT development services, offshore IT companies, offshore software development Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering