File:SASS_REFERENCESassDocumentation

Sass(SyntacticallyAwesomeStyleSheets)
SassisanextensionofCSSthataddspowerandelegancetothebasiclanguage.Itallowsyoutousevariables,
nestedrules,mixins,inlineimports,andmore,allwithafullyCSScompatiblesyntax.Sasshelpskeeplarge
stylesheetswellorganized,andgetsmallstylesheetsupandrunningquickly,particularlywiththehelpofthe
Compassstylelibrary.

Features
FullyCSScompatible
Languageextensionssuchasvariables,nesting,andmixins
Manyusefulfunctionsformanipulatingcolorsandothervalues
Advancedfeatureslikecontroldirectivesforlibraries
Wellformatted,customizableoutput

Syntax
TherearetwosyntaxesavailableforSass.Thefirst,knownasSCSS(SassyCSS)andusedthroughoutthis
reference,isanextensionofthesyntaxofCSS.ThismeansthateveryvalidCSSstylesheetisavalidSCSSfile
withthesamemeaning.Inaddition,SCSSunderstandsmostCSShacksandvendorspecificsyntax,suchas
IEsoldfiltersyntax.ThissyntaxisenhancedwiththeSassfeaturesdescribedbelow.Filesusingthissyntax
havethe.scssextension.
Thesecondandoldersyntax,knownastheindentedsyntax(orsometimesjustSass),providesamore
concisewayofwritingCSS.Itusesindentationratherthanbracketstoindicatenestingofselectors,and
newlinesratherthansemicolonstoseparateproperties.Somepeoplefindthistobeeasiertoreadandquicker
towritethanSCSS.Theindentedsyntaxhasallthesamefeatures,althoughsomeofthemhaveslightly
differentsyntaxthisisdescribedintheindentedsyntaxreference.Filesusingthissyntaxhavethe.sass
extension.
Eithersyntaxcanimportfileswrittenintheother.Filescanbeautomaticallyconvertedfromonesyntaxtothe
otherusingthesassconvertcommandlinetool:
#ConvertSasstoSCSS
$sassconvertstyle.sassstyle.scss
#ConvertSCSStoSass
$sassconvertstyle.scssstyle.sass
NotethatthiscommanddoesnotgenerateCSSfiles.Forthat,usethesasscommanddescribedelsewhere.

UsingSass

Sasscanbeusedinthreeways:asacommandlinetool,asastandaloneRubymodule,andasapluginforany
Rackenabledframework,includingRubyonRailsandMerb.ThefirststepforalloftheseistoinstalltheSass
gem:
geminstallsass
IfyoureusingWindows,youmayneedtoinstallRubyfirst.
TorunSassfromthecommandline,justuse
sassinput.scssoutput.css
YoucanalsotellSasstowatchthefileandupdatetheCSSeverytimetheSassfilechanges:
sasswatchinput.scss:output.css
IfyouhaveadirectorywithmanySassfiles,youcanalsotellSasstowatchtheentiredirectory:
sasswatchapp/sass:public/stylesheets
Usesasshelpforfulldocumentation.
UsingSassinRubycodeisverysimple.AfterinstallingtheSassgem,youcanuseitbyrunning require
"sass"andusingSass::Enginelikeso:
engine=Sass::Engine.new("#main{backgroundcolor:#0000ff}",:syntax=>:scss)
engine.render#=>"#main{backgroundcolor:#0000ff;}\n"

Rack/Rails/MerbPlugin
ToenableSassinRailsversionsbeforeRails3,addthefollowinglinetoenvironment.rb:
config.gem"sass"
ForRails3,insteadaddthefollowinglinetotheGemfile:
gem"sass"
ToenableSassinMerb,addthefollowinglinetoconfig/dependencies.rb:
dependency"merbhaml"
ToenableSassinaRackapplication,addthefollowinglinestoconfig.ru.
require'sass/plugin/rack'
useSass::Plugin::Rack

Sassstylesheetsdontworkthesameasviews.Theydontcontaindynamiccontent,sotheCSSonlyneedsto
begeneratedwhentheSassfilehasbeenupdated.Bydefault,.sassand.scssfilesareplacedin
public/stylesheets/sass(thiscanbecustomizedwiththe:template_locationoption).Then,whenever
necessary,theyrecompiledintocorrespondingCSSfilesinpublic/stylesheets.Forinstance,
public/stylesheets/sass/main.scsswouldbecompiledtopublic/stylesheets/main.css.

Caching
Bydefault,Sasscachescompiledtemplatesandpartials.Thisdramaticallyspeedsuprecompilationoflarge
collectionsofSassfiles,andworksbestiftheSasstemplatesaresplitupintoseparatefilesthatareall
@importedintoonelargefile.
Withoutaframework,Sassputsthecachedtemplatesinthe.sasscachedirectory.InRailsandMerb,theygo
intmp/sasscache.Thedirectorycanbecustomizedwiththe:cache_locationoption.IfyoudontwantSass
tousecachingatall,setthe:cacheoptiontofalse.

Options
OptionscanbesetbysettingtheSass::Plugin#optionshashinenvironment.rbinRailsorconfig.ruin
Rack
Sass::Plugin.options[:style]=:compact
orbysettingtheMerb::Plugin.config[:sass]hashininit.rbinMerb
Merb::Plugin.config[:sass][:style]=:compact
orbypassinganoptionshashtoSass::Engine#initialize.Allrelevantoptionsarealsoavailableviaflagstothe
sassandscsscommandlineexecutables.Availableoptionsare:
:style
SetsthestyleoftheCSSoutput.SeeOutputStyle.
:syntax
Thesyntaxoftheinputfile,:sassfortheindentedsyntaxand:scssfortheCSSextensionsyntax.Thisisonly
usefulwhenyoureconstructingSass::Engineinstancesyourselfitsautomaticallysetproperlywhenusing
Sass::Plugin.Defaultsto:sass.
:property_syntax
Forcesindentedsyntaxdocumentstouseonesyntaxforproperties.Ifthecorrectsyntaxisntused,anerroris
thrown.:newforcestheuseofacolonafterthepropertyname.Forexample:color:#0f3orwidth:
$main_width.:oldforcestheuseofacolonbeforethepropertyname.Forexample::color#0f3or:width
$main_width.Bydefault,eithersyntaxisvalid.ThishasnoeffectonSCSSdocuments.
:cache
WhetherparsedSassfilesshouldbecached,allowinggreaterspeed.Defaultstotrue.

:read_cache
Ifthisissetand:cacheisnot,onlyreadtheSasscacheifitexists,dontwritetoitifitdoesnt.
:cache_store
IfthisissettoaninstanceofasubclassofSass::CacheStores::Base,thatcachestorewillbeusedtostoreand
retrievecachedcompilationresults.DefaultstoaSass::CacheStores::Filesystemthatisinitializedusingthe
:cache_locationoption.
:never_update
WhethertheCSSfilesshouldneverbeupdated,evenifthetemplatefilechanges.Settingthistotruemaygive
smallperformancegains.Italwaysdefaultstofalse.OnlyhasmeaningwithinRack,RubyonRails,orMerb.
:always_update
WhethertheCSSfilesshouldbeupdatedeverytimeacontrollerisaccessed,asopposedtoonlywhenthe
templatehasbeenmodified.Defaultstofalse.OnlyhasmeaningwithinRack,RubyonRails,orMerb.
:always_check
WhetheraSasstemplateshouldbecheckedforupdateseverytimeacontrollerisaccessed,asopposedtoonly
whentheserverstarts.IfaSasstemplatehasbeenupdated,itwillberecompiledandwilloverwritethe
correspondingCSSfile.Defaultstofalseinproductionmode,trueotherwise.OnlyhasmeaningwithinRack,
RubyonRails,orMerb.
:poll
Whentrue,alwaysusethepollingbackendforSass::Plugin::Compiler#watchratherthanthenativefilesystem
backend.
:full_exception
WhetheranerrorintheSasscodeshouldcauseSasstoprovideadetaileddescriptionwithinthegenerated
CSSfile.Ifsettotrue,theerrorwillbedisplayedalongwithalinenumberandsourcesnippetbothasa
commentintheCSSfileandatthetopofthepage(insupportedbrowsers).Otherwise,anexceptionwillbe
raisedintheRubycode.Defaultstofalseinproductionmode,trueotherwise.
:template_location
Apathtotherootsasstemplatedirectoryforyourapplication.Ifahash,:css_locationisignoredandthis
optiondesignatesamappingbetweeninputandoutputdirectories.Mayalsobegivenalistof2elementlists,
insteadofahash.Defaultstocss_location+"/sass".OnlyhasmeaningwithinRack,RubyonRails,or
Merb.Notethatifmultipletemplatelocationsarespecified,allofthemareplacedintheimportpath,allowing
youtoimportbetweenthem.Notethatduetothemanypossibleformatsitcantake,thisoptionshould
onlybesetdirectly,notaccessedormodified.UsetheSass::Plugin#template_location_array,
Sass::Plugin#add_template_location,andSass::Plugin#remove_template_locationmethodsinstead.
:css_location
ThepathwhereCSSoutputshouldbewrittento.Thisoptionisignoredwhen:template_locationisaHash.
Defaultsto"./public/stylesheets".OnlyhasmeaningwithinRack,RubyonRails,orMerb.
:cache_location
Thepathwherethecachedsasscfilesshouldbewrittento.Defaultsto"./tmp/sasscache"inRailsand
Merb,or"./.sasscache"otherwise.Ifthe:cache_storeoptionisset,thisisignored.

