Scribd
Upload
6 views

Black and Red Tech Programming Presentation

SASS is a preprocessor scripting language that extends CSS by adding features like variables, nesting rules, mixins and more. It allows writing more organized, efficient and reusable code. SASS code is compiled into regular CSS files that browsers can understand.

Uploaded by

Aimee Joy L Hermosora
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Black and Red Tech Programming Presentation

SASS is a preprocessor scripting language that extends CSS by adding features like variables, nesting rules, mixins and more. It allows writing more organized, efficient and reusable code. SASS code is compiled into regular CSS files that browsers can understand.

Uploaded by

Aimee Joy L Hermosora
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

SYNTACTICALLY AWESOME STYLE

SHEET
About SASS

Syntactically Awesome Style


Sheets
SASS makes writing CSS fun again.

Syntactically Awesome Style Sheets (SASS) is a pre-processor


scripting language that is compiled or interpreted into Cascading
Style Sheets (CSS).
Syntactically Awesome
Style Sheets (SASS)
SASS allows to use variables that can be reused
across multiple pages and in different sections.

SASS is a preprocessor scripting language that is interpreted or


compiled into a Cascading Style Sheets (CSS) file. It is an
extension of CSS which adds nested rules, variables, mixins,
selector inheritance, and more. SASS generates well-formatted
CSS and makes code maintainable.
DISCOVERING SYNTACTICALLY
AWESOME STYLE SHEETS
Chart showing growth of Sass popularity

The following chart shows the increasing popularity of Syntactically Awesome Style Sheets
(Sass) over the years. Sass is a preprocessor that adds advanced features like variables,
nesting, and mixins to standard CSS. It makes writing stylesheets easier, faster, and more
maintainable, and is a popular choice for many web developers today.
DISCOVERING SYNTACTICALLY
AWESOME STYLE SHEETS
01
EXPRESSIVE AND EFFICIENT 02
SASS is a powerful styling language that
enables designers to simplify CSS coding FLEXIBLE AND MODULAR
SASS provides a range of tools that extend the
functionality of CSS and enables the creation of
scalable and modular stylesheets.
EFFICIENCY AND ORGANIZATION
Syntactically Awesome Style Sheet (SASS) is an extension of
Cascading Style Sheets (CSS) that enables developers to write
more concise and maintainable code.

REUSE AND MODULARITY


ALL ABOUT SASS aids in efficiency and organization by providing
functionalities like variables, mixins and nested rules, as well
SASS as allowing developers to split their code into smaller, more
manageable files.

EXTENSIBILITY AND COMPATIBILITY


SASS allows developers to reuse code and create modular
stylesheets, which can be easily updated and modified without
affecting other parts of the codebase.
EFFICIENCY AND ORGANIZATION
Syntactically Awesome Style Sheet (SASS) is an extension of
Cascading Style Sheets (CSS) that enables developers to write
more concise and maintainable code.

REUSE AND MODULARITY


ALL ABOUT SASS aids in efficiency and organization by providing
functionalities like variables, mixins and nested rules, as well
SASS as allowing developers to split their code into smaller, more
manageable files.

EXTENSIBILITY AND COMPATIBILITY


SASS allows developers to reuse code and create modular
stylesheets, which can be easily updated and modified without
affecting other parts of the codebase.
F E A T U R E S O F

SYNTACTICALLY AWESOME
SYNTACTICALLY AWESOME
STYLE SHEETS
STYLE SHEETS
SALFORD & CO.

Store valued under the variable name and allow it to be reused


VARIABLES across the stylesheet so if the variable’s value is changed all
VARIABLES occursions of the variable the dollar sign must be placed before
VARIABLES the name.

For example to define a variable named


‘mainColor” with the value of ‘#2583e8’, the // Variable
following statement would be used: $mainColor: #2583e8;t

Note: You can use // to define comments in Sass as opposed


to CSS’s /**/ regular comment.
SALFORD & CO.

are separate Sass files that can be imported that allow you to easily

P ARTIALS separate your various styles. To make a file partial ,it must start with an
underscore (_). the generic form of a partial is
_filename.scss or
_filename.sass
To import the partial into your main stylesheet,
the @import statement can be used.
For example the following code would be @import “buttons”;
used to import a partial callled buttons. Note: You dont need to include
underscore or file extension when importing partial.
S
NE T
NSASS ALLOWS YOU TO NEST CSS SELECTORS IN A WAY THAT
GIVES YOUR STYLING VISUAL HIERACHY SIMILR TO HTML.
THIS HAS THE ADDED BENEFIT OF ORGANIZING YOUR CSS AND
MAKING IT MORE READABLE. FOR INSTANCE, THE FOLLOWING CODE
nav {
height: 40px;
width: 100vw;
background: #f1f1f1;

ET I
IS SIMPLE STYLING OF A NAVIGATION BAR IN CSS.

S
}
nav ul {
In SCSS, This can be written as the code below:
nav { height: 40px; display: flex;
width: 100vw; You could even nest elements like list-style: none;
background: #f1f1f1; the list item further
margin-left: 10vw;

SNN
ul { however be careful how
display: flex; }

I
nested elements are.
list-style: none; Overly nested rules result in nav li {
margin-left: 10vw; over-qualified CSS that is margin: 0 10px;
}
harder to maintain and is considered }
li {
by many as a bad practicet
margin: 0 10px; nav a {

T
}
color: darkgrey;
a{

G
color: darkgrey; text-decoration: none;
text-decoration: none; }
}
}
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor
prefixes that exist.
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
It helps keep your Sass very DRY.
You can even pass in values to make your mixin more flexible.
Here’s an example for theme.

To create a mixin you use the


@mixin directive and give it a name.
We’ve named our mixin theme.
We’re also using the variable $theme

MIXINS
inside the parentheses so we can pass
in a theme of whatever we want.
After you create your mixin, you can
then use it as a CSS declaration
starting with @include followed by

MIXINS
the name of the mixin.
LOOPS
similar classes or ids.
LOOPS
Sass allows to iterating over variables using @for, @each and
@while ; which can be used to apply different styles to elements with

$squareCount: 4
@for $i from
1 to
$squareCount
#square-#
{$i}
background-color: red
width: 50px * $i
height: 120px / $i

You might also like