First I'll show you how to easily use the command line to keep our CSS up to date. We'll be watching our Sass files automatically for any new changes and exporting in real time. Also the command line allows real time compression to produce a smaller CSS file and converting between Sass and SCSS.
With projects getting larger and more detailed we need to keep our CSS maintained. This can be a handful when it comes to a standard CSS stylesheet. But with Sass everything can become a breeze!
This lecture will give you the reason why SASS is becoming more popular. Also you'll have an insight into this course with previews from later lectures. Finally, I'll explain the method of teaching throughout this course.
The first option we look at in this lesson is SASS Meister which is an online solution. The second installing SASS directly on OSX, Windows and GNU.
Now let's start using the command line and review the most important SASS commands. The commands learn't apply to all OS's and will be used throughout this course.
Environment setup is very important to the way we organise and structure our workflow. This lecture will cover the free Atom editor available to all OS's and get the terminal setup to watch our SCSS file for any changes. Finally we'll look at the different syntax's between SCSS and SASS.
Variables greatly increase the structure of a given stylesheet. Variables could be used for colour schemes, namespace, measurements, values, selectors and more. If used properly variables will save us a tone of time!
SASS allows us to keep a structured stylesheet by utilising inheritance. Inheritance can share properties between selectors via placeholders and implement namespace's easily among other things.
Mixins are predefined snippets of code that can be reused throughout the SASS document. These snippets can quickly take on a function like approach with arguments being passed into them. Mixins are parsed before compilation to CSS so they can contain SASS syntax.
Importing SCSS and SASS files can give the present file shared access to mixins, variables, styles and more. This means you can make your own import files and use them across all your projects without any hassle.
We have already seen lists are useful for just representing shorthand CSS property values. For this lecture I will recap the definition of a list data type within SASS. But then we'll extend the functionality of a list data type by using SASS Script functions.
Maps resemble objects in SASS with a key and value pair structure. Maps can be highly efficient for repetitive data and storing lot's of collated values together.
SASS developers have made sure that maths is not left out. Maths is essential for any programming, especially when it comes to styling. SASS has all the standard operaters you would expect for precise control and flexible code.
If statements make our styling conditional as they depend on circumstance. We can check variables, compare them with operators and more to give our code adaptability.
SASS has done a fantastic job of helping with repetitive code. But nothing is more effective than loops. You have three types of loops all of which we'll review in this lecture. The first loop we'll look at is the for loop and swiftly move onto the each loop and finally the while loop. All these loops have their strengths and weaknesses but no doubt they will save countless hours on big projects.
Extending the sass functionality is easy with function directives. Functions are very similar to mixins in that you can pass in arguments and control the returned outcome. You can place anything inside of a function including other mixins, variables, maths and just plain old css. This final piece to our puzzle will unlock the power to SASS.
Welcome to an update to this course in 2016. Instead of using the command line interface you can use the free desktop application to compile your SASS scripts
Now you don't have to define your own mixins for the new CSS3 properties. Instead you can simply have those properties produced at compile time.
In this lecture we'll look at using the SASS source maps with multiple browsers. This will halve your development time.
In this lecture we'll be looking at building a grid system by using the features of SASS.
Now we're going to extend our knowledge further and nest loops inside of loops and come up with an advanced grid system that'll be very easy to change at a later date.
For the final project we'll be creating some simple buttons and again using the most prominent features in SASS to quickly create buttons for any website.
Use the coupon code avelx5050 to get 50% off any of my premium course's. Check out my author's page for more details:
Lawrence Turton works as a web developer & graphic designer specialising in HTML, CSS, jQuery, UI & UX design. He has previously worked with Fifteendesign producing websites, iPhone and Android apps and started his own agency in 2010 called Elite Web Design. During that time Lawrence has established a wide range of clients from blue chip companies to large corporations. From a young age he was an online instructor and started to work with two of the leading online training specialists Cartoonsmart and Envato. Lawrence always created projects involving designs in Photoshop and bringing his creations to life by coding them with web technologies. This gives him a unique perspective into real world projects from start to finish and a wealth of information for new comers to the web industry.