:unix_newlines
Iftrue,useUnixstylenewlineswhenwritingfiles.OnlyhasmeaningonWindows,andonlywhenSassiswriting
thefiles(inRack,Rails,orMerb,whenusingSass::Plugindirectly,orwhenusingthecommandlineexecutable).
:filename
Thefilenameofthefilebeingrendered.Thisisusedsolelyforreportingerrors,andisautomaticallysetwhen
usingRack,Rails,orMerb.
:line
ThenumberofthefirstlineoftheSasstemplate.Usedforreportinglinenumbersforerrors.Thisisusefultoset
iftheSasstemplateisembeddedinaRubyfile.
:load_paths
AnarrayoffilesystempathsorimporterswhichshouldbesearchedforSasstemplatesimportedwiththe
@importdirective.Thesemaybestrings,Pathnameobjects,orsubclassesofSass::Importers::Base.This
defaultstotheworkingdirectoryand,inRack,Rails,orMerb,whatever:template_locationis.Theloadpath
isalsoinformedbySass.load_pathsandtheSASS_PATHenvironmentvariable.
:filesystem_importer
ASass::Importers::Basesubclassusedtohandleplainstringloadpaths.Thisshouldimportfilesfromthe
filesystem.ItshouldbeaClassobjectinheritingfromSass::Importers::Basewithaconstructorthattakesa
singlestringargument(theloadpath).DefaultstoSass::Importers::Filesystem.
:sourcemap
Controlshowsourcemapsaregenerated.ThesesourcemapstellthebrowserhowtofindtheSassstylesthat
causedeachCSSstyletobegenerated.Thishasthreevalidvalues::autousesrelativeURIswherepossible,
assumingthatthatthesourcestylesheetswillbemadeavailableonwhateverserveryoureusing,andthattheir
relativelocationwillbethesameasitisonthelocalfilesystem.IfarelativeURIisunavailable,afile:URIis
usedinstead.:filealwaysusesfile:URIs,whichwillworklocallybutcantbedeployedtoaremoteserver.
:inlineincludesthefullsourcetextinthesourcemap,whichismaximallyportablebutcancreateverylarge
sourcemapfiles.Finally,:nonecausesnosourcemapstobegeneratedatall.
:line_numbers
Whensettotrue,causesthelinenumberandfilewhereaselectorisdefinedtobeemittedintothecompiled
CSSasacomment.Usefulfordebugging,especiallywhenusingimportsandmixins.Thisoptionmayalsobe
called:line_comments.Automaticallydisabledwhenusingthe :compressedoutputstyleorthe
:debug_info/:trace_selectorsoptions.
:trace_selectors
Whensettotrue,emitafulltraceofimportsandmixinsbeforeeachselector.Thiscanbehelpfulforinbrowser
debuggingofstylesheetimportsandmixinincludes.Thisoptionsupersedesthe:line_commentsoptionandis
supersededbythe:debug_infooption.Automaticallydisabledwhenusingthe :compressedoutputstyle.
:debug_info
Whensettotrue,causesthelinenumberandfilewhereaselectorisdefinedtobeemittedintothecompiled
CSSinaformatthatcanbeunderstoodbythebrowser.UsefulinconjunctionwiththeFireSassFirebug
extensionfordisplayingtheSassfilenameandlinenumber.Automaticallydisabledwhenusingthe
:compressedoutputstyle.

:custom
AnoptionthatsavailableforindividualapplicationstosettomakedataavailabletocustomSassfunctions.
:quiet
Whensettotrue,causeswarningstobedisabled.

SyntaxSelection
TheSasscommandlinetoolwillusethefileextensiontodeterminewhichsyntaxyouareusing,buttheresnot
alwaysafilename.Thesasscommandlineprogramdefaultstotheindentedsyntaxbutyoucanpassthe
scssoptiontoitiftheinputshouldbeinterpretedasSCSSsyntax.Alternatively,youcanusethe scss
commandlineprogramwhichisexactlylikethesassprogrambutitdefaultstoassumingthesyntaxisSCSS.

Encodings
WhenrunningonRuby1.9andlater,Sassisawareofthecharacterencodingofdocuments.Sassfollowsthe
CSSspectodeterminetheencodingofastylesheet,andfallsbacktotheRubystringencoding.Thismeansthat
itfirstcheckstheUnicodebyteordermark,thenthe@charsetdeclaration,thentheRubystringencoding.If
noneoftheseareset,itwillassumethedocumentisinUTF8.
Toexplicitlyspecifytheencodingofyourstylesheet,usea@charsetdeclarationjustlikeinCSS.Add @charset
"encodingname";atthebeginningofthestylesheet(beforeanywhitespaceorcomments)andSasswill
interpretitasthegivenencoding.Notethatwhateverencodingyouuse,itmustbeconvertibletoUnicode.
SasswillalwaysencodeitsoutputasUTF8.Itwillincludea@charsetdeclarationifandonlyiftheoutputfile
containsnonASCIIcharacters.Incompressedmode,aUTF8byteordermarkisusedinplaceofa@charset
declaration.

CSSExtensions
NestedRules
SassallowsCSSrulestobenestedwithinoneanother.Theinnerrulethenonlyapplieswithintheouterrules
selector.Forexample:
#mainp{
color:#00ff00;
width:97%;
.redbox{
backgroundcolor:#ff0000;
color:#000000;
}
}
iscompiledto:
#mainp{

color:#00ff00;
width:97%;}
#mainp.redbox{
backgroundcolor:#ff0000;
color:#000000;}
Thishelpsavoidrepetitionofparentselectors,andmakescomplexCSSlayoutswithlotsofnestedselectors
muchsimpler.Forexample:
#main{
width:97%;
p,div{
fontsize:2em;
a{fontweight:bold;}
}
pre{fontsize:3em;}
}
iscompiledto:
#main{
width:97%;}
#mainp,#maindiv{
fontsize:2em;}
#mainpa,#maindiva{
fontweight:bold;}
#mainpre{
fontsize:3em;}

ReferencingParentSelectors:&
Sometimesitsusefultouseanestedrulesparentselectorinotherwaysthanthedefault.Forinstance,you
mightwanttohavespecialstylesforwhenthatselectorishoveredoverorforwhenthebodyelementhasa
certainclass.Inthesecases,youcanexplicitlyspecifywheretheparentselectorshouldbeinsertedusingthe&
character.Forexample:
a{
fontweight:bold;
textdecoration:none;
&:hover{textdecoration:underline;}
body.firefox&{fontweight:normal;}
}
iscompiledto:

a{
fontweight:bold;
textdecoration:none;}
a:hover{
textdecoration:underline;}
body.firefoxa{
fontweight:normal;}
&willbereplacedwiththeparentselectorasitappearsintheCSS.Thismeansthatifyouhaveadeeplynested
rule,theparentselectorwillbefullyresolvedbeforethe&isreplaced.Forexample:
#main{
color:black;
a{
fontweight:bold;
&:hover{color:red;}
}
}
iscompiledto:
#main{
color:black;}
#maina{
fontweight:bold;}
#maina:hover{
color:red;}
&mustappearatthebeginningofacompoundselector,butitcanbefollowedbyasuffixthatwillbeaddedto
theparentselector.Forexample:
#main{
color:black;
&sidebar{border:1pxsolid;}
}
iscompiledto:
#main{
color:black;}
#mainsidebar{
border:1pxsolid;}
Iftheparentselectorcanthaveasuffixapplied,Sasswillthrowanerror.

NestedProperties

CSShasquiteafewpropertiesthatareinnamespacesforinstance,fontfamily,fontsize,andfont
weightareallinthefontnamespace.InCSS,ifyouwanttosetabunchofpropertiesinthesamenamespace,
youhavetotypeitouteachtime.Sassprovidesashortcutforthis:justwritethenamespaceonce,thennest
eachofthesubpropertieswithinit.Forexample:
.funky{
font:{
family:fantasy;
size:30em;
weight:bold;
}
}
iscompiledto:
.funky{
fontfamily:fantasy;
fontsize:30em;
fontweight:bold;}
Thepropertynamespaceitselfcanalsohaveavalue.Forexample:
.funky{
font:20px/24pxfantasy{
weight:bold;
}
}
iscompiledto:
.funky{
font:20px/24pxfantasy;
fontweight:bold;
}

PlaceholderSelectors:%foo
Sasssupportsaspecialtypeofselectorcalledaplaceholderselector.Theselooklikeclassandidselectors,
exceptthe#or.isreplacedby%.Theyremeanttobeusedwiththe@extenddirectiveformoreinformation
see@extendOnlySelectors.
Ontheirown,withoutanyuseof@extend,rulesetsthatuseplaceholderselectorswillnotberenderedtoCSS.
SasssupportsstandardmultilineCSScommentswith/**/,aswellassinglelinecommentswith//.The
multilinecommentsarepreservedintheCSSoutputwherepossible,whilethesinglelinecommentsare
removed.Forexample:

/*Thiscommentis
*severallineslong.
*sinceitusestheCSScommentsyntax,
*itwillappearintheCSSoutput.*/
body{color:black;}
//Thesecommentsareonlyonelinelongeach.
//Theywon'tappearintheCSSoutput,
//sincetheyusethesinglelinecommentsyntax.
a{color:green;}
iscompiledto:
/*Thiscommentis
*severallineslong.
*sinceitusestheCSScommentsyntax,
*itwillappearintheCSSoutput.*/
body{
color:black;}
a{
color:green;}
Whenthefirstletterofamultilinecommentis!,thecommentwillalwaysrenderedintocssoutputevenin
compressedoutputmodes.ThisisusefulforaddingCopyrightnoticestoyourgeneratedCSS.
SincemultilinecommentsbecomepartoftheresultingCSS,interpolationwithinthemisresolved.Forexample:
$version:"1.2.3";
/*ThisCSSisgeneratedbyMySnazzyFrameworkversion#{$version}.*/
iscompiledto:
/*ThisCSSisgeneratedbyMySnazzyFrameworkversion1.2.3.*/

