CSS · Sass · Viking Code School

Sass with Viking Code School

Sass is a CSS preprocessor that helps eliminate repetition in stylesheets through nesting and mixins. It also add functionality through the use of varaibles and operators. The Sass course of Viking Code School’s advanced prep work built atop the CSS foundations from the previous course and also described best practices for writing Sass.

The following are a series of questions that cover some of the topics of the Sass course that I answered to review the material and test my knowledge.

Introduction to SASS

What does SASS stand for?

Sass stands for syntactically awesome stylesheets.

What is meant by a preprocessor?

Sass is a CSS preprocessor, meaning it takes a file with Sass styles and compiles it into a valid CSS file.

What advantages does SASS have over CSS?

One of the greatest advantages of Sass is that it allows you to nest styles, making stylesheets more concise and less repetitive. Sass also provides the ability to use variables, complete simple math operations, create mixins, and use extends to build on existing styles.

SASS Features

What file extension does Sass use?

.scss is the file extension for Sass.

What is another popular CSS preprocessor? Why do we prefer Sass?

LESS is another CSS preprocessor, but Sass is much more widely used by programmers.

How do you go about installing and running Sass?

Sass is a Ruby gem that is installed via the command $ gem install sass. Sass files are then converted to CSS by the command $ sass input_filename.scss output_filename.css

What is the advantage of nesting selectors in Sass?

Nesting makes your style sheets easier to read and less repetitive, applying the DRY (don’t repeat yourself) principle.

What is the syntax for creating a variable in Sass?

Variables are created using the $ dollar sign prefix. The variable name and value are separated by a colon. The data types that are supported include numbers, strings, colors, and booleans.

What is the advantage to using Sass operators? How does this differ from the CSS calc() function?

Sass allows the use of math operators such as +, -, *, /, and %. Manipulations of widths, heights, and other values can be conducted using these operators. Since Sass allows for variables, these can also be used with operators. CSS does not include variables and the CSS calc() function can only use the +, -, *, and / operators.

What is the @import directive and what does it do?

The @import directive is used to combine separate Sass files into a single file that can then be compiled into CSS.

What is a @mixin? How can you reuse code with Sass mixins?

Mixins are reusable pieces of CSS. A portion of CSS can be defined with the @mixin statement and a name then be reused in another style by using @include with the mixin’s name.

How would you go about using Sass inheritance?

You can include styles from one class in another simply by using the @extend statement, followed by the name of the class to be extended, within the selector of the second class.

What are a few Sass best practices?

  • 1. Structure your Sass projects with subfolders and partial files to organize code semantically.
  • 2. Avoid vague variable names by using ones that are meaningful to the project.
  • 3. Use nesting and looping to your advantage.
  • 4. Keep you @include and @extend statements above the raw CSS.
  • 5. Use $kebab-case when naming variables, functions, and mixins.

Why is it generally a best practice to use $kebab-case in Sass?

CSS uses kebab-case and not camelCase, so it is best to use it in Sass as well.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s