SASS
Why SASS?
SASS is an improvement on CSS in that there are methods of abstraction. It is a stylesheet language that is compiled into CSS, which means that SSass will translate the Sass code you wrote into CSS, which is what your web browser can read.
SASS vs SCSS
As you learn about Sass, you might notice something called Scss. They are basically the same thing except that Scss uses curly braces and semicolons to distinguish between lines. Sass uses indentation and newlines instead.
We will be teaching the Scss syntax because it is more commonly used.
Getting started
A easy way to write SASS and have it preprocessed into CSS is by using a Jekyll powered website, such as GitHub pages or Fastpages.
The first step is to clone a GitHub pages repo, such as this one.
Within the repository, head over to assets/css/, and open style.scss.
This is where you can create your SASS code.
To see your CSS-translated SASS code, head over to _site/assets/css/style.css
Note: You will need to run bundle exec jekyll serve before the _site directory appears.
The first few hundred lines are used to style Github's theme. Make sure to scroll to the very bottom to see the SASS code that you wrote, which is in the form of CSS.
Nesting
- Selectors share the same element in CSS
CSS: ``` .font .title {
font-family: "Times New Roman", serif;
font-size: 3em;
}
.font .text {
font-family: "Times New Roman", serif;
font-size: 1em;
}
- SASS equivalent:.font {
.title {
font-family: "Times New Roman", serif;
font-size: 3em;
.text {
font-family: "Times New Roman", serif;
font-size: 1em;/div>
} ```
- SASS nesting allows you to wrtie styling code in a way that looks like HTML hierachy
- Decrease repitition
Extend/Inheritance
What are some similarities that the buttons share? What are the differences?
- They are the same height
- Same format
- They have the same action when you hover over them
- They are different colors
- They have different text
- Different width based on length of text
To reuse a portion of CSS code in multiple selectors:
- CSS: copy paste code each time
SASS: @extend to inherit the code
For example, %buttonLayout placeholder class, being a template for buttons ``` %buttonLayout {
width: 15em;
height: 15em;
color: #ffffff;
margin-right: 10%;
}
- Selector create for each button with @extend %class-name.gettingStartedButton, .nestingButton, .extendButton {
@extend %buttonLayout;
}
- Different background color, each one unique.gettingStartedButton {
background: radial-gradient( #1539db, #8a8ce6);
}
.nestingButton {
background: radial-gradient( #3a9fa7, #8ae0e6);
}
.extendButton {
background: radial-gradient( #643aa7, #d78ae6);
} ```
Mixin
- Background of buttons coded with background: radial-gradient();
- Another way to code background is use of a mixin
- Similar to extend, creating code template to be reused with ability to take in parameters so you can style uniquely and dynamically
SASS, @mixin rule taking in two colors as parameters ``` @mixin buttonLayout($innerColor, $outerColor) {
background: radial-gradient($innerColor, $outerColor);
}
- Call mixing with @include after creating selector.gettingStartedButton {
@include buttonLayout(#1539db, #8a8ce6);
}
- Styling rules that don't take in variables wiithin mixin@mixin buttonLayout($innerColor, $outerColor) {
background: radial-gradient($innerColor, $outerColor);
width: 15em;
height: 15em;
color: #ffffff;
margin-right: 10%;
border-radius: 2em;
} ```
Mini-hack
Write out a mixin in SASS that takes in a color and a font size as the parameter. Within the mixin, set the background color and font color to the color parameter, and set the font size to the font size parameter. Then create a selector that calls the mixin, and pass in a color and font size of your choice as the arguments.
@mixin button($color, $fontSize) {
background-color: $color;
font-size: $fontSize;
}
.theButton {
@include colored(#000000, 18px);
}Function
SASS function format: ``` @function name(parameters) {
//code
@return value;
}
- Make function with @function command
- Specify function ame
- Inside parenthsesis, specify arguments
- For example, function called sassInvert:@function sassInvert($r, $g, $b) {
$newColor: rgb(255 - $r, 255 - $g, 255 - $b);
@return $newColor;
} ```
SASS Hacks
Take notes and complete the mini-hacks. (0.9)
Complete the quiz questions and provide your answers in this notebook. (0.9)
Use SASS to create something that uses either extend or mixin. (0.9)
Extra credit: Research other SASS features and blog about what you learned or add to your SASS project with any extra features not covered in this lesson. More points will be given if both are done.
Quiz Questions
- What is SASS?
b. A scripting language that has many styling operations
- What is the difference between SASS and SCSS?
a. They are very similar in their function, but their syntax is slightly different
- What is an example of an advantage of using SASS over just CSS?
a. SASS has more functions than CSS
- What does SASS stand for?
b. Syntactically Awesome Style Sheets
- Which of the following is NOT an example of an available SASS directive?
d. compute
- The __ directive is used to share rules and relationships between selectors.
b. extend
- What is “@___” called?
b. Directive
Using SASS
- Extend and mixin to achieve same result: button with blue background color and white text color
- "button" class, base style set as blue background color and white text color
- First example: CSS class extend from "button" class, creating "special-button" class that adds red border to the button
- Second example: SASS mixin, "button-style" defines blue and wwhite colors inluded in both "button" and "special-button", "special-button" also adds red border
button {
background-color: blue;
color: white;
}
.special-button {
@extend button;
border: 1px solid red;
}
OR
@mixin button-style {
background-color: blue;
color: white;
}
button {
@include button-style;
}
.special-button {
@include button-style;
border: 1px solid red;
}