SassScript
InadditiontotheplainCSSpropertysyntax,SasssupportsasmallsetofextensionscalledSassScript.
SassScriptallowspropertiestousevariables,arithmetic,andextrafunctions.SassScriptcanbeusedinany
propertyvalue.
SassScriptcanalsobeusedtogenerateselectorsandpropertynames,whichisusefulwhenwritingmixins.This
isdoneviainterpolation.

InteractiveShell

YoucaneasilyexperimentwithSassScriptusingtheinteractiveshell.Tolaunchtheshellrunthesasscommand
linewiththeioption.Attheprompt,enteranylegalSassScriptexpressiontohaveitevaluatedandtheresult
printedoutforyou:
$sassi
>>"Hello,SassyWorld!"
"Hello,SassyWorld!"
>>1px+1px+1px
3px
>>#777+#777
#eeeeee
>>#777+#888
white

Variables:$
ThemoststraightforwardwaytouseSassScriptistousevariables.Variablesbeginwithdollarsigns,andareset
likeCSSproperties:
$width:5em;
Youcanthenrefertotheminproperties:
#main{
width:$width;
}
Variablesareonlyavailablewithinthelevelofnestedselectorswheretheyredefined.Iftheyredefinedoutside
ofanynestedselectors,theyreavailableeverywhere.Theycanalsobedefinedwiththe!globalflag,inwhich
casetheyrealsoavailableeverywhere.Forexample:
#main{
$width:5em!global;
width:$width;
}
#sidebar{
width:$width;
}
iscompiledto:
#main{
width:5em;
}

#sidebar{
width:5em;
}
Forhistoricalreasons,variablenames(andallotherSassidentifiers)canusehyphensandunderscores
interchangeably.Forexample,ifyoudefineavariablecalled$mainwidth,youcanaccessitas$main_width,
andviceversa.

DataTypes
SassScriptsupportssevenmaindatatypes:
numbers(e.g.1.2,13,10px)
stringsoftext,withandwithoutquotes(e.g."foo",'bar',baz)
colors(e.g.blue,#04a3f9,rgba(255,0,0,0.5))
booleans(e.g.true,false)
nulls(e.g.null)
listsofvalues,separatedbyspacesorcommas(e.g.1.5em1em02em,Helvetica,Arial,sansserif)
mapsfromonevaluetoanother(e.g.(key1:value1,key2:value2))
SassScriptalsosupportsallothertypesofCSSpropertyvalue,suchasUnicoderangesand!important
declarations.However,ithasnospecialhandlingforthesetypes.Theyretreatedjustlikeunquotedstrings.
Strings
CSSspecifiestwokindsofstrings:thosewithquotes,suchas"LucidaGrande"or'http://sasslang.com',
andthosewithoutquotes,suchassansseriforbold.SassScriptrecognizesbothkinds,andingeneralifone
kindofstringisusedintheSassdocument,thatkindofstringwillbeusedintheresultingCSS.
Thereisoneexceptiontothis,though:whenusing#{}interpolation,quotedstringsareunquoted.Thismakesit
easiertousee.g.selectornamesinmixins.Forexample:
@mixinfirefoxmessage($selector){
body.firefox#{$selector}:before{
content:"Hi,Firefoxusers!";
}
}
@includefirefoxmessage(".header");
iscompiledto:
body.firefox.header:before{
content:"Hi,Firefoxusers!";}
Lists
ListsarehowSassrepresentsthevaluesofCSSdeclarationslikemargin:10px15px00orfontface:

Helvetica,Arial,sansserif.Listsarejustaseriesofothervalues,separatedbyeitherspacesor
commas.Infact,individualvaluescountaslists,too:theyrejustlistswithoneitem.
Ontheirown,listsdontdomuch,buttheSassScriptlistfunctionsmakethemuseful.Thenthfunctioncan
accessitemsinalist,thejoinfunctioncanjoinmultipleliststogether,andtheappendfunctioncanadditemsto
lists.The@eachdirectivecanalsoaddstylesforeachiteminalist.
Inadditiontocontainingsimplevalues,listscancontainotherlists.Forexample,1px2px,5px6pxisatwo
itemlistcontainingthelist1px2pxandthelist5px6px.Iftheinnerlistshavethesameseparatorastheouter
list,youllneedtouseparenthesestomakeitclearwheretheinnerlistsstartandstop.Forexample,(1px2px)
(5px6px)isalsoatwoitemlistcontainingthelist1px2pxandthelist5px6px.Thedifferenceisthatthe
outerlistisspaceseparated,wherebeforeitwascommaseparated.
WhenlistsareturnedintoplainCSS,Sassdoesntaddanyparentheses,sinceCSSdoesntunderstandthem.
Thatmeansthat(1px2px)(5px6px)and1px2px5px6pxwilllookthesamewhentheybecomeCSS.
However,theyarentthesamewhentheyreSass:thefirstisalistcontainingtwolists,whilethesecondisalist
containingfournumbers.
Listscanalsohavenoitemsinthematall.Theselistsarerepresentedas()(whichisalsoanemptymap).
TheycantbeoutputdirectlytoCSSifyoutrytodoe.g.fontfamily:(),Sasswillraiseanerror.Ifalist
containsemptylistsornullvalues,asin1px2px()3pxor1px2pxnull3px,theemptylistsandnullvalues
willberemovedbeforethecontaininglististurnedintoCSS.
Commaseparatedlistsmayhaveatrailingcomma.Thisisespeciallyusefulbecauseitallowsyoutorepresenta
singleelementlist.Forexample,(1,)isalistcontaining1and(123,)isacommaseparatedlistcontaining
aspaceseparatedlistcontaining1,2,and3.
Maps
Mapsrepresentanassociationbetweenkeysandvalues,wherekeysareusedtolookupvalues.Theymakeit
easytocollectvaluesintonamedgroupsandaccessthosegroupsdynamically.Theyhavenodirectparallelin
CSS,althoughtheyresyntacticallysimilartomediaqueryexpressions:
$map:(key1:value1,key2:value2,key3:value3);
Unlikelists,mapsmustalwaysbesurroundedbyparenthesesandmustalwaysbecommaseparated.Boththe
keysandvaluesinmapscanbeanySassScriptobject.Amapmayonlyhaveonevalueassociatedwithagiven
key(althoughthatvaluemaybealist).Agivenvaluemaybeassociatedwithmanykeys,though.
Likelists,mapsaremostlymanipulatedusingSassScriptfunctions.Themapgetfunctionlooksupvaluesina
mapandthemapmergefunctionaddsvaluestoamap.The@eachdirectivecanbeusedtoaddstylesforeach
key/valuepairinamap.Theorderofpairsinamapisalwaysthesameaswhenthemapwascreated.
Mapscanalsobeusedanywherelistscan.Whenusedbyalistfunction,amapistreatedasalistofpairs.For
example,(key1:value1,key2:value2)wouldbetreatedasthenestedlistkey1value1,key2value2by
listfunctions.Listscannotbetreatedasmaps,though,withtheexceptionoftheemptylist.()representsbotha
mapwithnokey/valuepairsandalistwithnoelements.

NotethatmapkeyscanbeanySassdatatype(evenanothermap)andthesyntaxfordeclaringamapallows
arbitrarySassScriptexpressionsthatwillbeevaluatedtodeterminethekey.
MapscannotbeconvertedtoplainCSS.UsingoneasthevalueofavariableoranargumenttoaCSSfunction
willcauseanerror.Usetheinspect($value)functiontoproduceanoutputstringusefulfordebuggingmaps.
Colors
AnyCSScolorexpressionreturnsaSassScriptColorvalue.Thisincludesalargenumberofnamedcolorswhich
areindistinguishablefromunquotedstrings.
Incompressedoutputmode,SasswilloutputthesmallestCSSrepresentationofacolor.Forexample,#FF0000
willoutputasredincompressedmode,butblanchedalmondwilloutputas#FFEBCD.
AcommonissueusersencounterwithnamedcolorsisthatsinceSassprefersthesameoutputformataswas
typedinotheroutputmodes,acolorinterpolatedintoaselectorbecomesinvalidsyntaxwhencompressed.To
avoidthis,alwaysquotenamedcolorsiftheyaremeanttobeusedintheconstructionofaselector.

Operations
Alltypessupportequalityoperations(==and!=).Inaddition,eachtypehasitsownoperationsthatithas
specialsupportfor.
NumberOperations
SassScriptsupportsthestandardarithmeticoperationsonnumbers(addition+,subtraction,multiplication*,
division/,andmodulo%).Sassmathfunctionspreserveunitsduringarithmeticoperations.Thismeansthat,
justlikeinreallife,youcannotworkonnumberswithincompatibleunits(suchasaddinganumberwithpxand
em)andtwonumberswiththesameunitthataremultipliedtogetherwillproducesquareunits(10px*10px==
100px*px).BeAwarethatpx*pxisaninvalidCSSunitandyouwillgetanerrorfromSassforattempting
touseinvalidunitsinCSS.
Relationaloperators(<,>,<=,>=)arealsosupportedfornumbers,andequalityoperators(==,!=)are
supportedforalltypes.
Divisionand/

