scss talk notes
TRANSCRIPT
-
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/ -
7/30/2019 SCSS Talk Notes
2/15
What is SCSS
A better way to write CSS.
Mostly valid CSS.
A CSS pre-processor
A syntax variant of Sass.
esday, 21 September 11
-
7/30/2019 SCSS Talk Notes
3/15
Why Use SCSS
Variables
Nesting
Mix-ins
Operations and functions
esday, 21 September 11
-
7/30/2019 SCSS Talk Notes
4/15
Variables
esday, 21 September 11
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.
-
7/30/2019 SCSS Talk Notes
5/15
More on variables
esday, 21 September 11
-
7/30/2019 SCSS Talk Notes
6/15
Nesting
esday, 21 September 11
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/30/2019 SCSS Talk Notes
7/15
More nesting
esday, 21 September 11
ss verbose way of describing the attributes for CSS Properties with lots of values eg.rders.
-
7/30/2019 SCSS Talk Notes
8/15
Nesting: Parent references
esday, 21 September 11
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.
-
7/30/2019 SCSS Talk Notes
9/15
Mix-Ins
esday, 21 September 11
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
-
7/30/2019 SCSS Talk Notes
10/15
More in Mixins
esday, 21 September 11
-
7/30/2019 SCSS Talk Notes
11/15
More on Mixins &Arguments
esday, 21 September 11
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.
-
7/30/2019 SCSS Talk Notes
12/15
Operations & Functions
esday, 21 September 11
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.
-
7/30/2019 SCSS Talk Notes
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
esday, 21 September 11
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
-
7/30/2019 SCSS Talk Notes
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.
esday, 21 September 11
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.
-
7/30/2019 SCSS Talk Notes
15/15
SCSS IN ACTION
See https://github.com/marcom-unimelb/
The-University-of-Melbourne-Web-
Templates
Sass website - http:///sass-lang.com
esday, 21 September 11
https://github.com/marcom-unimelb/The-University-of-Melbourne-Web-Templateshttps://github.com/marcom-unimelb/The-University-of-Melbourne-Web-Templates