scss talk notes

7/30/2019 SCSS Talk Notes

1/15

SCSSSyntactically-awesome Cascading StyleSheets

Much of this content is from http://sass-lang.com

esday, 21 September 11

uch of this content is from http://sass-lang.com
http://sass-lang.com/http://sass-lang.com/


2/15

What is SCSS

A better way to write CSS.

Mostly valid CSS.

A CSS pre-processor

A syntax variant of Sass.



3/15

Why Use SCSS

Variables

Nesting

Mix-ins

Operations and functions



4/15

Variables


allows you to declare variables that can be used throughout your stylesheet. Variables begin with $ and are declared just like properties. They can have any valu

wed for a CSS property, such as colours, numbers (with units), or text.


5/15

More on variables



6/15

Nesting


n when writing CSS, youll have several selectors that all begin with the same thing. For example, you might have #navbar ul, #navbar li, and #navbar li a.

at the beginning over and over again, especially when it gets long.

allows you to avoid this by nesting the child selectors within the parent selector.


7/15

More nesting


ss verbose way of describing the attributes for CSS Properties with lots of values eg.rders.


8/15

Nesting: Parent references


nd this especially useful when your defining link behaviour for a specific class or ID

els like a more connected way to define pseudo classes than potentially having themread around.


9/15

Mix-Ins


ns are one of the most powerful Sass features. They allow re-use of styles properties or even selectors without having to copy and paste them or move them

antic class.

ns are defined using the @mixin directive, which takes a block of styles that can then be included in another selector using the @include directive


10/15

More in Mixins



11/15

More on Mixins &Arguments


real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables. Each of those variab

ned a value each time the mixin is used.

n arguments can also be given default values just like youd declare them normally. Then the user of the mixin can choose not to pass that argument and it will b

efault value.


12/15

Operations & Functions


ddition to just using variable values as theyre defined, you can also modify and combine them using math and useful predefined functions. This allows you to co

ent sizing and even coloration dynamically.

standard math operations (+, -, *, /, and %) are supported for numbers, even those with units. For colors, there are all sorts of useful functions for changing the

saturation, and more.

have used this in the templates to keep colours consistent while still allowing for some variation.


13/15

Reasons Why

Its easy to set up

It helps you keep large amounts of CSS

organised (using partials)

It makes creating compressed production

CSS easy

Really useful for debugging CSS errors

Gateway to Compass


latively easy to set upstall Ruby Gemsstall SASSe a watcher to watch your scss files and compile it to css

-

ows you to have a large number of partials which compile to a single CSS fileduces server requestsn be compressed on compilation reducing size

-

sically because SCSS has to be compiled before it is used by your browser, this gives iility to pick up on any errors that might come up. If youve ever spent ages trying to fissing semi-colon, youll know that this is quite useful.

teway to more advanced front-end development tools like Compass

mething Im looking to start using


14/15

Reasons Why Not...

Lots of files (you need a good text editor -

like Textmate)

You need to use Terminal to set it up

You need to run a watcher to compilechanged SCSS into CSS.


SS partials, like a rails application, use lots of smaller seperate files.od news is that you only have to use as many or as few files as you are comfortable w

you can start with a single file, and fragment out as your project gets larger and mormplex-

avent found any GUIs for SASS. They might exists, but I havent found anyis means you need to use Terminal, and a few things like Ruby Gems.

nce you get through this though you get lots of other cool toys

-

though SCSS is valid CSS, in order to be converted into a CSS file, it needs to be compa watcher.

sically, all this entails is setting up a watcher to run in your terminal which looks foranges in your SCSS file each time its saved. It then recompiles the CSS file for you.


15/15

SCSS IN ACTION

See https://github.com/marcom-unimelb/

The-University-of-Melbourne-Web-

Templates

Sass website - http:///sass-lang.com

https://github.com/marcom-unimelb/The-University-of-Melbourne-Web-Templateshttps://github.com/marcom-unimelb/The-University-of-Melbourne-Web-Templates

scss talk notes

Documents