CSSallows/toappearinpropertyvaluesasawayofseparatingnumbers.SinceSassScriptisanextensionof
theCSSpropertysyntax,itmustsupportthis,whilealsoallowing/tobeusedfordivision.Thismeansthatby
default,iftwonumbersareseparatedby/inSassScript,thentheywillappearthatwayintheresultingCSS.
However,therearethreesituationswherethe/willbeinterpretedasdivision.Thesecoverthevastmajorityof
caseswheredivisionisactuallyused.Theyare:
1.Ifthevalue,oranypartofit,isstoredinavariableorreturnedbyafunction.
2.Ifthevalueissurroundedbyparentheses,unlessthoseparenthesesareoutsidealistandthevalueisinside.
3.Ifthevalueisusedaspartofanotherarithmeticexpression.
Forexample:
p{

font:10px/8px;//PlainCSS,nodivision
$width:1000px;
width:$width/2;//Usesavariable,doesdivision
width:round(1.5)/2;//Usesafunction,doesdivision
height:(500px/2);//Usesparentheses,doesdivision
marginleft:5px+8px/2px;//Uses+,doesdivision
font:(italicbold10px/8px);//Inalist,parenthesesdon'tcount
}
iscompiledto:
p{
font:10px/8px;
width:500px;
height:250px;
marginleft:9px;}
IfyouwanttousevariablesalongwithaplainCSS/,youcanuse#{}toinsertthem.Forexample:
p{
$fontsize:12px;
$lineheight:30px;
font:#{$fontsize}/#{$lineheight};
}
iscompiledto:
p{
font:12px/30px;}
Subtraction,NegativeNumbers,and

ThereareanumberofdifferentthingscanmeaninCSSandinSass.Itcanbeasubtractionoperator(asin
5px3px),thebeginningofanegativenumber(asin3px),aunarynegationoperator(asin$var),orpart
ofanidentifier(asinfontweight).Mostofthetime,itsclearwhichiswhich,buttherearesometrickycases.
Asageneralrule,youresafestif:
Youalwaysincludespacesonbothsidesofwhensubtracting.
Youincludeaspacebeforebutnotafterforanegativenumberoraunarynegation.
Youwrapaunarynegationinparenthesesifitsinaspaceseparatedlist,asin10px($var).
Thedifferentmeaningsoftakeprecedenceinthefollowingorder:
1.Aaspartofanidentifier.Thismeansthata1isanunquotedstringwithvalue"a1".Theonlyexception
areunitsSassnormallyallowsanyvalididentifiertobeusedasanidentifier,butidentifiersmaynotcontaina
hyphenfollowedbyadigit.Thismeansthat5px3pxisthesameas5px3px.
2.Abetweentwonumberswithnowhitespace.Thisindicatessubtraction,so12isthesameas12.

3.Aatthebeginningofaliteralnumber.Thisindicatesanegativenumber,so12isalistcontaining1and
2.
4.Abetweentwonumbersregardlessofwhitespace.Thisindicatessubtraction,so1$vararethesameas
1$var.
5.Abeforeavalue.Thisindicatestheunarynegationoperatorthatis,theoperatorthattakesanumberand
returnsitsnegative.
ColorOperations
Allarithmeticoperationsaresupportedforcolorvalues,wheretheyworkpiecewise.Thismeansthatthe
operationisperformedonthered,green,andbluecomponentsinturn.Forexample:
p{
color:#010203+#040506;
}
computes01+04=05,02+05=07,and03+06=09,andiscompiledto:
p{
color:#050709;}
Oftenitsmoreusefultousecolorfunctionsthantotrytousecolorarithmetictoachievethesameeffect.
Arithmeticoperationsalsoworkbetweennumbersandcolors,alsopiecewise.Forexample:
p{
color:#010203*2;
}
computes01*2=02,02*2=04,and03*2=06,andiscompiledto:
p{
color:#020406;}
Notethatcolorswithanalphachannel(thosecreatedwiththergbaorhslafunctions)musthavethesamealpha
valueinorderforcolorarithmetictobedonewiththem.Thearithmeticdoesntaffectthealphavalue.For
example:
p{
color:rgba(255,0,0,0.75)+rgba(0,255,0,0.75);
}
iscompiledto:
p{

color:rgba(255,255,0,0.75);}
Thealphachannelofacolorcanbeadjustedusingtheopacifyandtransparentizefunctions.Forexample:
$translucentred:rgba(255,0,0,0.5);
p{
color:opacify($translucentred,0.3);
backgroundcolor:transparentize($translucentred,0.25);
}
iscompiledto:
p{
color:rgba(255,0,0,0.8);
backgroundcolor:rgba(255,0,0,0.25);}
IEfiltersrequireallcolorsincludethealphalayer,andbeinthestrictformatof#AABBCCDD.Youcanmore
easilyconvertthecolorusingtheie_hex_strfunction.Forexample:
$translucentred:rgba(255,0,0,0.5);
$green:#00ff00;
div{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#{ie
hexstr($green)}',endColorstr='#{iehexstr($translucentred)}');
}
iscompiledto:
div{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',
startColorstr=#FF00FF00,endColorstr=#80FF0000);
}
StringOperations
The+operationcanbeusedtoconcatenatestrings:
p{
cursor:e+resize;
}
iscompiledto:
p{
cursor:eresize;}

Notethatifaquotedstringisaddedtoanunquotedstring(thatis,thequotedstringistotheleftofthe+),the
resultisaquotedstring.Likewise,ifanunquotedstringisaddedtoaquotedstring(theunquotedstringistothe
leftofthe+),theresultisanunquotedstring.Forexample:
p:before{
content:"Foo"+Bar;
fontfamily:sans+"serif";
}
iscompiledto:
p:before{
content:"FooBar";
fontfamily:sansserif;}
Bydefault,iftwovaluesareplacednexttooneanother,theyareconcatenatedwithaspace:
p{
margin:3px+4pxauto;
}
iscompiledto:
p{
margin:7pxauto;}
Withinastringoftext,#{}styleinterpolationcanbeusedtoplacedynamicvalueswithinthestring:
p:before{
content:"Iate#{5+10}pies!";
}
iscompiledto:
p:before{
content:"Iate15pies!";}
Nullvaluesaretreatedasemptystringsforstringinterpolation:
$value:null;
p:before{
content:"Iate#{$value}pies!";
}
iscompiledto:

p:before{
content:"Iatepies!";}
BooleanOperations
SassScriptsupportsand,or,andnotoperatorsforbooleanvalues.
ListOperations
Listsdontsupportanyspecialoperations.Instead,theyremanipulatedusingthelistfunctions.

Parentheses
Parenthesescanbeusedtoaffecttheorderofoperations:
p{
width:1em+(2em*3);
}
iscompiledto:
p{
width:7em;}

Functions
SassScriptdefinessomeusefulfunctionsthatarecalledusingthenormalCSSfunctionsyntax:
p{
color:hsl(0,100%,50%);
}
iscompiledto:
p{
color:#ff0000;}
Seethispageforafulllistofavailablefunctions.
KeywordArguments
Sassfunctionscanalsobecalledusingexplicitkeywordarguments.Theaboveexamplecanalsobewrittenas:
p{
color:hsl($hue:0,$saturation:100%,$lightness:50%);
}
Whilethisislessconcise,itcanmakethestylesheeteasiertoread.Italsoallowsfunctionstopresentmore

flexibleinterfaces,providingmanyargumentswithoutbecomingdifficulttocall.
Namedargumentscanbepassedinanyorder,andargumentswithdefaultvaluescanbeomitted.Sincethe
namedargumentsarevariablenames,underscoresanddashescanbeusedinterchangeably.
SeeSass::Script::FunctionsforafulllistingofSassfunctionsandtheirargumentnames,aswellasinstructions
ondefiningyourowninRuby.

Interpolation:#{}
YoucanalsouseSassScriptvariablesinselectorsandpropertynamesusing#{}interpolationsyntax:
$name:foo;
$attr:border;
p.#{$name}{
#{$attr}color:blue;
}
iscompiledto:
p.foo{
bordercolor:blue;}
Itsalsopossibletouse#{}toputSassScriptintopropertyvalues.Inmostcasesthisisntanybetterthanusing
avariable,butusing#{}doesmeanthatanyoperationsnearitwillbetreatedasplainCSS.Forexample:
p{
$fontsize:12px;
$lineheight:30px;
font:#{$fontsize}/#{$lineheight};
}
iscompiledto:
p{
font:12px/30px;}

&inSassScript
Justlikewhenitsusedinselectors,&inSassScriptreferstothecurrentparentselector.Itsacommaseparated
listofspaceseparatedlists.Forexample:
.foo.bar.baz.bang,.bip.qux{
$selector:&;
}
Thevalueof$selectorisnow((".foo.bar"".baz.bang"),".bip.qux").Thecompoundselectorsare

quotedheretoindicatethattheyrestrings,butinrealitytheywouldbeunquoted.Eveniftheparentselector
doesntcontainacommaoraspace,&willalwayshavetwolevelsofnesting,soitcanbeaccessedconsistently.
Ifthereisnoparentselector,thevalueof&willbenull.Thismeansyoucanuseitinamixintodetectwhethera
parentselectorexists:
@mixindoesparentexist{
@if&{
&:hover{
color:red;
}
}@else{
a{
color:red;
}
}
}

VariableDefaults:!default
Youcanassigntovariablesiftheyarentalreadyassignedbyaddingthe!defaultflagtotheendofthevalue.
Thismeansthatifthevariablehasalreadybeenassignedto,itwontbereassigned,butifitdoesnthavea
valueyet,itwillbegivenone.
Forexample:
$content:"Firstcontent";
$content:"Secondcontent?"!default;
$new_content:"Firsttimereference"!default;
#main{
content:$content;
newcontent:$new_content;
}
iscompiledto:
#main{
content:"Firstcontent";
newcontent:"Firsttimereference";}
Variableswithnullvaluesaretreatedasunassignedby!default:
$content:null;
$content:"Nonnullcontent"!default;
#main{

