Sass 4 Sublime

7/26/2019 Sass 4 Sublime

1/4

Get SASS Working in Sublime Text for Windows in 8 Steps

October 3rd, 203 ! "osted in Tools # $%cienc&, Tutori'ls # Guides !

T'gged( SASS, Sublime Text

)ompile SASS, Sublime Text Windows

*ollow t+ese inst'll'tion instructions to st'rt using SASS wit+ Sublime Text

-ou.ll be 'ble to s'/e &our SASS scss1 le, 'nd it will compile to ' )SS le

'utom'tic'll& T+ere 're ' few more extensi/e guides out t+ere on t+is, but

t+e& skipped o/er ' few minor t+ings t+'t &ou m'& miss T+is boils it down to

t+e essenti'ls t+'t &ou need to get up 'nd running

How to Build .scss with Sublime Text:

1 nst'll 4ub&( 5ownlo'd 4ub& for Windows W+en &ou run t+e inst'ller,c+oose t+e option $xecut'ble in "AT6

2 nst'll SASS wit+ 4ub&( Open &our St'rt menu 'nd t&pe 7cmd to open '

comm'nd prompt T&pe 7gem inst'll s'ss 'nd press enter Gem will do its

t+ing 'nd inst'll

3 nst'll "'ck'ge 9'n'ger for Sublime Text( -ou m'& 'lre'd& +'/e t+is

inst'lled if &ou./e been inst'lling ot+er extensions *ollow t+e inst'll'tion

instructions on t+e plugin.s website

4 :se "'ck'ge 9'n'ger to nst'll 7SASS( T+is p'ck'ge is for s&nt'x

+ig+lig+ting Open t+e comm'nd p'nel wit+ )trl;S+ift;" 'nd run 7"'ck'ge

)ontrol( nst'll "'ck'ge, t+en t&pe SASS to nd t+e p'ck'ge to inst'll 'nd

press $nterT+ere prob'bl& is ' con


2/4

Helpful Hits:

5on.t w'nt t+e )SS le to s'/e in t+e s'me director&D f &ou w'nt to

c+'nge t+e def'ult folder t+'t &our gener'ted )SS les 're s'/ed to, &ou c'n

edit t+e congur'tion for w+'t Sublime Text c'lls 7Cuild S&stems T+is

congur'tion is w+'t.s c'lling t+e comm'ndline for SASS :nfortun'tel& t+ere

doesn.t 'ppe'r to be ' w'& to do t+is on ' per@proEect b'sis, but &ou c'n

c+'nge it$x'mple used for Word"ress( 6'/ing st&lescss in t+e folder >s'ss>

inside &our t+eme folder, t+is would s'/e st&lecss in t+e root

FcmdF( Fs'ssF, F@@upd'teF, FHle(HIleJp't+K>>HIleJb'seJn'meKcssFL,

-ou prob'bl& don.t w'nt &our SASS p'rti'ls to be compiled, if &ou.re using

t+e SublimeOnS'/eCuild ./e wrote 'not+er blog 'bout 'dding ' regex to

stop t+is

"'ck'ge =inks(

SASS Textm'te Cundle 6ig+lig+ting1

SASS Cuild

SublimeOnS'/eCuild

JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ

Mm new to using SASS 'nd Sublime Text 2 for Word"ress de/elopment, bot+

're ex'ctl& w+'t need but M/e run into ' problem wit+ compiling m& SASS

into )SS, w+ic+ Mm tr&ing to do using t+e S'ssCuilder p'ck'ge like it w's in

6ongki'tMs guide

T+e issue could be one of t+e following @

cong@le using incorrect output@p't+ seems to be t+e c'se to me

person'll&1

cong le loc'tion needs to be c+'nged

m& coding SASS could possibl& be wrong c'using no c+'nges to occur

on t+e st&lecss le

settings wrong wit+ Sublime Text 2

9& les 're S)SS 'nd t+us will not work wit+ S'ssCuilder


3/4

T+e :nderscores fr'mework stores t+e st&lecss le in t+e root of t+e t+eme

folder so

t+eme>st&lecss

t+is is w+ile t+e s'ss les 're found wit+in ' folder in t+e t+eme folder so

t+eme>s'ss>s'sslesscss

n m& s'ssbuilder@congEson le T+e le used b& S'ssCuilder to compile

into )SS1 currentl& +'/e t+e following code, but Mm unsure w+et+er m&

outputJp't+ is 'ctu'll& t'rgeting t+e st&lecss le w+ic+ is in t+e folder 'bo/e

t+e s'ssbuilder@cong le

{

"output_path": ".../style.css",

"options": {

"cache": true,

"debug": true,

"line-comments": true,

"line-numbers": true,

"style": "nested"

}

}

s t+is t'rgeting t+e correct le, if not w+'t would t+e correct code to m'ke it

do so beD M/e done some Googles but keep coming into p't+ing code for non

rel'ted l'ngu'ges

could 'lso consider mo/ing t+e cong le but t+e 6ongki't guide st'tes it

s+ould be in t+e s'me folder 's t+e SASS les, from w+'t M/e understood

9& code could possibl& be wrong, but 'll M/e done so f'r is Eust some b'sic

/'ri'bles to 'ctu'll& test t+e compiling 'nd t+'t not working w+en tested is

w+& Mm +ere, M/e cop& p'sted ' font weig+t /'ri'ble to 'll rele/'nt les,

indi/idu'll&, in /'rious combin'tions 'nd 'ltoget+er e/en t+oug+ t+e import

s+ould +'/e su%ced @ but e/en t+en it did not upd'te t+e st&lecss in 'n&

c'se


4/4

To get into det'il reg'rding t+e code Mm tr&ing to 'ppl& ' font st&le to 'll

+e'dings, t+oug+ one confusing t+ing is t+'t t+ere 're two t&pogr'p+&scss

les to be found wit+ :nderscores, t+oug+ t+eir contents sort of diNer

T+e SASS /'ri'ble in t+eme>s'ss>/'ri'bles@site>Jt&pogr'p+&scss

Hfont@+e'der@weig+t( 800

T+en in +e'dings w+ic+ if found in t+eme>s'ss>t&pogr'p+&>J+e'dingsscss

h1,h2,h3,h,h!,h {

#ont-$eight: %#ont-header-$eight&

}

T+e ot+er Jt&pogr'p+&scss le dr'ws /'ri'bles from t+e one 'bo/e so presume t+'t 'dding 'not+er /'ri'ble w's t+e t+ing to do

As for Sublime Text 2, Mm new to Sublime Text but M/e seen on tutori'ls 'nd

web 'rticles etc t+'t people 're using code to w'tc+ but Mm unsure

w+ere>w+ic+ progr'm do t+is wit+ is it comm'nd lineD1

+'/e 'lso followed t+e guide on t+e SASS site to get t+e code running so it

s+ouldnMt be t+'t using 4ub& /ersion P3@pQQ1

f t+e issue is S)SS les 'nd not SASS, +ow do compile it t+enD 's M/e

looked t+'t up too but 'm still 's confused

6ope get some cl'rit& on t+is soon, stuck 't t+e rst step 'nd Eust w'nt to

get on 'nd st'rt designingR

To summ'rie, Eust w'nt m& SASS to st'rt w'tc+ing>compiling out to m& )SS

le

Documents

Sass 4 Sublime