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 Sass 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

  • enables you to create styling code that resembles an HTML hierarchy.
  • SASS enables you to consolidate everything into a single class and lessen repetition.

CSS Code Example

.font .title { 

	font-family: "Times New Roman", serif; 

	font-size: 3em;

}

.font .text {

	font-family: "Times New Roman", serif; 

	font-size: 1em;

}

SASS Equilvalent

.font {

	.title {

	font-family: "Times New Roman", serif;

	font-size: 3em;

	.text {

	font-family: "Times New Roman", serif;

	font-size: 1em;/div>
            
}

            
}

HTML Example

<div class="font">

	<div class="title">

	<p>Title</p>

	</div>

	<div class="text">

	<p>This is some text</p>

	</div>

</div>

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}
.a {
    .c {
        color: blue;
    }
    .b {
        color: green;
    }
}

Extend/Inheritance

What are some similarities that the buttons share? What are the differences?

  • If you wish to reuse bits of code in different selections, SASS lets you utilize the @extend to inherit feature.
  • The buttons' dimensions, height, and text are all the same, yet their backgrounds change.
  • With CSS, you would need to specify properties for individual buttons, whereas SASS allows you to specify differences in a single selector.

Placeholder

%class-name { 

}

Creating a Class

%buttonLayout {

	width: 15em;

	height: 15em;

	color: #ffffff;

	margin-right: 10%;

}

Button Code

.gettingStartedButton, .nestingButton, .extendButton {

	@extend %buttonLayout;

}

Styling

.gettingStartedButton {

	background: radial-gradient( #1539db, #8a8ce6);

}

.nestingButton {

	background: radial-gradient( #3a9fa7, #8ae0e6);

}

.extendButton {

	background: radial-gradient( #643aa7, #d78ae6);

}

Mixin

  • Additionally, you can use mixins to place styling guidelines without variables.
  • similar to "extend" in that it generates reusable code templates and accepts parameters to enable the creation of dynamic style

Styling the Button

@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.

from asyncio import mixins


@mixins custom-design($color, $font-size) {
  background-color: $color;
  color: $color;
  font-size: $font-size;
}
.customDesignTest {
  @include custom-design(blue, 20px);
}

Function

SASS Function

@function name(parameters) [
    //code
    @return value;
]

Invert Function

@function sassInvert($r, $g, $b) {
    
    //the "$" creates new functions in sass
	$newColor: rgb(255 - $r, 255 - $g, 255 - $b); 

	@return $newColor;

}

Specify the function name with parenthesis

.invert {

	background-color: sassInvert(0, 0, 0);

	color: sassInvert(211,202,202);

}

Import

  • There is a mechanism to break code into many files and import them into one file, which helps keep SASS files from becoming cluttered.
  • To put the styling for function.html in another SASS file, follow these steps: first, create a directory inside the directory named _sass; second, create another SASS file. as in the case of functionStyle.scss
  • Fill up the file with your Sass code. When finished, return to style.scss and import the file using the syntax @import "file-name".

SASS Hacks

  1. Take notes and complete the mini-hacks. (0.9)

  2. Complete the quiz questions and provide your answers in this notebook. (0.9)

  3. Use SASS to create something that uses either extend or mixin. (0.9)

  4. 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. Systematically Awesome Sample 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

Hack 

@mixin responsive-text {
  font-size: 16px;
  @media (min-width: 768px) {
    font-size: 20px;
  }
  @media (min-width: 1024px) {
    font-size: 24px;
  }
}

.testResponsiveText {
  @include responsive-text;
}

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

.danger {
  @include color-text;
  background-color: green;
}