Intro to Sass

Devan Huapaya /  @devanIpsum

what is sass?

Syntactically Awesome Stylesheets

sass-lang.com

Things Sass Can Do

  • Variables
  • For Loops
  • Functions
  • Import Other Files
  • Data structures: lists, booleans, Maps
  • It's Turing Complete!

Things Sass Can't Do (on it's own)

  • Load itself into a file
  • Run in Browser
  • Autoprefixing
  • Hotreloading

Installation & Build Tools

Gulp

Webpack

Wordpress

Code Pen

Gulp


// Compile SCSS into CSS
gulp.task('styles', function() {
  return gulp.src('./assets/styles/style.scss')
  .pipe(gulp.dest('./_site/assets/css'))
  .pipe(sass())
});

Gulp


// Compile SCSS into CSS & auto-inject into browsers
gulp.task('styles', function() {
  return gulp.src('./styles/style.scss')
  .pipe(sass())
  .pipe(autoprefixer({
      browsers: ['last 2 versions']
  }))
  .pipe(nano({discardComments: {removeAll: true}}))
  .pipe(gulp.dest('./_site/assets/css'))
  .pipe(browserSync.stream());
});

Webpack


...
loaders: [
  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  }
]
...

Webpack


...
loaders: [
  {
    test: /\.scss$/,
    loader: 'style!css?modules&importLoaders=2&sourceMap!
        autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
  }
]
...

Wordpress

It is possible 😉

Sass Basics

Variables

Nesting

Ampersand

Media Queries

Mixins

Maps & Loops

Math Operators

Color Functions

Importing

Variables

See the Pen Intro to Sass by Devan Huapaya (@imdevan) on CodePen.

Nesting

See the Pen Intro to Sass - Nesting by Devan Huapaya (@imdevan) on CodePen.

Ampersand

See the Pen Intro to Sass - Ampersand by Devan Huapaya (@imdevan) on CodePen.

Media Queries

See the Pen Intro to Sass - Media Queries by Devan Huapaya (@imdevan) on CodePen.

Mixins

See the Pen Intro to Sass - Mixins by Devan Huapaya (@imdevan) on CodePen.

Maps & Loops

See the Pen Intro to Sass - Maps & Loops by Devan Huapaya (@imdevan) on CodePen.

Math Operators

See the Pen Intro to Sass - Math Operators by Devan Huapaya (@imdevan) on CodePen.

Color Functions

See the Pen Intro to Sass - Color Functions by Devan Huapaya (@imdevan) on CodePen.

Importing

Within Main.scss 


@import 'layout/flex';
@import 'layout/grid';
@import 'components/typography';
@import 'components/buttons';
@import 'utility/margins';
@import 'utility/padding';

More Resources