content:$content;
}
iscompiledto:
#main{
content:"Nonnullcontent";}

@RulesandDirectives
SasssupportsallCSS3@rules,aswellassomeadditionalSassspecificonesknownasdirectives.These
havevariouseffectsinSass,detailedbelow.Seealsocontroldirectivesandmixindirectives.
@import
SassextendstheCSS@importruletoallowittoimportSCSSandSassfiles.AllimportedSCSSandSassfiles
willbemergedtogetherintoasingleCSSoutputfile.Inaddition,anyvariablesormixinsdefinedinimportedfiles
canbeusedinthemainfile.
SasslooksforotherSassfilesinthecurrentdirectory,andtheSassfiledirectoryunderRack,Rails,orMerb.
Additionalsearchdirectoriesmaybespecifiedusingthe:load_pathsoption,ortheloadpathoptiononthe
commandline.
@importtakesafilenametoimport.Bydefault,itlooksforaSassfiletoimportdirectly,butthereareafew
circumstancesunderwhichitwillcompiletoaCSS@importrule:
Ifthefilesextensionis.css.
Ifthefilenamebeginswithhttp://.
Ifthefilenameisaurl().
Ifthe@importhasanymediaqueries.
Ifnoneoftheaboveconditionsaremetandtheextensionis.scssor.sass,thenthenamedSassorSCSSfile
willbeimported.Ifthereisnoextension,Sasswilltrytofindafilewiththatnameandthe.scssor.sass
extensionandimportit.
Forexample,
@import"foo.scss";
or
@import"foo";
wouldbothimportthefilefoo.scss,whereas
@import"foo.css";
@import"foo"screen;
@import"http://foo.com/bar";

@importurl(foo);
wouldallcompileto
@import"foo.css";
@import"foo"screen;
@import"http://foo.com/bar";
@importurl(foo);
Itsalsopossibletoimportmultiplefilesinone@import.Forexample:
@import"roundedcorners","textshadow";
wouldimportboththeroundedcornersandthetextshadowfiles.
Importsmaycontain#{}interpolation,butonlywithcertainrestrictions.Itsnotpossibletodynamicallyimporta
SassfilebasedonavariableinterpolationisonlyforCSSimports.Assuch,itonlyworkswithurl()imports.
Forexample:
$family:unquote("Droid+Sans");
@importurl("http://fonts.googleapis.com/css?family=#{$family}");
wouldcompileto
@importurl("http://fonts.googleapis.com/css?family=Droid+Sans");
Partials
IfyouhaveaSCSSorSassfilethatyouwanttoimportbutdontwanttocompiletoaCSSfile,youcanaddan
underscoretothebeginningofthefilename.ThiswilltellSassnottocompileittoanormalCSSfile.Youcan
thenimportthesefileswithoutusingtheunderscore.
Forexample,youmighthave_colors.scss.Thenno_colors.cssfilewouldbecreated,andyoucando
@import"colors";
and_colors.scsswouldbeimported.
Notethatyoumaynotincludeapartialandanonpartialwiththesamenameinthesamedirectory.For
example,_colors.scssmaynotexistalongsidecolors.scss.
Nested@import
Althoughmostofthetimeitsmostusefultojusthave@importsatthetoplevelofthedocument,itispossibleto
includethemwithinCSSrulesand@mediarules.Likeabaselevel@import,thisincludesthecontentsofthe
@importedfile.However,theimportedruleswillbenestedinthesameplaceastheoriginal@import.
Forexample,ifexample.scsscontains

.example{
color:red;
}
then
#main{
@import"example";
}
wouldcompileto
#main.example{
color:red;
}
Directivesthatareonlyallowedatthebaselevelofadocument,like@mixinor@charset,arenotallowedin
filesthatare@importedinanestedcontext.
Itsnotpossibletonest@importwithinmixinsorcontroldirectives.
@media
@mediadirectivesinSassbehavejustliketheydoinplainCSS,withoneextracapability:theycanbenestedin
CSSrules.Ifa@mediadirectiveappearswithinaCSSrule,itwillbebubbleduptothetoplevelofthestylesheet,
puttingalltheselectorsonthewayinsidetherule.Thismakesiteasytoaddmediaspecificstyleswithout
havingtorepeatselectorsorbreaktheflowofthestylesheet.Forexample:
.sidebar{
width:300px;
@mediascreenand(orientation:landscape){
width:500px;
}
}
iscompiledto:
.sidebar{
width:300px;}
@mediascreenand(orientation:landscape){
.sidebar{
width:500px;}}
@mediaqueriescanalsobenestedwithinoneanother.Thequerieswillthenbecombinedusingtheand
operator.Forexample:
@mediascreen{

.sidebar{
@media(orientation:landscape){
width:500px;
}
}
}
iscompiledto:
@mediascreenand(orientation:landscape){
.sidebar{
width:500px;}}
Finally,@mediaqueriescancontainSassScriptexpressions(includingvariables,functions,andoperators)in
placeofthefeaturenamesandfeaturevalues.Forexample:
$media:screen;
$feature:webkitmindevicepixelratio;
$value:1.5;
@media#{$media}and($feature:$value){
.sidebar{
width:500px;
}
}
iscompiledto:
@mediascreenand(webkitmindevicepixelratio:1.5){
.sidebar{
width:500px;}}
@extend
Thereareoftencaseswhendesigningapagewhenoneclassshouldhaveallthestylesofanotherclass,as
wellasitsownspecificstyles.Themostcommonwayofhandlingthisistouseboththemoregeneralclassand
themorespecificclassintheHTML.Forexample,supposewehaveadesignforanormalerrorandalsofora
seriouserror.Wemightwriteourmarkuplikeso:
<divclass="errorseriousError">
Ohno!You'vebeenhacked!
</div>
Andourstyleslikeso:
.error{
border:1px#f00;

backgroundcolor:#fdd;
}
.seriousError{
borderwidth:3px;
}
Unfortunately,thismeansthatwehavetoalwaysremembertouse.errorwith.seriousError.Thisisa
maintenanceburden,leadstotrickybugs,andcanbringnonsemanticstyleconcernsintothemarkup.
The@extenddirectiveavoidstheseproblemsbytellingSassthatoneselectorshouldinheritthestylesof
anotherselector.Forexample:
.error{
border:1px#f00;
backgroundcolor:#fdd;
}
.seriousError{
@extend.error;
borderwidth:3px;
}
iscompiledto:
.error,.seriousError{
border:1px#f00;
backgroundcolor:#fdd;
}
.seriousError{
borderwidth:3px;
}
Thismeansthatallstylesdefinedfor.errorarealsoappliedto.seriousError,inadditiontothestyles
specificto.seriousError.Ineffect,everyelementwithclass.seriousErroralsohasclass.error.
Otherrulesthatuse.errorwillworkfor.seriousErroraswell.Forexample,ifwehavespecialstylesfor
errorscausedbyhackers:
.error.intrusion{
backgroundimage:url("/image/hacked.png");
}
Then<divclass="seriousErrorintrusion">willhavethehacked.pngbackgroundimageaswell.
HowitWorks
@extendworksbyinsertingtheextendingselector(e.g..seriousError)anywhereinthestylesheetthatthe

