Sass

Syntactically Awesome Stylesheets

1
 Introduction
 CSS Preprocessors consist of an authoring syntax and a
program that compiles files written in that syntax to plain CSS files
that browsers can use.
 I.e., you can write a code using the pre-processor’s syntax, and it
will use the code written using the pre-processor’s syntax to
generate a CSS code.

 There are several pre-processors available for CSS. However, SASS

is the most popular in web development.
2
 Sass
Sass (Syntactically Awesome Stylesheets) describes
the style of a document cleanly and structurally, with more
power than flat CSS allows.
Sass lets you use features that do not exist in CSS, like
variables, nested rules, mixins, imports, inheritance, built-
in functions, etc.
To use the Sass pre-processor:
1. Write style instructions using Sass.
2. Compile the Sass code into CSS code.
3. Include the CSS code into the HTML file.
Therefore, you have three files: an HTML file, a SASS file,
3 and a CSS file.
 Takeaway Questions
1. What is Sass and what are some of its benefits over CSS?
2. What are the three steps involved in using the Sass pre-
processor?
3. Why are there three files needed when using Sass (HTML,
SASS, and CSS)?
4. What are some of the features that Sass offers that are
not available in CSS?

4
 Sass Nesting
 With Sass, you can nest CSS rules inside each other instead of repeating
selectors in separate declarations.
 Sass lets you nest CSS selectors in a way which reflects the markup
structure of the HTML.
For example, in an HTML document with a nav element that contains an
unordered list, Sass lets you nest the style rules for the nav, ul, and li
elements to reflect the structure of the HTML markup
<nav>
 <ul>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">SASS</a></li>
 </ul>
</nav>

5
 Cont’d
 style instructions written using  Compiled CSS code
Sass

6
 Takeaway question
<section>
Write Sass code to style the
<header> following elements:
<h1>Main Heading</h1> Set the background color
<nav> of the section element to
 <ul> #f0f0f0.
 <li><a href="#">Home</a></li> Style the header element
 <li><a href="#">About</a></li>
by giving it a border-
 <li><a
bottom of 2px solid #333.
href="#">Services</a></li>
Style the nav element by
 </ul>
</nav> setting the font size to
16px and the text color to
</header> #333.
7
</section>
 Solution
section {
background-color: #f0f0f0;
header {
border-bottom: 2px solid #333;
nav {
font-size: 16px;
color: #333;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
a{
text-decoration: none;
color: #333;
8  } } } }}}
 Referencing Parent Selectors With &
 Sass adds the ability to reference the current parent selector
using the ampersand as a special placeholder.
 For example, within a declaration for links, we can add hover
styles that override their color and border color:
a {
 text-decoration: none;
 color: red;
 &:hover {
 color: maroon;
 border-color: maroon;
 }
}

9
 The ampersand inserts the parent selector, in
this case a,
 style instructions written using  Compiled CSS code
Sass a{
a{  text-decoration: none;
 text-decoration: none;  color: red;
 color: red;
}
&:hover { a:hover {
 color: maroon;  color: maroon;
 border-color: maroon;  border-color: maroon;
 }
}
}

10
 Takeaway question
<section>  Add a hover effect to the
<header> anchor (a) elements inside
<h1>Main Heading</h1> the nav element.
<nav>
 On hover, change the text
 <ul>
 <li><a href="#">Home</a></li> color to #007bff and add a
 <li><a href="#">About</a></li>
bottom border with a
 <li><a
href="#">Services</a></li>
thickness of 2px and color
 </ul> #007bff.
</nav>
</header>
</section>

11
 Sass Variables
A variable is a value you can define once, and then use
multiple times throughout the style sheet.
For example, Facebook uses the same shade of blue
repeatedly on its site, so their developers could create a
variable named “facebook-blue” and use the variable name
for color values.
That way, if they needed to change the shade later, they
need to change the variable value (the actual RGB color)
only in one place.
Sass variable syntax
$variable_name:value;

12
 Example
$facebook-blue: #1877F2;
a{
color: $facebook-blue;
}

13
 Sass @mixin
Where variables let you define and reuse values
throughout the stylesheet, mixins allow you to define and
reuse blocks of styles by using a convention called
mixins.
 A mixin is defined with the @mixin directive.
Sass @mixin Syntax:
@mixin name {
 property: value;
 property: value;
 ...
}

14
 Example,
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}

15
 @include
Once a mixin is defined, it can be referred anywhere we’d
like to insert those styles by using the @include directive.
Sass @include mixin Syntax:
selector {
@include mixin-name;
}

16
 Example,
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
.danger {
@include important-text;
background-color: green;
}

17
 Mixin arguments
Sass mixins can take arguments that get passed to it when
it is called.
Arguments are specified with variables inside parentheses
when defining the mixin
Syntax:
@mixin mixin-name($variable) {
property: $variable;
}

18
 Example,
@mixin title-style($color) {
 font-weight: bold;
 text-transform: uppercase;
 color: $color;
}
When calling the mixin, we can now pass a color to it,
along with the other rules
main h2 {
@include title-style(#c63);
}

19
 Defining defaults for arguments
When using mixin arguments, it is often convenient to define
defaults.
This allows the mixin to be called without arguments, which is
the norm, while still enabling overrides to be passed in.
Example,
@mixin title-style ($color, $background: #eee) {
 color: $color;
 background: $background;}

main h2 { /* you only need to specify the values that

change when you include the mixin */
 @include title-style(#c63);
}

20