Top Tutorials To Learn SASS and SCSS
For Beginners to Advanced
Sass (Syntactically Awesome Stylesheets) is a stylesheet scripting language, first emerging in 2007 and now used all over the web. Industry approved, compatible with all versions of CSS, and with more features and abilities than another CSS extension language, it’s the most stable and powerful language of its kind in the world. By mastering Sass, you’ll be able to create effortless and beautiful websites with a sleek, professional look.
Power up your website design skills with Sass & SCSS — the powerful CSS pre-processor.
Sass allows to write more maintainable and more concised CSS Sass allows to use great CSS features with superpowers. Some features include: Writing and defining Variables Clear inheritance with Nested Rules Using Mixins as re-usable objects Doing maths with the operators (+, -, *, /) and functions.
This course is the complete masterclass for Sass & SCSS development. It covers all you need to know about this awesome technology including:
i. how to use Sass / SCSS to create more flexible designs in less time and generate CSS code from them
ii. how to use variables to store colors, sizes, fonts and more, to avoid repetition and make your designs more flexible and reusable
iii. how to perform calculations right inside your Sass & SCSS code to create responsive and flexible layouts
iv. how to use mixins and imports to reuse your existing designs and finish new projects in no time
v. how to use inheritance in Sass to avoid duplicating code and the nasty bugs that come with it
vi. how you can use Sass to write scalable CSS code even for big projects
You will also learn how to use Sublime Text 3, one of the most popular lightweight text editors out there, confidently and write your code with lightning speed.
During the course, you will create useful code snippets in Sass that you can use in future projects to double your development speed — and you will have all the tools you need to create more such snippets to enhance your productivity even further and make clients happy.
You can test what you learned in several quizzes and by coding along while we create a library of powerful code snippets.
In this course you will,
- make CSS files compressed automatically
- use SASS’s language syntax
- create a professional clean project
- create responsive web design using SASS
If you want to write clean and easy to maintain code or you do not know what SASS is, then you are in the right place.
After this course you will write your CSS faster — your code will be clean and easy to maintain.
Guide to Learn Sass, Improve Your Workflow and Style Time-Saving, Clean Websites.
This course covers:
- Design & code custom websites much quicker than before
- Style websites using Sass with confidence and ease
- Use Sass in Real World Projects
- Install & compile Sass quickly and easily with the Command Line (and other tools)
- Optimize your Sass Workflow with Frameworks like Compass, Bourbon and Neat
- Style a beautiful Portfolio Landing Page (that you can use as YOUR portfolio!)
- Choose a code editor that works best for your environment and workflow
- Understand best practices for styling scalable websites
- Use and understand Variables, Partials and Imports to make your stylesheets incredibly flexible and easy to navigate
- Code Mixins in order to save keystrokes and recycle CSS styles
- Take advantage of Extends in order to share chunks of CSS properties between selectors
- Understand where to learn more, and extend your knowledge of Sass
- Access a community of like minded designers, coders and students
The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.
This course covers:
- Tons of modern CSS techniques to create stunning designs and effects
- Advanced CSS animations with @keyframes, animation and transition
- How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
- CSS architecture: component-based design, BEM, writing reusable code, etc.
- Flexbox layouts: build a huge real-world project with flexbox
- CSS Grid layouts: build a huge real-world project with CSS Grid
- Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
- Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
- Responsive images in HTML and CSS for faster pageloads
- SVG images and videos in HTML and CSS: build a background video effect
- The NPM ecosystem: development workflows and building processes
You will learn complex CSS animations, advanced responsive design techniques, flexbox layouts, Sass, CSS architecture, fundamental CSS concepts, and so much more.
After finishing this course, you will:
1) Be up to speed with the most modern and advanced CSS properties and techniques;
2) Have mastered the cutting-edge layout technologies Flexbox and CSS Grid;
3) Be ready to build responsive layouts for all kind of devices and situations;
4) Truly understand how CSS works behind the scenes;
5) Be able to architect large CSS codebases for reusability and maintainability using Sass.
This course is massive, coming in at 20+ hours. Here is exactly what ou will learn:
• Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties;
• Advanced CSS animations with @keyframes, animation and transition;
• Advanced CSS selectors, pseudo-classes and pseudo-elements required for modern CSS development;
• How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes and stacking contexts;
• CSS architecture: The 7–1 rule, component-based design, the BEM methodology, writing reusable, maintainable and scalable code;
• Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more;
• Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS and managing media queries;
• The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix and compress CSS files;
• Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities and touch capabilities;
• Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support;
• Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching, art direction;
• SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices;
• Videos in HTML and CSS: building a background video effect;
• Flexbox layouts: main concepts, introduction to both flex container and flex item specific properties, advanced positioning techniques applied to a huge real-world project;
- CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project.
Supercharge your CSS! Unleash the Advantages of CSS Pre-processing with SASS and SCSS.
- Set up a SAAS project
- Understand and apply SAAS nesting
- Use and apply the concept of Segmentation
- Integrate SAAS Variables in to your Work
- Understand SCSS Mixins and SCSS Functions
- Create your Own Mixins
- Know and apply Best Practices
Stop wasting time tearing your hair out over confusing or poor performing CSS.
Take your CSS to the next level & Speed up your web development process with Sass.
After this course,
- You will be able to write and easily maintain object-oriented CSS with variables, mixins and functions
- You will speed up your web development process with more work done, less code and less repetition
- You will know how to write your own custom mixins to build even faster
- You will understand how to perform mathematical calculations directly in your stylesheet with the operators and the functions
Sass (Syntactically awesome stylesheets) is a CSS preprocessor.
And, it is actively supported by a large community of developers to stay ahead.
While CSS is a great language, it has some limitations.
Every web developer or front-end UI engineer should use a pre-processor language over traditional CSS
In SASS — Beginner Crash Course, you will discover the power of Sass and learn to take your CSS to the next level. With several demonstrations and examples. you will see the power of the pre-processor language.
Learn Sass, the CSS pre-processor extension that will make your life a little easier.
- Build alert panels in Sass
- Configure Sass for development
- Master CSS efficiency with Sass
Compile and work with the core features of Sass Learn a stylesheet language compatible with any CSS version Organise your CSS to make it more readable Configure Sass for development and master CSS efficiency
This course is intended for web designers, web developers, and anyone else who already has a working knowledge of CSS. It does not cover Sass installation or configuration of a text editor, but instead jumps straight ahead to working with practical, real world examples of Sass in action. Therefore this course is not suitable for students who have limited or no knowledge of CSS.
During this course you will get to grips with core features of Sass like variables, inheritance, nesting and mixins, amongst others. You will learn how to build alert panels, how to configure Sass for development, and how to master CSS efficiency with Sass, making your code more readable and more concise.
After finishing up this course you will end up with a solid knowledge of Sass, which you will be able to implement immediately. And better yet, you will have rediscovered what made CSS fun in the first place!
Learn to write faster and effective CSS with SASS, the ultimate CSS pre-processor extension.
The course cover following topics,
- Install SASS
- Install Visual Studio 2015 Community (Free)
- Install Visual Studio Code (Free)
- Learn how to write and compile SASS on your Mac and Windows PC
- Write elegant and organized code in SASS
- Write SCSS pages
- Import SCSS files for optimal code compilation
- Learn SCSS language syntax
- Create a organized and professional web project structure
- Create mixins, variables, and functions in SCSS
- Implement responsive design techniques with SASS
- Utilize Inheritance and conditional statements in SCSS
Web developers and designers work with CSS daily in all of there web activities and projects. CSS can be time consuming, complicated, and chaotic. SASS is the solution to all of your CSS problems. SASS enables you to build upon your existing CSS knowledge base without having to sacrifice time.
In this course, you will learn how to write faster and more maintainable CSS by utilizing SASS. You will learn how write and compile SASS in Visual Studio 2015 on your Windows OS and Visual Studio Code on your Mac OS X.
Learn to supercharge your CSS with Sass. A easy to follow course that tells you everything you need to know about Sass.
This Sass training course from Infinite Skills teaches you everything you need to know about this CSS stylesheet extension language. This course is designed for the absolute beginner, meaning no prior knowledge of Sass is required, however a fundamental understanding of CSS and HTML are recommended. You will start by learning how to install and use Sass on both a Windows and Mac OS, then jump into learning about variables and nesting. This video training course will teach you about partials, Sass Mixins, and advanced inheritance techniques. Finally, you will learn how to integrate Sass with WordPress and Ruby on Rails.
Improve your SASS skills by learning the benefits of the Compass framework, which has many time-saving useful utilities
The course covers following topics,
- Install Compass
- Integrate Compass with SASS
- Explore Compass Framework
- Use and Know what are Sprites
- Know how to create vendor prefixes using mixins
- Integrate Compass and SASS inside great IDE so the process of compilation is gonna be automated and you won’t lose your precious time
- The mixins/functions
Compass is a framework (library) for SASS which means that inside of it you can find lots of useful utilities -that will be shown to you inside this course.
These utilities can save your time with developing your websites. By using Compass, you can use various functions/mixins created by other programmers, which you would normally need to write on your own.
Make your website load faster using Sprites within Compass. With Compass you can create Sprites instantly. If you do not know what Sprites are, watch the free lesson about Sprites and you will see that this course is worth taking.
Take your Sass skills to the next level. Learn how to use Math, Lists, Control Directives and Compass to code faster.
In this course,
- Explore tools to make Sass development easier
- Understanding Sass Math
- Learn the power of Sass Lists and how to use them
- See how to write your Sass code like a programmer and why you would want to
- Learn how to create a customizable Sass Animation mixin that works in all browsers
- Explore the Compass framework
- See Sass and Compass color functions in action
- Create a CSS sprite with Compass (and no Photoshop)
- How to use Media Queries and Sass to create responsive websites
The Next Step with Sass and Compass is an intermediate level course in Sass for people who already know the basics of Sass. It is a follow up course to Step by Step Sass, but can be completed by anyone who understands the basic Sass concepts of variables, mixins, nesting, extend and parent selectors.
In this class we will get deeper into Sass and learn how powerful it can be by using Math, Lists, and Control Directives, like @for, @each or @if and @else. All of these things let you actually write your CSS more like a programming language, which can make your code easier to maintain.
This course uses a real project. In it we create a CSS only animated slideshow and make it completely modifiable using Sass. We explore the Compass framework and its many useful tools and mixins. We learn how simple it is to create and maintain CSS Sprites with Compass, and we will explore the many color functions that you get with both Sass and Compass.
The course also covers how media queries work in Sass and how @content can help developing responsive websites much easier.
When you are done with this course you will understand how powerful Sass is and how you can use it to get your work done faster.
In this course,
- Learn how to use a CSS pre-processor in just over an hour.
- Understand the benefits of using a CSS pre-processor
- Know how to write CSS using Sass syntax to save time
- Use Sass to write more maintainable CSS
Sass is a CSS meta-language that saves time, and allows you to write better quality code. In Step by Step Sass, you’ll learn how to use this powerful pre-processor in easy 5–10 minute steps.
You don’t need to understand every concept of Sass to use it — once you get past the installation and set up, you can start using it right away.
Coding your CSS with Sass saves you time — and allows you to write neater, more consistent code. The time you’ll spend completing this course will be easily made up on your next web project!
Disclosure: We are affiliated with some of the resources mentioned in this article. We may get a small commission if you buy a course through links on this page. Thank you.