extendedselector(.e.g.error)appears.Thustheexampleabove:
.error{
border:1px#f00;
backgroundcolor:#fdd;
}
.error.intrusion{
backgroundimage:url("/image/hacked.png");
}
.seriousError{
@extend.error;
borderwidth:3px;
}
iscompiledto:
.error,.seriousError{
border:1px#f00;
backgroundcolor:#fdd;}
.error.intrusion,.seriousError.intrusion{
backgroundimage:url("/image/hacked.png");}
.seriousError{
borderwidth:3px;}
Whenmergingselectors,@extendissmartenoughtoavoidunnecessaryduplication,sosomethinglike
.seriousError.seriousErrorgetstranslatedto.seriousError.Inaddition,itwontproduceselectorsthat
cantmatchanything,like#main#footer.
ExtendingComplexSelectors
Classselectorsarenttheonlythingsthatcanbeextended.Itspossibletoextendanyselectorinvolvingonlya
singleelement,suchas.special.cool,a:hover,ora.user[href^="http://"].Forexample:
.hoverlink{
@extenda:hover;
}
Justlikewithclasses,thismeansthatallstylesdefinedfora:hoverarealsoappliedto.hoverlink.For
example:
.hoverlink{
@extenda:hover;
}
a:hover{
textdecoration:underline;

}
iscompiledto:
a:hover,.hoverlink{
textdecoration:underline;}
Justlikewith.error.intrusionabove,anyrulethatusesa:hoverwillalsoworkfor.hoverlink,evenifthey
haveotherselectorsaswell.Forexample:
.hoverlink{
@extenda:hover;
}
.commenta.user:hover{
fontweight:bold;
}
iscompiledto:
.commenta.user:hover,.comment.user.hoverlink{
fontweight:bold;}
MultipleExtends
Asingleselectorcanextendmorethanoneselector.Thismeansthatitinheritsthestylesofalltheextended
selectors.Forexample:
.error{
border:1px#f00;
backgroundcolor:#fdd;
}
.attention{
fontsize:3em;
backgroundcolor:#ff0;
}
.seriousError{
@extend.error;
@extend.attention;
borderwidth:3px;
}
iscompiledto:
.error,.seriousError{
border:1px#f00;
backgroundcolor:#fdd;}

.attention,.seriousError{
fontsize:3em;
backgroundcolor:#ff0;}
.seriousError{
borderwidth:3px;}
Ineffect,everyelementwithclass.seriousErroralsohasclass.errorandclass.attention.Thus,the
stylesdefinedlaterinthedocumenttakeprecedence:.seriousErrorhasbackgroundcolor#ff0ratherthan
#fdd,since.attentionisdefinedlaterthan.error.
Multipleextendscanalsobewrittenusingacommaseparatedlistofselectors.Forexample,@extend.error,
.attentionisthesameas@extend.error;@extend.attention.
ChainingExtends
Itspossibleforoneselectortoextendanotherselectorthatinturnextendsathird.Forexample:
.error{
border:1px#f00;
backgroundcolor:#fdd;
}
.seriousError{
@extend.error;
borderwidth:3px;
}
.criticalError{
@extend.seriousError;
position:fixed;
top:10%;
bottom:10%;
left:10%;
right:10%;
}
Noweverythingwithclass.seriousErroralsohasclass.error,andeverythingwithclass.criticalError
hasclass.seriousErrorandclass.error.Itscompiledto:
.error,.seriousError,.criticalError{
border:1px#f00;
backgroundcolor:#fdd;}
.seriousError,.criticalError{
borderwidth:3px;}
.criticalError{
position:fixed;
top:10%;

bottom:10%;
left:10%;
right:10%;}
SelectorSequences
Selectorsequences,suchas.foo.baror.foo+.bar,currentlycantbeextended.However,itispossible
fornestedselectorsthemselvestouse@extend.Forexample:
#fakelinks.link{
@extenda;
}
a{
color:blue;
&:hover{
textdecoration:underline;
}
}
iscompiledto
a,#fakelinks.link{
color:blue;}
a:hover,#fakelinks.link:hover{
textdecoration:underline;}
MergingSelectorSequences

Sometimesaselectorsequenceextendsanotherselectorthatappearsinanothersequence.Inthiscase,the
twosequencesneedtobemerged.Forexample:
#admin.tabbara{
fontweight:bold;
}
#demo.overview.fakelink{
@extenda;
}
Whileitwouldtechnicallybepossibletogenerateallselectorsthatcouldpossiblymatcheithersequence,this
wouldmakethestylesheetfartoolarge.Thesimpleexampleabove,forinstance,wouldrequiretenselectors.
Instead,Sassgeneratesonlyselectorsthatarelikelytobeuseful.
Whenthetwosequencesbeingmergedhavenoselectorsincommon,thentwonewselectorsaregenerated:
onewiththefirstsequencebeforethesecond,andonewiththesecondsequencebeforethefirst.Forexample:
#admin.tabbara{
fontweight:bold;

}
#demo.overview.fakelink{
@extenda;
}
iscompiledto:
#admin.tabbara,
#admin.tabbar#demo.overview.fakelink,
#demo.overview#admin.tabbar.fakelink{
fontweight:bold;}
Ifthetwosequencesdosharesomeselectors,thenthoseselectorswillbemergedtogetherandonlythe
differences(ifanystillexist)willalternate.Inthisexample,bothsequencescontaintheid#admin,sothe
resultingselectorswillmergethosetwoids:
#admin.tabbara{
fontweight:bold;
}
#admin.overview.fakelink{
@extenda;
}
Thisiscompiledto:
#admin.tabbara,
#admin.tabbar.overview.fakelink,
#admin.overview.tabbar.fakelink{
fontweight:bold;}
@extendOnlySelectors
Sometimesyoullwritestylesforaclassthatyouonlyeverwantto@extend,andneverwanttousedirectlyin
yourHTML.ThisisespeciallytruewhenwritingaSasslibrary,whereyoumayprovidestylesforusersto
@extendiftheyneedandignoreiftheydont.
Ifyouusenormalclassesforthis,youendupcreatingalotofextraCSSwhenthestylesheetsaregenerated,
andruntheriskofcollidingwithotherclassesthatarebeingusedintheHTML.ThatswhySasssupports
placeholderselectors(forexample,%foo).
Placeholderselectorslooklikeclassandidselectors,exceptthe#or.isreplacedby%.Theycanbeused
anywhereaclassoridcould,andontheirowntheypreventrulesetsfrombeingrenderedtoCSS.Forexample:
//Thisrulesetwon'tberenderedonitsown.
#contexta%extreme{
color:blue;
fontweight:bold;

fontsize:2em;
}
However,placeholderselectorscanbeextended,justlikeclassesandids.Theextendedselectorswillbe
generated,butthebaseplaceholderselectorwillnot.Forexample:
.notice{
@extend%extreme;
}
Iscompiledto:
#contexta.notice{
color:blue;
fontweight:bold;
fontsize:2em;}
The!optionalFlag
Normallywhenyouextendaselector,itsanerrorifthat@extenddoesntwork.Forexample,ifyouwrite
a.important{@extend.notice},itsanerroriftherearenoselectorsthatcontain.notice.Itsalsoanerror
iftheonlyselectorcontaining.noticeish1.notice,sinceh1conflictswithaandsononewselectorwouldbe
generated.
Sometimes,though,youwanttoallowan@extendnottoproduceanynewselectors.Todoso,justaddthe
!optionalflagaftertheselector.Forexample:
a.important{
@extend.notice!optional;
}
@extendinDirectives
Therearesomerestrictionsontheuseof@extendwithindirectivessuchas@media.Sassisunabletomake
CSSrulesoutsideofthe@mediablockapplytoselectorsinsideitwithoutcreatingahugeamountofstylesheet
bloatbycopyingstylesallovertheplace.Thismeansthatifyouuse@extendwithin@media(orotherCSS
directives),youmayonlyextendselectorsthatappearwithinthesamedirectiveblock.
Forexample,thefollowingworksfine:
@mediaprint{
.error{
border:1px#f00;
backgroundcolor:#fdd;
}
.seriousError{
@extend.error;

borderwidth:3px;
}
}
Butthisisanerror:
.error{
border:1px#f00;
backgroundcolor:#fdd;
}
@mediaprint{
.seriousError{
//INVALIDEXTEND:.errorisusedoutsideofthe"@mediaprint"directive
@extend.error;
borderwidth:3px;
}
}
Somedaywehopetohave@extendsupportednativelyinthebrowser,whichwillallowittobeusedwithin
@mediaandotherdirectives.
@atroot
The@atrootdirectivecausesoneormorerulestobeemittedattherootofthedocument,ratherthanbeing
nestedbeneaththeirparentselectors.Itcaneitherbeusedwithasingleinlineselector:
.parent{
...
@atroot.child{...}
}
Whichwouldproduce:
.parent{...}
.child{...}
Oritcanbeusedwithablockcontainingmultipleselectors:
.parent{
...
@atroot{
.child1{...}
.child2{...}
}
.stepchild{...}
}

Whichwouldoutputthefollowing:
.parent{...}
.child1{...}
.child2{...}
.parent.stepchild{...}
@atroot(without:...)and@atroot(with:...)
Bydefault,@atrootjustexcludesselectors.However,itsalsopossibletouse@atroottomoveoutsideof
nesteddirectivessuchas@mediaaswell.Forexample:
@mediaprint{
.page{
width:8in;
@atroot(without:media){
color:red;
}
}
}
produces:
@mediaprint{
.page{
width:8in;
}
}
.page{
color:red;
}
Youcanuse@atroot(without:...)tomoveoutsideofanydirective.Youcanalsodoitwithmultiple
directivesseparatedbyaspace:@atroot(without:mediasupports)movesoutsideofboth@mediaand
@supportsqueries.
Therearetwospecialvaluesyoucanpassto@atroot.rulereferstonormalCSSrules@atroot
(without:rule)isthesameas@atrootwithnoquery.@atroot(without:all)meansthatthestyles
shouldbemovedoutsideofalldirectivesandCSSrules.
Ifyouwanttospecifywhichdirectivesorrulestoinclude,ratherthanlistingwhichonesshouldbeexcluded,you
canusewithinsteadofwithout.Forexample,@atroot(with:rule)willmoveoutsideofalldirectives,but
willpreserveanyCSSrules.
@debug
The@debugdirectiveprintsthevalueofaSassScriptexpressiontothestandarderroroutputstream.Itsuseful
fordebuggingSassfilesthathavecomplicatedSassScriptgoingon.Forexample:

@debug10em+12em;
outputs:
Line1DEBUG:22em
@warn
The@warndirectiveprintsthevalueofaSassScriptexpressiontothestandarderroroutputstream.Itsuseful
forlibrariesthatneedtowarnusersofdeprecationsorrecoveringfromminormixinusagemistakes.Thereare
twomajordistinctionsbetween@warnand@debug:
1.Youcanturnwarningsoffwiththequietcommandlineoptionorthe:quietSassoption.
2.Astylesheettracewillbeprintedoutalongwiththemessagesothattheuserbeingwarnedcanseewhere
theirstylescausedthewarning.
UsageExample:
@mixinadjustlocation($x,$y){
@ifunitless($x){
@warn"Assuming#{$x}tobeinpixels";
$x:1px*$x;
}
@ifunitless($y){
@warn"Assuming#{$y}tobeinpixels";
$y:1px*$y;
}
position:relative;left:$x;top:$y;
}
@error
The@errordirectivethrowsthevalueofaSassScriptexpressionasafatalerror,includinganicestacktrace.
Itsusefulforvalidatingargumentstomixinsandfunctions.Forexample:
@mixinadjustlocation($x,$y){
@ifunitless($x){
@error"$xmaynotbeunitless,was#{$x}.";
}
@ifunitless($y){
@error"$ymaynotbeunitless,was#{$y}.";
}
position:relative;left:$x;top:$y;
}
Thereiscurrentlynowaytocatcherrors.

ControlDirectives&Expressions

