Source

Sponsor: OSCON (Open Source Convention)

Five days at OSCON equal several years of on-the-job training–that’s what OSCON attendees tell us. Hear from the best minds in technology. Learn insights and strategies for using the latest tools and technologies. Get exposure to the full stack, in all possible configurations, including Linux, MySQL, the LAMP stack, Perl, Python, Ruby on Rails, middleware, and applications. If software is what you do, OSCON is where you want to be.

OSCON takes place July 20 – 24 in Portland, OR. See who’s speaking.

Register now and save 20% using code: CSSTRICKS

Direct Link to ArticlePermalink


Sponsor: OSCON (Open Source Convention) is a post from CSS-Tricks

CSS-Tricks

33 Open Source Sass-Based CSS Code Snippets

Nothing says experienced frontend developer quite like Sass. From agencies to freelancers, it seems like everyone is talking about Sass/SCSS development. Although it may seem daunting at first, Sass is easy to learn with just a bit of practice and patience.

Once you understand SASS basics your dev workflow will improve dramatically. Beyond the basics you can build simple interfaces and code snippets using pure Sass and even compile your own mixins. This gallery includes 33 free code snippets written with Sass/SCSS code. Feel free to dig through these examples and reverse engineer the syntax. You might be surprised how much you can learn!

YAUI v2

purple ui yahoo gui

SCSS Cucumber

css cucumber open source sass

Microsoft Store Logo

ms microsoft store logo css

Red Pagination

red pagination ui interface

Animated Pokémon

pokemon animated pokeballs design

Light-Up Letters

cities world lightup scss

Vector Lion

open source scss lion

SASS Color Functions

sass color functions open source

Moving 3D Cube

3d cube moving effect animation

3D Text

3d text effect sass

Kaleidoscope

kaleidoscope pure css animation

Dot Matrix Paper

dot matrix paper design

SASS Mixin Buttons

sass buttons gradients mixin

HAML Login

haml sass login form

Pure SCSS Button

pure scss 3d button design

Sig-In Form

css sign in form design

Japanese Characters Table

japanese characters table scss

Striped Border

css striped border effect

CSS Bar Chart

css open source bar chart code

Personal Mark

css personal mark open source

iOS Toggle Mixin

css mixin sass ios toggle

Harsh Mixin

github open source harsh mixin

Sass UI Grid

custom sass css grids

Pure Loader

pure css loader effect

Letterpress Mixin

letterpress mixin bevel effect

Sass RGBa

rgba fallback for css code

Flat Buttons

pure sass code flat buttons effect

Sass Cloud

sass cloud simple code open source

UI Kit

modular uikit free open source

CSS Blur

css blur effect open source

Nexus Motion Blur

nexus motion blur effect

Custom Select Menu

custom select menu sass open source

Photo Albums

photo album gallery effect

Check out these related open source snippets:

36 Open Source Twitter Bootstrap Code Snippets

38 Free Open Source CSS Dropdown Navigation Menus

The post 33 Open Source Sass-Based CSS Code Snippets appeared first on SpyreStudios.


SpyreStudios