How to implement .SCSS on my own website?
css, html, sass, web
Solution
SASS is still CSS
Okay, to make things straight - all you see is still CSS, but it was written in SASS then compiled back to CSS.
SASS is like "CSS on steroids" where you can use loops, mixins and tons of cool stuff. You write in SASS, then compile it to CSS and here you are.
Getting & understanding SASS
To get you going you have to install SASS from http://sass-lang.com/install, if you're not familiar with command line you can install a separate app such as Scout or Koala (there's more on sass-lang install page).
Then you basically set the application/sass to track file x (SASS) and output what you write to file y (CSS), every time you change something in file x it's getting recompiled and moved to y.
You will have to learn SASS syntax though, but it's quite clear and easy if you already know CSS IMHO.
To confuse you more, there's also Compass which is a very cool framework based on SASS, you should definitely give it a go once you get a grip of SASS.
Your animation explained
About your second question - the example provided is just a simple CSS3 animation using `@keyframes` and `animation` You can do this in css-only and you don't need SASS for that.
Here's a proof your example is basically some CSS code: http://jsfiddle.net/ypq7aost/ (note it's pure CSS!)
Problem
I've been experimenting on Codepen just recently and I was wondering how I could implement the code that is displayed on the website on one of my own. I realized that most of the formats used on Codepen aren't pure ".css". I learned it's something new called ".scss". I was wondering where to start and if anybody could help me out in understanding how .scss works. Especially This ``` body{ background:black; font-family: 'Varela', sans-serif; } .glitch{ color:white; font-size:0px; position:relative; width:268px; height:654px; margin:0 auto; text-indent:-999em; background:transparent url(http://cdn.hiphopwired.com/wp-content/uploads/2013/09/Vanellope-Von-Scweetz-wreck-it-ralph.png) center center no-repeat; } @keyframes noise-anim{ $steps:20; @for $i from 0 through $steps{ #{percentage($i*(1/$steps))}{ clip:rect(random(654)+px,9999px,random(654)+px,0); } } } .glitch:after{ content:''; width:100%; height:100%; position:absolute; left:2px; top:0; overflow:hidden; clip:rect(0,900px,0,0); animation:noise-anim 2s infinite linear alternate-reverse; background:inherit; -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); } @keyframes noise-anim-2{ $steps:20; @for $i from 0 through $steps{ #{percentage($i*(1/$steps))}{ clip:rect(random(100)+px,9999px,random(100)+px,0); } } } .glitch:before{ content: ''; width:100%; height:100%; position:absolute; left:-2px; top:0; overflow:hidden; clip:rect(0,900px,0,0); animation:noise-anim-2 3s infinite linear alternate-reverse; background:inherit; -webkit-filter: hue-rotate(300deg); filter: hue-rotate(300deg); } ```