SassScriptsupportsbasiccontroldirectivesandexpressionsforincludingstylesonlyundersomeconditionsor
includingthesamestyleseveraltimeswithvariations.
Note:Controldirectivesareanadvancedfeature,andareuncommonindaytodaystyling.Theyexistmainly
foruseinmixins,particularlythosethatarepartoflibrarieslikeCompass,andsorequiresubstantialflexibility.
if()
Thebuiltinif()functionallowsyoutobranchonaconditionandreturnsonlyoneoftwopossibleoutcomes.It
canbeusedinanyscriptcontext.Theiffunctiononlyevaluatestheargumentcorrespondingtotheonethatit
willreturnthisallowsyoutorefertovariablesthatmaynotbedefinedortohavecalculationsthatwould
otherwisecauseanerror(E.g.dividebyzero).
if(true,1px,2px)=>1px
if(false,1px,2px)=>2px
@if
The@ifdirectivetakesaSassScriptexpressionandusesthestylesnestedbeneathitiftheexpressionreturns
anythingotherthanfalseornull:
p{
@if1+1==2{border:1pxsolid;}
@if5<3{border:2pxdotted;}
@ifnull{border:3pxdouble;}
}
iscompiledto:
p{
border:1pxsolid;}
The@ifstatementcanbefollowedbyseveral@elseifstatementsandone@elsestatement.Ifthe@if
statementfails,the@elseifstatementsaretriedinorderuntilonesucceedsorthe@elseisreached.For
example:
$type:monster;
p{
@if$type==ocean{
color:blue;
}@elseif$type==matador{
color:red;
}@elseif$type==monster{
color:green;
}@else{
color:black;
}
}

iscompiledto:
p{
color:green;}
@for
The@fordirectiverepeatedlyoutputsasetofstyles.Foreachrepetition,acountervariableisusedtoadjust
theoutput.Thedirectivehastwoforms:@for$varfrom<start>through<end>and@for$varfrom
<start>to<end>.Notethedifferenceinthekeywordsthroughandto.$varcanbeanyvariablename,like
$i<start>and<end>areSassScriptexpressionsthatshouldreturnintegers.When<start>isgreaterthan
<end>thecounterwilldecrementinsteadofincrement.
The@forstatementsets$vartoeachsuccessivenumberinthespecifiedrangeandeachtimeoutputsthe
nestedstylesusingthatvalueof$var.Fortheformfrom...through,therangeincludesthevaluesof
<start>and<end>,buttheformfrom...torunsuptobutnotincludingthevalueof<end>.Usingthe
throughsyntax,
@for$ifrom1through3{
.item#{$i}{width:2em*$i;}
}
iscompiledto:
.item1{
width:2em;}
.item2{
width:4em;}
.item3{
width:6em;}
@each
The@eachdirectiveusuallyhastheform@each$varin<listormap>.$varcanbeanyvariablename,like
$lengthor$name,and<listormap>isaSassScriptexpressionthatreturnsalistoramap.
The@eachrulesets$vartoeachiteminthelistormap,thenoutputsthestylesitcontainsusingthatvalueof
$var.Forexample:
@each$animalinpuma,seaslug,egret,salamander{
.#{$animal}icon{
backgroundimage:url('/images/#{$animal}.png');
}
}
iscompiledto:
.pumaicon{

backgroundimage:url('/images/puma.png');}
.seaslugicon{
backgroundimage:url('/images/seaslug.png');}
.egreticon{
backgroundimage:url('/images/egret.png');}
.salamandericon{
backgroundimage:url('/images/salamander.png');}
MultipleAssignment
The@eachdirectivecanalsousemultiplevariables,asin@each$var1,$var2,...in<list>.If<list>is
alistoflists,eachelementofthesublistsisassignedtotherespectivevariable.Forexample:
@each$animal,$color,$cursorin(puma,black,default),
(seaslug,blue,pointer),
(egret,white,move){
.#{$animal}icon{
backgroundimage:url('/images/#{$animal}.png');
border:2pxsolid$color;
cursor:$cursor;
}
}
iscompiledto:
.pumaicon{
backgroundimage:url('/images/puma.png');
border:2pxsolidblack;
cursor:default;}
.seaslugicon{
backgroundimage:url('/images/seaslug.png');
border:2pxsolidblue;
cursor:pointer;}
.egreticon{
backgroundimage:url('/images/egret.png');
border:2pxsolidwhite;
cursor:move;}
Sincemapsaretreatedaslistsofpairs,multipleassignmentworkswiththemaswell.Forexample:
@each$header,$sizein(h1:2em,h2:1.5em,h3:1.2em){
#{$header}{
fontsize:$size;
}
}
iscompiledto:

h1{
fontsize:2em;}
h2{
fontsize:1.5em;}
h3{
fontsize:1.2em;}
@while
The@whiledirectivetakesaSassScriptexpressionandrepeatedlyoutputsthenestedstylesuntilthestatement
evaluatestofalse.Thiscanbeusedtoachievemorecomplexloopingthanthe@forstatementiscapableof,
althoughthisisrarelynecessary.Forexample:
$i:6;
@while$i>0{
.item#{$i}{width:2em*$i;}
$i:$i2;
}
iscompiledto:
.item6{
width:12em;}
.item4{
width:8em;}
.item2{
width:4em;}

MixinDirectives
Mixinsallowyoutodefinestylesthatcanbereusedthroughoutthestylesheetwithoutneedingtoresorttonon
semanticclasseslike.floatleft.MixinscanalsocontainfullCSSrules,andanythingelseallowedelsewhere
inaSassdocument.Theycaneventakeargumentswhichallowsyoutoproduceawidevarietyofstyleswith
veryfewmixins.

DefiningaMixin:@mixin
Mixinsaredefinedwiththe@mixindirective.Itsfollowedbythenameofthemixinandoptionallythe
arguments,andablockcontainingthecontentsofthemixin.Forexample,thelargetextmixinisdefinedas
follows:
@mixinlargetext{
font:{
family:Arial;
size:20px;

weight:bold;
}
color:#ff0000;
}
Mixinsmayalsocontainselectors,possiblymixedwithproperties.Theselectorscanevencontainparent
references.Forexample:
@mixinclearfix{
display:inlineblock;
&:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
*html&{height:1px}
}
Forhistoricalreasons,mixinnames(andallotherSassidentifiers)canusehyphensandunderscores
interchangeably.Forexample,ifyoudefineamixincalledaddcolumn,youcanincludeitasadd_column,and
viceversa.

IncludingaMixin:@include
Mixinsareincludedinthedocumentwiththe@includedirective.Thistakesthenameofamixinandoptionally
argumentstopasstoit,andincludesthestylesdefinedbythatmixinintothecurrentrule.Forexample:
.pagetitle{
@includelargetext;
padding:4px;
margintop:10px;
}
iscompiledto:
.pagetitle{
fontfamily:Arial;
fontsize:20px;
fontweight:bold;
color:#ff0000;
padding:4px;
margintop:10px;}
Mixinsmayalsobeincludedoutsideofanyrule(thatis,attherootofthedocument)aslongastheydont
directlydefineanypropertiesoruseanyparentreferences.Forexample:

