Scss talk CSS Meetup

Content Outline
❏ What is SCSS
❏ Using SCSS in Visual Studio Code
❏ Linking SASS to Html
❏ SASS Variable
❏ Extending/ Inheritance
❏ Operators
❏ Mixins
❏ Import
❏ Demo

SCSS
“ Sassy Cascading Style Sheets (SCSS) uses block formatting like that of CSS. It
uses braces 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. “

Integrating SCSS with IDE (VS Code)
❏ 1. Install a SASS or Less Transpiler. Use either the Node-sass or less node.js
module
npm install -g node-sass less
❏ 2. Create a simple SASS or Less File
❏ 3. Create Tasks.json file
❏ 4. Run the build task.

Linking SCSS to Html file
<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script
src="less.js" type="text/javascript"></script>
- Adding these 2 lines of code to link the less stylesheet to the html file.

Variables in SCSS (1)
❖ Variable names in SCSS start with $
❖ A variable declaration looks a lot like a property declaration: it’s written
<variable>: <expression>.
❖ Sass variables are imperative, which means if you use a variable and then
change its value, the earlier use will stay the same

❖ Sass variables, like all Sass identifiers, treat hyphens and
underscores as identical
❖ Sass provides the !default flag. This assigns a value to a variable
only if that variable isn’t defined or its value is null. Otherwise, the
existing value will be used. This way, users can set variables
before they import your library to customize its behavior.

❖ Variables declared at the top of a style sheet are global (Scoping)
❖ If you need to set a global variable’s value from within a local scope (such
as in a mixin), you can use the !global flag. A variable declaration flagged
as !global will always assign to the global scope. It cannot be used to
declare a new variable.
❖ The variable-exists() function returns whether a variable with the given
name exists in the current scope, and the global-variable-exists() function
does the same but only for the global scope.

SCSS (Extending/Inheritance)
Using @extend lets you share a set of CSS properties from one selector to
another.

Operators
❏ Colon : operator to define a variable. E.g.: $main-color: blue; (assigning a
color)
❏ Addition (+) operator can be used to concatenate string
❏ Equality Operator ( == ) can be used to test the type of the $font argument.
❏ Modulus Operator (&) can set the property of an element by evaluating an
expression
❏ Comparison Operator can be used to compare numbers
❏ Logical Operators allow us to test multiple conditions within a conditional
expression.
❏ Addition Operator allows us to concatenate strings.

Mixins
❏ Adding groups of CSS Declarations to reuse in a website.
❏ Values are passed in to make mixins more flexible.
❏ To create a mixin, use a @mixin declaration and name the mixin.
❏ A variable $property can be used for us to pass in our mixin of whatever
effects we want to achieve.
❏ After creating the mixin, we can use it as a CSS declaration starting with
@include.

Import (1)
Combine imported file and target file to only render a single CSS file onto the
browser.
Renders your page directly (multiple http requests in internet browsers in CSS)
// styles.scss example of import
@import ‘home/code’, ‘home/lists’;
- Mixins, Variables and functions from file are made available and all its
CSS is made available when the @import is declared.
.

Import (2)
SCSS imports file by URL, not by file path.
Users provide load path on implementation of imports.
Imports are always resolved relative to the current file first though. Load paths
are used only if the files imported are not found.

Final Tips
“ SCSS is only powerful when you use a CSS preprocessor to convert SCSS files
to CSS files. CSS files determine how your website look. “

More Reading
1. Theming with SASS: An SCSS Tutorial by Fernando Rivas
2. SASS Documentation on SASS-lang website
3. SASS Guidelines by Hugo Giraudel (https://sass-guidelin.es)
4. 10+ Best Tools and Resources to Compile & Manage SASS, LESS, and Stylus
– CSS Preprocessors by Taisiya (Graygrids Article)
5. Leaner Style Sheet (LESS) documentation (http://lesscss.org/)
6. Custom Importers of node-sass (https://sass-lang.com/documentation/at-
rules/import)

Scss talk CSS Meetup

More Related Content

What's hot (7)

Similar to Scss talk CSS Meetup (20)

Recently uploaded (20)

Scss talk CSS Meetup

Editor's Notes