up_and_running_with_sass
Pages 616
- Home
- Home
- 10 Steps To Plan Better So You Can Write Less Code
- 5 Steps to organizing a successful Campsite event
- Academic Honesty Policy
- accessibility 101
- Accessing the database from your frontend
- Adding Environment Variables
- Adding Snippets In Sublime Text
- Adding Snippets To Sublime Text
- Advantages and Disadvantages of Javascript
- Algorithm Arguments Optional
- Algorithm Binary Agents
- Algorithm Boo who
- Algorithm Caesars Cipher
- Algorithm Check for Palindromes
- Algorithm Chunky Monkey
- Algorithm Confirm the Ending
- Algorithm Convert HTML Entities
- Algorithm Diff Two Arrays
- Algorithm DNA Pairing
- Algorithm Drop It
- Algorithm Everything be True
- Algorithm Exact Change
- Algorithm Factorialize a Number
- Algorithm Falsy Bouncer
- Algorithm Find The Longest Word in a String
- Algorithm Finders Keepers
- Algorithm Friendly Date Ranges
- Algorithm Inventory Update
- Algorithm Make a Person
- Algorithm Map the Debris
- Algorithm Missing letters
- Algorithm Mutations
- Algorithm No Repeats Please
- Algorithm Pairwise
- Algorithm Pig Latin
- Algorithm Repeat a String Repeat a String
- Algorithm Return Largest Numbers in Arrays
- Algorithm Reverse a String
- Algorithm Roman Numeral Converter
- Algorithm Search and Replace
- Algorithm Seek and Destroy
- Algorithm Slasher Flick
- Algorithm Smallest Common Multiple
- Algorithm Sorted Union
- Algorithm Spinal Tap Case
- Algorithm Steamroller
- Algorithm Style Guide
- Algorithm Sum All Numbers in a Range
- Algorithm Sum All Odd Fibonacci Numbers
- Algorithm Sum All Primes
- Algorithm Symmetric Difference
- Algorithm Title Case a Sentence
- Algorithm Truncate a String
- Algorithm Validate US Telephone Numbers
- Algorithm Where art thou
- Algorithm Where do I belong
- Algorithms Merge Sort
- Angular Resources
- Arithmetic Operators
- Array.isArray
- August 2015 Improvements
- August Live Stream
- Back End Project Resources
- Backend file structure
- beta
- Bobby Tables
- Bonus SocketIO
- Bootstrap
- bot announce
- botdemo
- botintro
- Brownie Points
- Browser Storage
- Camper News
- camperbot
- Campsites
- Capitalize First Letter Of String
- chai
- chai assert
- chai cheat
- Challenge Access Array Data with Indexes
- Challenge Access Multi Dimensional Arrays With Indexes
- Challenge Accessing Nested Arrays In Json
- Challenge Accessing Nested Objects In Json
- Challenge Accessing Objects Properties With Bracket Notation
- Challenge Accessing Objects Properties With The Dot Operator
- Challenge Accessing Objects Properties With Variables
- Challenge Add a Negative Margin to an Element
- Challenge Add a Submit Button to a Form
- Challenge Add Alt Text to an Image for Accessibility
- Challenge Add Borders Around your Elements
- Challenge Add Different Margins to Each Side of an Element
- Challenge Add Different Padding to Each Side of an Element
- Challenge Add Elements within your Bootstrap Wells
- Challenge Add Font Awesome Icons to all of our Buttons
- Challenge Add Font Awesome Icons to our Buttons
- Challenge Add ID Attributes to Bootstrap Elements
- Challenge Add Images to your Website
- Challenge Add New Properties to a JavaScript Object
- Challenge Add Placeholder Text to a Text Field
- Challenge Add Rounded Corners with a Border Radius
- Challenge Add Two Numbers with JavaScript
- Challenge Add your JavaScript Slot Machine Slots
- Challenge Adding A Default Option In Switch Statements
- Challenge Adjust the Margin of an Element
- Challenge Adjusting the Padding of an Element
- Challenge Appending Variables to Strings
- Challenge Apply the Default Bootstrap Button Style
- Challenge Assignment With A Returned Value
- Challenge Assignment with Divided by Equals
- Challenge Assignment with Minus Equals
- Challenge Assignment with Plus Equals
- Challenge Assignment with Times Equals
- Challenge Bring your JavaScript Slot Machine to Life
- Challenge Build JavaScript Objects
- Challenge Call out Optional Actions with Button Info
- Challenge Center Text with Bootstrap
- Challenge Chaining If Else Statements
- Challenge Change Text Inside an Element Using jQuery
- Challenge Change Text with Click Events
- Challenge Change the Color of Text
- Challenge Change the CSS of an Element Using jQuery
- Challenge Change the Font Size of an Element
- Challenge Check Radio Buttons and Checkboxes by Default
- Challenge Check the Length Property of a String Variable
- Challenge Clone an Element Using jQuery
- Challenge Comment out HTML
- Challenge Comment your JavaScript Code
- Challenge Comparison With The Equality Operator
- Challenge Comparison With The Greater Than Equal To Operator
- Challenge Comparison With The Greater Than Operator
- Challenge Comparison With The Inequality Operator
- Challenge Comparison With The Less Than Equal To Operator
- Challenge Comparison With The Less Than Operator
- Challenge Comparison With The Strict Equality Operator
- Challenge Comparison With The Strict Inequality Operator
- Challenge Comparisons With The Logical And Operator
- Challenge Comparisons With The Logical Or Operator
- Challenge Concatenate Strings with .concat
- Challenge Concatenating Strings with Plus Operator
- Challenge Concatenating Strings with the Plus Equals Operator
- Challenge Condense arrays with reduce
- Challenge Construct JavaScript Objects with Functions
- Challenge Constructing Strings with Variables
- Challenge Convert JSON Data to HTML
- Challenge Count Backwards With a For Loop
- Challenge Create a Block Element Bootstrap Button
- Challenge Create a Bootstrap Button
- Challenge Create a Bootstrap Headline
- Challenge Create a Bootstrap Row
- Challenge Create a Bulleted Unordered List
- Challenge Create a Class to Target with jQuery Selectors
- Challenge Create a Custom Heading
- Challenge Create a Form Element
- Challenge Create a JavaScript Slot Machine
- Challenge Create a Set of Checkboxes
- Challenge Create a Set of Radio Buttons
- Challenge Create a Text Field
- Challenge Create an Ordered List
- Challenge Create Bootstrap Wells
- Challenge Create Decimal Numbers with JavaScript
- Challenge Declare JavaScript Objects as Variables
- Challenge Declare JavaScript Variables
- Challenge Declare String Variables
- Challenge Decrement a Number with Javascript
- Challenge Delete HTML Elements
- Challenge Delete Properties from a JavaScript Object
- Challenge Delete your jQuery Functions
- Challenge Disable an Element Using jQuery
- Challenge Ditch Custom CSS for Bootstrap
- Challenge Divide One Number by Another with JavaScript
- Challenge Escape Sequences in Strings
- Challenge Escaping Literal Quotes in Strings
- Challenge Fill in the Blank with Placeholder Text
- Challenge Filter Arrays with filter
- Challenge Find Numbers with Regular Expressions
- Challenge Find the Length of a String
- Challenge Find White Space with Regular Expressions
- Challenge Finding a Remainder in Javascript
- Challenge Generate Random Fractions with JavaScript
- Challenge Generate Random Whole Numbers with JavaScript
- Challenge Generate Random Whole Numbers within a Range
- Challenge Get Geo location Data
- Challenge Get JSON with the jQuery getJSON Method
- Challenge Give a Background Color to a Div Element
- Challenge Give Each Element a Unique ID
- Challenge Give your JavaScript Slot Machine some stylish images
- Challenge Global Scope And Functions
- Challenge Global Vs Local Scope In Functions
- Challenge Headline with the h2 Element
- Challenge House our page within a Bootstrap Container Fluid Div
- Challenge Import a Google Font
- Challenge Increment a Number with Javascript
- Challenge Inform with the Paragraph Element
- Challenge Inherit Styles from the Body Element
- Challenge Initializing Variables with the Equal Operator
- Challenge Introducing Else If Statements
- Challenge Introducing Else Statements
- Challenge Introducing Javascript Object Notation Json
- Challenge Invert Regular Expression Matches with JavaScript
- Challenge Iterate Odd Numbers With a For Loop
- Challenge Iterate over Arrays with map
- Challenge Iterate Through An Array With A For Loop
- Challenge Iterate with JavaScript For Loops
- Challenge Iterate with JavaScript While Loops
- Challenge Join Strings with .join
- Challenge Label Bootstrap Buttons
- Challenge Label Bootstrap Wells
- Challenge Learn how Script Tags and Document Ready Work
- Challenge Line up Form Elements Responsively with Bootstrap
- Challenge Link to External Pages with Anchor Elements
- Challenge Local Scope And Functions
- Challenge Make Circular Images with a Border Radius
- Challenge Make Dead Links using the Hash Symbol
- Challenge Make Images Mobile Responsive
- Challenge Make Instances of Objects with a Constructor Function
- Challenge Make Object Properties Private
- Challenge Make Unique Objects by Passing Parameters to our Constructor
- Challenge Manipulate Arrays With pop()
- Challenge Manipulate Arrays With push()
- Challenge Manipulate Arrays With shift()
- Challenge Manipulate Arrays With unshift()
- Challenge Manipulate JavaScript Objects
- Challenge Modify Array Data With Indexes
- Challenge Multiple Identical Options In Switch Statements
- Challenge Multiply Two Numbers with JavaScript
- Challenge Nest an Anchor Element within a Paragraph
- Challenge Nest Many Elements within a Single Div Element
- Challenge Nest one Array within Another Array
- Challenge Nesting For Loops
- Challenge Override All Other Styles by using Important
- Challenge Override Class Declarations by Styling ID Attributes
- Challenge Override Class Declarations with Inline Styles
- Challenge Override Styles in Subsequent CSS
- Challenge Passing Values To Functions With Arguments
- Challenge Perform Arithmetic Operations on Decimals with JavaScript
- Challenge Prefilter JSON
- Challenge Prioritize One Style Over Another
- Challenge Quoting Strings with Single Quotes
- Challenge Remove an Element Using jQuery
- Challenge Remove Classes from an element with jQuery
- Challenge Render Images from Data Sources
- Challenge Replacing If Else Chains With Switch
- Challenge Responsively Style Checkboxes
- Challenge Responsively Style Radio Buttons
- Challenge Return A Value From A Function With Return
- Challenge Return Early Pattern For Functions
- Challenge Returning Boolean Values From Functions
- Challenge Reverse Arrays with reverse
- Challenge Save your Code Revisions Forever with Git
- Challenge Say Hello to HTML Elements
- Challenge Selecting From Many Options With Switch Statements
- Challenge Set the Font Family of an Element
- Challenge Set the ID of an Element
- Challenge Sift through Text with Regular Expressions
- Challenge Size your Images
- Challenge Solution Template
- Challenge Sort Arrays with sort
- Challenge Specify How Fonts Should Degrade
- Challenge Split Strings with split
- Challenge Split your Bootstrap Row
- Challenge Store Multiple Values in one Variable using JavaScript Arrays
- Challenge Storing Values with the Equal Operator
- Challenge Style Multiple Elements with a CSS Class
- Challenge Style Text Inputs as Form Controls
- Challenge Style the HTML Body Element
- Challenge Subtract One Number from Another with JavaScript
- Challenge Target a Specific Child of an Element Using jQuery
- Challenge Target Elements by Class Using jQuery
- Challenge Target Elements by ID Using jQuery
- Challenge Target Even Numbered Elements Using jQuery
- Challenge Target HTML Elements with Selectors Using jQuery
- Challenge Target the Children of an Element Using jQuery
- Challenge Target the Parent of an Element Using jQuery
- Challenge Target the same element with multiple jQuery Selectors
- Challenge Taste the Bootstrap Button Color Rainbow
- Challenge Testing Objects For Properties
- Challenge Trigger Click Events with jQuery
- Challenge Turn an Image into a Link
- Challenge Uncomment HTML
- Challenge Understand Boolean Values
- Challenge Understand String Immutability
- Challenge Understanding Case Sensitivity in Variables
- Challenge Understanding Uninitialized Variables
- Challenge Updating Object Properties
- Challenge Use a CSS Class to Style an Element
- Challenge Use Abbreviated Hex Code
- Challenge Use an ID Attribute to Style an Element
- Challenge Use appendTo to Move Elements with jQuery
- Challenge Use Bracket Notation to Find the First Character in a String
- Challenge Use Bracket Notation to Find the Last Character in a String
- Challenge Use Bracket Notation to Find the Nth Character in a String
- Challenge Use Bracket Notation to Find the Nth to Last Character in a String
- Challenge Use Clockwise Notation to Specify the Margin of an Element
- Challenge Use Clockwise Notation to Specify the Padding of an Element
- Challenge Use Comments to Clarify Code
- Challenge Use Conditional Logic with If Else Statements
- Challenge Use CSS Selectors to Style Elements
- Challenge Use Hex Code for Specific Colors
- Challenge Use Hex Code for Specific Shades of Gray
- Challenge Use Hex Code to Color Elements Blue
- Challenge Use Hex Code to Color Elements Gray
- Challenge Use Hex Code to Color Elements Green
- Challenge Use Hex Code to Color Elements Red
- Challenge Use Hex Code to Color Elements White
- Challenge Use Hex Code to Mix Colors
- Challenge Use HTML5 to Require a Field
- Challenge Use jQuery to Modify the Entire Page
- Challenge Use Responsive Design with Bootstrap Fluid Containers
- Challenge Use RGB to Color Elements Blue
- Challenge Use RGB to Color Elements Gray
- Challenge Use RGB to Color Elements Green
- Challenge Use RGB to Color Elements Red
- Challenge Use RGB to Color Elements White
- Challenge Use RGB to Mix Colors
- Challenge Use RGB values to Color Elements
- Challenge Use Spans for Inline Elements
- Challenge Use the Bootstrap Grid to Put Elements Side By Side
- Challenge Use the Javascript Console
- Challenge Using Objects For Lookups
- Challenge Using typeof
- Challenge Warn your Users of a Dangerous Action
- Challenge Write Reusable JavaScript with Functions
- Check if an element is hidden using jQuery
- Check if element is hidden js or jquery
- Checkpoint Convert Celsius to Fahrenheit
- Checkpoint Counting Cards
- Checkpoint Golf Code
- Checkpoint Profile Lookup
- Checkpoint Record Collection
- Checkpoint Shopping List
- Checkpoint Stand In Line
- Checkpoint Word Blanks
- Clear Your Browser's Local Storage
- Clone A Specific Branch
- code case
- code formatting
- Code of Conduct
- Coding Help
- CONTRIBUTING
- Contributions Guide with Typo Demo
- Create, Upload and Link Animated GIF Image
- Creating a new API endpoint
- Creating a new directive
- Creating a New Github Issue
- Creating a new route
- css
- css selectors
- Currying
- dau
- debugging
- Debugging JavaScript with Browser DevTools
- Deleting A Branch
- demo trim
- Develop Back End Project locally and run on c9.io
- Disable Code Auto Run
- Django Start Project
- Dotnet
- Dynamic URLs using $routeParams
- Edit or Delete message
- Elixir
- emoji
- Epilogue
- equality vs identity
- example
- Fixing exports.update
- For loops Explained
- Free Code Camp Back End Development Certification
- Free Code Camp completion language requirements
- Free Code Camp Data Visualization Certification
- Free Code Camp Deployment Workflow
- Free Code Camp Front End Development Certification
- Free Code Camp Full Stack Development Certification
- Free Code Camp is an open source community distributed across many platforms
- Free Code Camp JavaScript Style Guide
- Free Code Camp logo
- Free Code Camp's Privacy Policy
- Front End Project Use the Twitchtv JSON API
- Frontend file structure
- Functional Programming Higher Order Functions
- Get info about the current user
- Get Screen Size In Pixels
- Get started with Node_js
- Getting a coding job
- Git Amend Last
- Git Blame
- Git Change the URL of a remote repository
- Git Checkout A Remote Branch
- Git Delete a Branch both locally and remotely
- Git Force Git to overwrite local files on pull
- git merge
- Git Pull Vs Git Fetch
- Git Push Local To Remote Repository
- git rebase
- Git Resources
- Git Shortcut
- Git Undo Redo A Commit
- Gitter
- Gitter Moderation Policy
- global variables
- Go
- Grunt
- Guide Online Contribution
- Guide to Back End Projects Table of Contents
- Guide to Submitting Posts to Free Code Camp Medium Publication
- Gulp Basics
- Help I've Found a Bug
- Help Rooms
- Heroku Deployment Guide
- Higher Order functions
- How Free Code Camp works
- How FreeCodeCamp Nonprofit Projects work
- How GitHub Issue Moderators AKA Issue Mods Work
- How JSONP is different from JSON
- How Long Free Code Camp Takes
- How to add Free Code Camp to my LinkedIn profile
- How to best use the Global Control Shortcuts for Mac
- How to clear specific values from your browser's local storage
- How to clone the FreeCodeCamp website on a Windows pc
- How To Contribute To The Wiki
- How to create a Campsite for your city
- How To Create A Pull Request for Free Code Camp
- How to deploy a website without writing any code at all
- How To Fork And Maintain a Local Instance of Free Code Camp
- How to Get Help on Gitter
- How to get help when you get stuck
- How to get the MEAN stack running locally on OSX
- How To Install Clementine
- How to install Screenhero
- How to know who is in charge of your Campsite on Facebook
- How To Log In To Your Local FCC Site
- how to post code
- How to Rename a Local Branch
- How to share your workspace selfie with FreeCodeCamp on instagram
- How to start when you are stuck (I)
- How to start when you are stuck (II)
- How to start when you are stuck (III)
- How to use the Free Code Camp Wiki
- How you can get to Inbox Zero with Gmail shortcuts
- How you can help to stimulate your city's Campsite on Facebook
- How you can reach the Free Code Camp team to interview them for your publication
- Html and CSS Cheat Sheet
- html elements
- If Free Code Camp is free, how does it make money
- Ignore Files Committed To Git Repo
- IIFE
- Install Django Flask
- Installing WordPress Locally on Mac
- Intro to Yeoman Angular Fullstack Back End Projects
- isLoggedInAsync
- Java
- Java Basics
- Java Introduction
- Java Loops
- Java Resources
- Javascript Callback Functions
- JavaScript Truth Table
- jQuery
- js arguments
- js Array prototype concat
- js Array prototype every
- js Array prototype filter
- js Array prototype forEach
- js Array prototype indexOf
- js Array prototype join
- js Array prototype lastIndexOf
- js Array prototype map
- js Array prototype pop
- js Array prototype push
- js Array prototype reduce
- js Array prototype reverse
- js Array prototype shift
- js Array prototype slice
- js Array prototype some
- js Array prototype sort
- js Array prototype splice
- js Array prototype toString
- js Boolean
- js closures
- JS Comparison Operators
- JS Current URL
- js falsy
- js for in loop
- js for loop
- js for of loop
- js functions
- JS Get Timestamp
- js Global Object
- js immutable
- js loops
- JS Regex Resources
- JS Resources
- js Scopes
- JS Strict Mode
- js String prototype charAt
- js String prototype charCodeAt
- js String prototype concat
- js String prototype indexOf
- js String prototype lastindexOf
- js String prototype match
- js String prototype replace
- js String prototype slice
- js String prototype split
- js String prototype substr
- js String prototype substring
- js String prototype toLowerCase
- js String prototype toUpperCase
- js ternary
- js truthy
- js undefined
- jsonp
- Know it all
- Known Issues With Codepen
- latex
- Learn the basics of the VIM editor
- Linking Your Account with GitHub
- Linux
- List of Free Code Camp city based Campsites
- Loop Protect
- Map
- materializecss framework as a bootstrap alternative
- Math.max
- Math.min
- Math.pow
- medium example wiki article
- More useful APIs
- Mostaganem
- Object.getOwnPropertyNames
- Object.keys
- October 2015 Improvements
- October 2015 Summit Agenda
- Official Free Code Camp Chat Rooms
- ooda
- Other resources that Free Code Camp recommends to nonprofits
- Page redirects using javascript
- Pair programming and why it is special
- parseInt
- Permutations
- Php
- Politica De Honestidad Academica
- Programming Fundamental
- Programming Methodology
- Promises
- Pseudoclassical class definition OOp
- Pull Request Contribute
- PULL_REQUEST_TEMPLATE
- Python
- Python Basics
- Python Functions
- Python Introduction
- Python More Builtin Types
- Python Operators
- Python Resources
- Quick tip keep data in sync
- README
- Reduce made easy
- Refresh Your Browser Cache
- Registering your Nonprofit to Raise Donations through Free Code Camp Commit
- Restrict a page to authenticated users
- RTFM
- Ruby
- Ruby Introduction
- Run Apache Server On A Mac
- Saturday Summit August 2015
- Saturday Summit December 2015
- Saturday Summit November 2015
- Saturday Summit October 2015
- Searching for Your Issue on Github
- Seed data
- Select Issues for Contributing Using Labels
- Setting Up A React ES6 Webpack Project
- Site Improvements August 2015
- Site Improvements October 2015
- Slack
- Spanish Translation Terminology
- staging
- Start Here
- Streaks
- Stream Your Coding Sessions on Twitch.tv
- String.fromCharCode
- String.length
- Swashbuckle Swagger Operation Alphabetical Order
- The main advantages of Free Code Camp
- The Return Early Pattern
- Tips on How To Become A Good Pair Programmer
- topic
- Translating Free Code Camp into Your Native Language
- Translations Guide
- Twitch
- up_and_running_with_sass
- update
- Updates February 11 2016
- using anonymous self executing functions for private namespacing in your js apps
- Using browsec for securing your connection to fcc
- Using Github Pages for your front end development projects
- video demo
- wat
- Web Development in Python
- Web Resources
- What exactly Free Code Camp does
- What pair programming is and why it is special
- What the main advantages of Free Code Camp are
- What the style guide for Algorithms is
- What to do if you speak a language that Free Code Camp does not yet support
- What you will learn, and in what sequence you will learn it
- Why does Free Code Camp use JavaScript instead of Ruby or Python
- Why you need Free Code Camp
- Why You Should Try Pair Programming
- wiki js template
- Wiki Style Guide
- World Language Chat Rooms
- Write and Run ES6 Code in Browser
- writing a markdown file using atom
- Writing great git commit message
- Show 601 more pages…
New to Free Code Camp?
JS Concepts
JS Language Reference
- arguments
- Array.prototype.filter
- Array.prototype.indexOf
- Array.prototype.map
- Array.prototype.pop
- Array.prototype.push
- Array.prototype.shift
- Array.prototype.slice
- Array.prototype.some
- Array.prototype.toString
- Boolean
- for loop
- for..in loop
- for..of loop
- String.prototype.split
- String.prototype.toLowerCase
- String.prototype.toUpperCase
- undefined
Other Links
Clone this wiki locally
Up and Running with Sass
Part 1: Getting Started
Introduction
Sass stands for "Semantically Awesome Stylesheets" and is a CSS Pre-Processor. A Pre-Processor compiles code written in a specific language down to "product" code that is machine-readable (browser-readable). Basically, Sass compiles code down to regular CSS that our browsers can interpret! Why write code in Sass when CSS already exists? The short answer is Sass comes with more powerful features built into its syntax that allow developers to write DRY-er, scalable, and more maintainable front-end code.
If you're familiar with CSS, then learning Sass will come a little easier to you. If not, it might be ideal to start learning some CSS basics on Free Code Camp's HTML5 & CSS section in their Front End Development Certification course, as well as taking a look at MDN's CSS Article.
In Part 1 of this article, I will explain how to get Sass installed on your computer and how to compile your Sass-written code into CSS.
Installation
The simplest way to install Sass onto your machine is through the command line. Sass is a Ruby gem and will require the following command:
For Macs and PCs:
sudo gem install sass
For Linux you will need to install the Ruby language first, then:
sudo su -c "gem install sass"
You should now be able to check the version of Sass installed:
sass -v
And it should return something similar to:
Sass 3.4.21 (Selective Steve)
If so, congrats, you've just installed Sass! Now onto using Sass.
Basic Use & Syntax
Let's begin with a very simple example to illustrate how Sass actually works. You can follow along with the steps or simply read along.
An import sidenote: Sass can be written in two slightly different styles, each of which has its own benefits. One style will use the file extension .sass
and the other will use .scss
. Brief explanations will be given on the differences of the two styles later on. For an in-depth explanation, check out John W. Long's Sass vs. SCSS article.
For the sake of consistency, this article will provide code examples in .scss
format, however both styles are equally popular.
Alright, let's get started. We will create a new folder to house our example files (you may do this anywhere on your computer, and can use the command line or do this manually).
In the folder, we will create a file called style.scss
and an HTML file to style called index.html
:
The tree
command in the image above is from an npm package you can install and is not native to the command line. The ls
command essentially does the same.
Now that we have our project folder setup, we can use the Sass watch command to "keep an eye" on our Sass file and compile our code when it detects a change in the file. We type in the watch command on the file we want to watch:
sass --watch style.scss
The next step is to open up the project folder in your text editor of choice. Once we have our files opened and ready for editing, we can add in a very basic HTML page (for us to style) which will look like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<h1>Hello World</h1>
<p class="cat-paragraph-1">Cat ipsum dolor sit amet, stand in front of the computer screen, so chase imaginary bugs has closed eyes but still sees you caticus cuteicus.</p>
<p class="cat-paragraph-2">Drink water out of the faucet chew on cable or if it fits, i sits roll on the floor purring your whiskers off.</p>
</article>
</body>
</html>
After setting up the HTML we can open up our style.scss
file and begin styling in Sass. In the sample code below, you will probably notice how some the style selectors are nested within the article selector; something unique to Sass. Don't fret, the syntax will be explained in Part 2. For now we just want to acquire an understanding of how Sass works in its simplest form.
article {
h2 {
font-family: Arial;
color: blue;
}
.cat-paragraph-1 {
color: red;
}
.cat-paragraph-2 {
color: green;
}
}
Once that code has been typed and saved into the style.scss
file, the watch task we punched into the command line will have detected a change in the file, compiled our Sass to CSS, and output a new file titled style.css
. You may also see a file called style.css.map
in your project folder that has magically appeared as well. This file is called a sourcemap and is of great use when debugging Sass, but for now we'll just leave it be.
Below we can see the files listed in the project folder.
And now if we open up index.html
in a web browser, we can see our HTML page styled using CSS which was compiled from the sample Sass code. Similarly, we can open up the style.css
file to see how Sass output the original Sass code. Compact, isn't it?
Where To Go From Here?
Great! Now I know how to compile Sass on my computer. Is that it?
Not by a long shot. This was a bare-bones example of how Sass works, therefore the benefits of writing in Sass over vanilla CSS may not be apparent. We wrote 12 lines of "Sass" and got 7 lines of CSS as a result. Not exactly a major difference by any standards. In Part 2 we will explain the magic behind Sass syntax such as variables and mixins, and how the use of such tools can lend us superpowers when styling.
If you're still stuck on how Sass is magically compiling down into CSS or maybe you would like to mess with sample code some more, Sassmeister is a great online interface which lets you write in Sass syntax and instantly see your code compiled into CSS without having to install anything or do any setup on your computer. It's a very useful resource for sandboxing and trying out your Sass code.
Part 2: Sassy Syntax & Tools
"An artist is only as good as his tools."
That's not necessarily true, but the tools we use can sure make our lives easier and our tasks more managable. Imagine writing code with no keyboard shortcuts or snippets available! Not the end of the world, but you get the gist.
The "tools", or more commonly refered to as directives, we will be discussing are actually built-in features that come bundled with Sass and can help us as developers to write DRY-er (Don't Repeat Yourself) and cleaner code.
If you would like to follow along in your own text editor, I recommend installing a *Sass syntax-highlighter*. Atom and Sublime Text as well as a few other editors support these.
Variables
If you have written code in another programming language (JavaScript, Python, Java, C, etc.) then you're familiar with the concept of variables. If not, then variables are basically statements declared that can store some kind of value like a number or string.
In Sass, variables work essentially the same way and can be declared with a "$" character next to the name of the variable:
$main-color: #CCCCCC;
The variable above is storing the hex color code for a tone of gray. We can declare this variable inside any .scss
or .sass
file that we're working in. We can also incorporate the variable into a tag (HTML5 tag, ID, class, pseudo selectors) when styling:
$main-color: #CCCCCC;
header {
background-color: $main-color;
}
In this code snippet, we have assigned the value of the header's background-color
to the value stored in $main-color
, which (when Sass compiles to CSS) is output as:
header {
background-color: #CCCCCC;
}
Neat! But couldn't we just have set the background-color
to #CCCCCC
in the first place? The answer is yes, but there's more to it than that.
Let's say we're styling a multi-page website for a client and we just finished picking out a simple three-color "color scheme". Our navigation bar, footer are one color, and perhaps our article elements, paragraphs, and headers are one of the remaining two colors. Then one day the client changes his/her mind the color scheme we selected, and wants it changed. Great.
So then we are tasked with going through our multiple stylesheets (or maybe one massive stylesheet if you prefer that) and changing all those color values. Maybe we mix one up. Or maybe we miss one and have to keep going back to fix them.
With variables (and the use of Sass partials which we will discuss later) we can adjust the values on the variable declarations, and everywhere else we used the variables in our stylesheet(s) the values will change to reflect the variable assignment we changed. This only one example of how handy variables can be when used accordingly in Sass. Variables become more crucial as we add to our Sass toolbelt.
On that note, let's tackle mixins.
Mixins
A mixin is a block of re-usable code that can take arguments, much like a function in JavaScript can. However, it is not to be confused with the actual @function
feature in Sass.
Mixins are declared by prefixing the "@" character in front of the word "mixin", then the name of the mixin. Below is an example of a mixin called btn which takes two arguments and applies them to CSS properties:
@mixin btn($color, $text-color) {
background-color: $color;
color: $text-color;
padding: 1em;
}
After writing out a mixin, nothing will happen by default because we have not put the mixin to use (similar to writing a function vs. calling a function). Let's integrate our mixin. We will include it in an HTML5 button
selector using the @include
statement:
The @include
statement lets us bring in our mixin styling into a CSS selector of our choice. In this case, the button
selector with the values blue and white passed in as arguments.
button {
@include btn(blue, white);
}
Which is something we can use in any other HTML selector if we chose to. This would compile down to:
button {
background-color: blue;
color: white;
padding: 1em;
}
Just by using the single line @include btn(blue, white);
inside our button selector, we can bring in all the code written out inside our mixin with blue and white passed in as arguments. Additionally, we can set default values for the arguments passed to a mixin. For example, say we wanted our button mixin to default to a specific color and font color if no values were passed when called:
@mixin button($color: green, $text-color: red) {
background-color: $color;
color: $text-color;
padding: 1em;
}
By typing in a ":" followed by the default value we want to set, we have assigned green as a default value for our $color
argument, and red as a default value for our $text-color
argument.
Now if we were to call our mixin without passing any values...
button {
@include btn;
}
This compiles down into:
button {
background-color: green;
color: red;
padding: 1em;
}
If we wanted to put our variables to use with our mixin, we could do so as well:
$main-color: #CCCCCC;
$second-color: #FFFFFF;
@mixin button($color: $main-color, $text-color: $second-color) {
background-color: $color;
color: $text-color;
padding: 1em;
}
In the example above, we declare two variables with distinct hex color values, then set the arguments $color
and $text-color
to default to our variables if no argument is passed.
It's often considered a good practice to set default values for a mixin, but definitely not necessary. You will find that many developers have their own way of writing out code and varying opinions on what is considered the "best".
The fun won't stop here. There's a good handful of other useful tricks we can perform when writing out mixins and an endless amount of possibilities in how to write them. What is important to take away from mixins is that they serve as modules or "objects" in which we can declare certain styles, pass values, and re-use in our code where need be instead of continuously repeating ourselves while styling different elements. They can help us stay truer to the DRY principle.
Extends
The last tool we will discuss is the extend directive. Extends can be used to duplicate a style we have applied previously to another element. However, there is much more happening behind the scenes when implementing an extend and this can produce some unintended side-effects on our styling if we are not careful.
Below is an example of an extend directive being put to use:
.primary-module {
color: red;
}
.another-module {
@extend .primary-module;
}
// This ouputs the following CSS
.primary-module, .another-module {
color: red;
}
Nothing too shady going here yet. We have a selector targeting .another-module
which uses an extend to clone styling which was applied to the selector .primary-module
. This outputs a styling of color: red;
being applied to the class .primary-module
and .another-module
. Logical so far and a tool that has a similar effect to including a mixin on several elements that need to share the same styling.
Now let's take a closer look at a different example and pick out where an extend directive complicates a bit:
.primary-module p {
color: red;
}
.another-module {
@extend .primary-module;
}
// This outputs the following CSS
.primary-module p, .another-module p {
color: red;
}
Did you catch it? The selector of .another-module
is using an extend on the .primary-module p
selector. Note that because .primary-module
has a descent selector of p
(paragraph tag), when the extend is called and our Sass code is compiled, the style of color: red;
is being applied to .primary-module p
and .another-module p
.
What's happening is that the extend directive is not only cloning the style from .primary-module p
, but it is cloning the descent selector tag of p
and adding that to .another-module
. We are copying the styling and the descendant selector of what we borrowed from. As a result, the style we extended is being applied to paragraph elements which are descendants of .another-module
and not simply on elements with a class of .another-module
.
You can see where something like this can get hairy if we're not aware of what extend is doing.
So we've taken look behind the curtains on extends and now you may be thinking What's the point of using extends? Is it worth it or can I just use mixins?
The short answer (there is much more to be said on this topic) is that often extends will be used to purposefully tap into inheritance of styles being applied to other elements or to make particular use of what is known as silent classes in Sass. Extends can generally accomplish what mixins can when used carefully, but one should not be thoughtlessly used in place of another. Practice extends and use them with a specific purpose in mind.
As for silent classes, this is something which will hopefully be covered in an upcoming section to this article. For now just know that silent classes are selectors in Sass which are prefixed with a "%" character and will not be compiled at all unless called by an extend.
Conclusion
If you've made it to the end of this article, you deserve some recognition. I wrote this in the hopes of explaining Sass in a way that I wish it would've been taught to me when I first began messing around with it. If CSS is something you struggle with or have always felt apprehensive towards because of how quickly it becomes a mess, then hopefully Sass will begin to alleviate some of those frustrations.
This article is meant as a "crash course" of sorts to get your feet wet in the world of Sass. There is still a significant amount of tools and features that make Sass shine, as well as best practices when it comes to structuring your stylesheets and breaking them up into partials.
My advice is to start sandboxing in your own text editor and on Sassmeister to get more comfortable with the concepts this article has covered. Also be on the lookout for the Free Code Camp Sass course coming soon.
Get out there and level up your Sass game.
Learn to code and help nonprofits. Join our open source community in 15 seconds at http://freecodecamp.com
Follow our Medium blog
Follow Quincy on Quora
Follow us on Twitter
Like us on Facebook
And be sure to click the "Star" button in the upper right of this page.