@mixinsillylinks{
a{
color:blue;
backgroundcolor:red;
}
}
@includesillylinks;
iscompiledto:
a{
color:blue;
backgroundcolor:red;}
Mixindefinitionscanalsoincludeothermixins.Forexample:
@mixincompound{
@includehighlightedbackground;
@includeheadertext;
}
@mixinhighlightedbackground{backgroundcolor:#fc0;}
@mixinheadertext{fontsize:20px;}
Mixinsmayincludethemselves.ThisisdifferentthanthebehaviorofSassversionspriorto3.3,wheremixin
recursionwasforbidden.
Mixinsthatonlydefinedescendentselectorscanbesafelymixedintothetopmostlevelofadocument.

Arguments
MixinscantakeSassScriptvaluesasarguments,whicharegivenwhenthemixinisincludedandmadeavailable
withinthemixinasvariables.
Whendefiningamixin,theargumentsarewrittenasvariablenamesseparatedbycommas,allinparentheses
afterthename.Thenwhenincludingthemixin,valuescanbepassedininthesamemanner.Forexample:
@mixinsexyborder($color,$width){
border:{
color:$color;
width:$width;
style:dashed;
}
}
p{@includesexyborder(blue,1in);}

iscompiledto:
p{
bordercolor:blue;
borderwidth:1in;
borderstyle:dashed;}
Mixinscanalsospecifydefaultvaluesfortheirargumentsusingthenormalvariablesettingsyntax.Thenwhen
themixinisincluded,ifitdoesntpassinthatargument,thedefaultvaluewillbeusedinstead.Forexample:
@mixinsexyborder($color,$width:1in){
border:{
color:$color;
width:$width;
style:dashed;
}
}
p{@includesexyborder(blue);}
h1{@includesexyborder(blue,2in);}
iscompiledto:
p{
bordercolor:blue;
borderwidth:1in;
borderstyle:dashed;}
h1{
bordercolor:blue;
borderwidth:2in;
borderstyle:dashed;}
KeywordArguments
Mixinscanalsobeincludedusingexplicitkeywordarguments.Forinstance,theaboveexamplecouldbewritten
as:
p{@includesexyborder($color:blue);}
h1{@includesexyborder($color:blue,$width:2in);}
Whilethisislessconcise,itcanmakethestylesheeteasiertoread.Italsoallowsfunctionstopresentmore
flexibleinterfaces,providingmanyargumentswithoutbecomingdifficulttocall.
Namedargumentscanbepassedinanyorder,andargumentswithdefaultvaluescanbeomitted.Sincethe
namedargumentsarevariablenames,underscoresanddashescanbeusedinterchangeably.
VariableArguments

Sometimesitmakessenseforamixinorfunctiontotakeanunknownnumberofarguments.Forexample,a
mixinforcreatingboxshadowsmighttakeanynumberofshadowsasarguments.Forthesesituations,Sass
supportsvariablearguments,whichareargumentsattheendofamixinorfunctiondeclarationthattakeall
leftoverargumentsandpackagethemupasalist.Theseargumentslookjustlikenormalarguments,butare
followedby....Forexample:
@mixinboxshadow($shadows...){
mozboxshadow:$shadows;
webkitboxshadow:$shadows;
boxshadow:$shadows;
}
.shadows{
@includeboxshadow(0px4px5px#666,2px6px10px#999);
}
iscompiledto:
.shadows{
mozboxshadow:0px4px5px#666,2px6px10px#999;
webkitboxshadow:0px4px5px#666,2px6px10px#999;
boxshadow:0px4px5px#666,2px6px10px#999;
}
Variableargumentsalsocontainanykeywordargumentspassedtothemixinorfunction.Thesecanbe
accessedusingthekeywords($args)function,whichreturnsthemasamapfromstrings(without$)tovalues.
Variableargumentscanalsobeusedwhencallingamixin.Usingthesamesyntax,youcanexpandalistof
valuessothateachvalueispassedasaseparateargument,orexpandamapofvaluessothateachpairis
treatedasakeywordargument.Forexample:
@mixincolors($text,$background,$border){
color:$text;
backgroundcolor:$background;
bordercolor:$border;
}
$values:#ff0000,#00ff00,#0000ff;
.primary{
@includecolors($values...);
}
$valuemap:(text:#00ff00,background:#0000ff,border:#ff0000);
.secondary{
@includecolors($valuemap...);
}

iscompiledto:
.primary{
color:#ff0000;
backgroundcolor:#00ff00;
bordercolor:#0000ff;
}
.secondary{
color:#00ff00;
backgroundcolor:#0000ff;
bordercolor:#ff0000;
}
Youcanpassbothanargumentlistandamapaslongasthelistcomesbeforethemap,asin@include
colors($values...,$map...).
Youcanusevariableargumentstowrapamixinandaddadditionalstyleswithoutchangingtheargument
signatureofthemixin.Ifyoudo,keywordargumentswillgetdirectlypassedthroughtothewrappedmixin.For
example:
@mixinwrappedstylishmixin($args...){
fontweight:bold;
@includestylishmixin($args...);
}
.stylish{
//The$widthargumentwillgetpassedonto"stylishmixin"asakeyword
@includewrappedstylishmixin(#00ff00,$width:100px);
}

PassingContentBlockstoaMixin
Itispossibletopassablockofstylestothemixinforplacementwithinthestylesincludedbythemixin.The
styleswillappearatthelocationofany@contentdirectivesfoundwithinthemixin.Thismakesitpossibleto
defineabstractionsrelatingtotheconstructionofselectorsanddirectives.
Forexample:
@mixinapplytoie6only{
*html{
@content;
}
}
@includeapplytoie6only{
#logo{
backgroundimage:url(/logo.gif);

}
}
Generates:
*html#logo{
backgroundimage:url(/logo.gif);
}
Thesamemixinscanbedoneinthe.sassshorthandsyntax:
=applytoie6only
*html
@content
+applytoie6only
#logo
backgroundimage:url(/logo.gif)
Note:whenthe@contentdirectiveisspecifiedmorethanonceorinaloop,thestyleblockwillbeduplicated
witheachinvocation.
VariableScopeandContentBlocks
Theblockofcontentpassedtoamixinareevaluatedinthescopewheretheblockisdefined,notinthescopeof
themixin.Thismeansthatvariableslocaltothemixincannotbeusedwithinthepassedstyleblockand
variableswillresolvetotheglobalvalue:
$color:white;
@mixincolors($color:blue){
backgroundcolor:$color;
@content;
bordercolor:$color;
}
.colors{
@includecolors{color:$color;}
}
Compilesto:
.colors{
backgroundcolor:blue;
color:white;
bordercolor:blue;
}
Additionally,thismakesitclearthatthevariablesandmixinsthatareusedwithinthepassedblockarerelatedto

theotherstylesaroundwheretheblockisdefined.Forexample:
#sidebar{
$sidebarwidth:300px;
width:$sidebarwidth;
@includesmartphone{
width:$sidebarwidth/3;
}
}

FunctionDirectives
Itispossibletodefineyourownfunctionsinsassandusetheminanyvalueorscriptcontext.Forexample:
$gridwidth:40px;
$gutterwidth:10px;
@functiongridwidth($n){
@return$n*$gridwidth+($n1)*$gutterwidth;
}
#sidebar{width:gridwidth(5);}
Becomes:
#sidebar{
width:240px;}
Asyoucanseefunctionscanaccessanygloballydefinedvariablesaswellasacceptargumentsjustlikea
mixin.Afunctionmayhaveseveralstatementscontainedwithinit,andyoumustcall@returntosetthereturn
valueofthefunction.
Aswithmixins,youcancallSassdefinedfunctionsusingkeywordarguments.Intheaboveexamplewecould
havecalledthefunctionlikethis:
#sidebar{width:gridwidth($n:5);}
Itisrecommendedthatyouprefixyourfunctionstoavoidnamingconflictsandsothatreadersofyour
stylesheetsknowtheyarenotpartofSassorCSS.Forexample,ifyouworkforACMECorp,youmighthave
namedthefunctionaboveacmegridwidth.
Userdefinedfunctionsalsosupportvariableargumentsinthesamewayasmixins.
Forhistoricalreasons,functionnames(andallotherSassidentifiers)canusehyphensandunderscores
interchangeably.Forexample,ifyoudefineafunctioncalledgridwidth,youcanuseitasgrid_width,and
viceversa.

OutputStyle
AlthoughthedefaultCSSstylethatSassoutputsisveryniceandreflectsthestructureofthedocument,tastes
andneedsvaryandsoSasssupportsseveralotherstyles.
Sassallowsyoutochoosebetweenfourdifferentoutputstylesbysettingthe:styleoptionorusingthe
stylecommandlineflag.
:nested
NestedstyleisthedefaultSassstyle,becauseitreflectsthestructureoftheCSSstylesandtheHTML
documenttheyrestyling.Eachpropertyhasitsownline,buttheindentationisntconstant.Eachruleisindented
basedonhowdeeplyitsnested.Forexample:
#main{
color:#fff;
backgroundcolor:#000;}
#mainp{
width:10em;}
.huge{
fontsize:10em;
fontweight:bold;
textdecoration:underline;}
NestedstyleisveryusefulwhenlookingatlargeCSSfiles:itallowsyoutoeasilygraspthestructureofthefile
withoutactuallyreadinganything.
:expanded
ExpandedisamoretypicalhumanmadeCSSstyle,witheachpropertyandruletakinguponeline.Properties
areindentedwithintherules,buttherulesarentindentedinanyspecialway.Forexample:
#main{
color:#fff;
backgroundcolor:#000;
}
#mainp{
width:10em;
}
.huge{
fontsize:10em;
fontweight:bold;
textdecoration:underline;
}
:compact
CompactstyletakesuplessspacethanNestedorExpanded.Italsodrawsthefocusmoretotheselectorsthan

totheirproperties.EachCSSruletakesuponlyoneline,witheverypropertydefinedonthatline.Nestedrules
areplacednexttoeachotherwithnonewline,whileseparategroupsofruleshavenewlinesbetweenthem.For
example:
#main{color:#fff;backgroundcolor:#000;}
#mainp{width:10em;}
.huge{fontsize:10em;fontweight:bold;textdecoration:underline;}
:compressed
Compressedstyletakesuptheminimumamountofspacepossible,havingnowhitespaceexceptthat
necessarytoseparateselectorsandanewlineattheendofthefile.Italsoincludessomeotherminor
compressions,suchaschoosingthesmallestrepresentationforcolors.Itsnotmeanttobehumanreadable.
Forexample:
#main{color:#fff;backgroundcolor:#000}#mainp{width:10em}.huge{fontsize:10em;font
weight:bold;textdecoration:underline}

ExtendingSass
Sassprovidesanumberofadvancedcustomizationsforuserswithuniquerequirements.Usingthesefeatures
requiresastrongunderstandingofRuby.

DefiningCustomSassFunctions
UserscandefinetheirownSassfunctionsusingtheRubyAPI.Formoreinformation,seethesource
documentation.

CacheStores
Sasscachesparseddocumentssothattheycanbereusedwithoutparsingthemagainunlesstheyhave
changed.Bydefault,Sasswillwritethesecachefilestoalocationonthefilesystemindicatedby
:cache_location.Ifyoucannotwritetothefilesystemorneedtosharecacheacrossrubyprocessesor
machines,thenyoucandefineyourowncachestoreandsetthe:cache_storeoption.Fordetailsoncreating
yourowncachestore,pleaseseethesourcedocumentation.

CustomImporters
Sassimportersareinchargeoftakingpathspassedto@importandfindingtheappropriateSasscodeforthose
paths.Bydefault,thiscodeisloadedfromthefilesystem,butimporterscouldbeaddedtoloadfromadatabase,
overHTTP,oruseadifferentfilenamingschemethanwhatSassexpects.
Eachimporterisinchargeofasingleloadpath(orwhateverthecorrespondingnotionisforthebackend).
Importerscanbeplacedinthe:load_pathsarrayalongsidenormalfilesystempaths.
Whenresolvingan@import,Sasswillgothroughtheloadpathslookingforanimporterthatsuccessfully
importsthepath.Onceoneisfound,theimportedfileisused.

UsercreatedimportersmustinheritfromSass::Importers::Base.
GeneratedonMonMar2816:42:342016byyard0.8.7.6(ruby2.2.3).