Introduction to SASS (Syntactically Awesome StyleSheets

Posted on Updated on

At 3:15pm On 3/8/17 I attended Introduction to SASS (Syntactically Awesome StyleSheets presented by Michael R. Schore at the 2017 NCCIA Conference located at Craven Community College in New Bern, NC.
maintainable-rwd-feat

Introduction to SASS (Syntactically Awesome StyleSheets

Michael Score is an Asst. Professor of Web Development at Wake Technical Community College in Raleigh, NC. SASS, as I understand it allows CSS to use variables. It will be interesting to see how this can be used.

We’ve been told by several advisors through the davisory committee that this is the direction people are moving with free, opensource materials.

 

 

  • What is SASS

what is sass

Sass is an extension of CSS. According to the language wibesite– Sass is the most mature, stable, powerful professional grade CSS extension language in the world. Variables, loops, conditional statements, etc. are not usable, but we often wish it was.

state of the web

THings are changing so rapidly, that items which are hip and reliable today may no longer be usable in a short lifetime

Why do we use CSS?

Tag designs were to code and adjust. External stylesheets were built to keep it out of the flow of your documents and keep a semantic vision available.

Semantic HTML>/h2>
Writing semantic HTML brings a wide range of benefits

  • ease of use
  • accessibility
  • search engine optimization
  • repurposing

SASS vs SCSS

Syntactically awesome stylesheets vs Sassy CSS
SCSSS (sassy CSS) is an extension of the syntax of css. This means that every valid CSS stylesheet is a valid SCSS file.

Pros of using SASS

Sass syntax is concise, indented syntax removes the need for semicolons and braces. Sass syntax is easier to read. because it s rules of about indentation its hard to write unreadable SASS. THe syntax doesn’t complain about missing semicolon

example:

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
border-color: $blue
color: darken($blue, 9%)

.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue

pros of using SCSS

scss is logically grouped, it can be compressed. SCSS encourages proper nesting of rules and encourages more modular code with @extend. Curly braces are “ugly” and help me recognize when my code is too deeply nested and force me down the path of writing more modular code. SCSS allows me to write better inline documentation. COol tools currently exist to use this with existing CSS systems

example:

/* SCSS */
$blue: #3bbfce
$margin: 16px

.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

Pre-reqs for working with SASS

Working knowledge and experience with HTML, HTML5, CSS, CSS3, Comfortable with installing software and configuring computers, looking for RUBY

SASS Setup

Sublime text 2 or 3 is a good working project working area. Install package control. Install SASS and SCSS support packages

Ruby comes next. Rubyinstaller.org . SASS is installed as a Ruby Gem.

Features

  • Variables like light and dark can be used to work with if/then statements.
  • Partials allow you to pull out sections from SCSS and import them. (css partials all have underscore in name: _short.css) These are used like includes in PHP
  • Mixins create reausable styles. These start with @ symbols.
  • Imports & Media Queries.
  • Functions! generate from the codes actual CSS files available to your viewers
  • Inheritance
  • conditionals allow if/else if statements
  • loops!

Conclusions

Sass offers a great deal of functionality and power to the web page designs. Minimal change in thinking once the developer has a handle on CSS. Programmers can appreciate the features of Sass SCSS. Tools are powerful and widelu used.

Problem: How to implement this complex capability in our web tech program

Advertisements