All posts tagged “Sass”

11 Mixin Libraries For Sass Designers Should Get

If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site.

There are many mixins are made by developers, to help you when working with Sass in your development. Most cover things that often repetitive in CSS. From adapting across multiple browsers to creating buttons, animations and transition effects, find this and more in the following 11 mixin libraries you should get for your Sass development.

1. Bourbon

Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. For me, this is the most marvelous Sass mixin. It contains almost everything you need to style your website while keeping your stylesheet lightweight.

Check out the complete documentation to use each available mixin and function.

2. Sass CSS3 Mixins

Sass CSS3 Mixins provide mixins that works across different browsers. You’ll find a bunch of best-practice mixins here such as background, border, box, column, font-face, transform, transition, and animation. It’s enough for your styling needs. To use, import the css3-mixins.scss and call the mixin in your CSS class.

Download this mixin here.

3. Sassmatic

Want to filter your image with stunning effect in Sass? Sassmatic may be what you need. It is a photo filter library, using Sass and Compass, which gives your images 14 filter effects including lomo, cooling, warming, sepia, and others. You can even create a custom filter by combining several filters available and change the value as you like.

4. CssOwl

CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after and :before). It also helps when you want to create sprite elements: the mixin gives flexibility to set the image position in your sprite. In addition to Sass, the CssOwl mixin library is also available for LESS and Stylus.

5. Breakpoint Sass

Breakpoint helps you make media queries through Sass a simple manner. With Breakpoint, you can create variables and give it a value that define the min-width or max-width of media queries. Since the variable you’ve created has a meaningful name, you can call it easily for use in Sass.

6. Scut

Scut contains a set of reusable Sass mixins, placeholders, functions, and variables that help you easily implement common style-code patterns. It provides best-practice code to create web stuff like page layouts and in styling typography. You can cut down repetition when writing code by reusing the code more often. Thus, helping you get more organized in the process.

7. Buttons

Buttons is a library that helps you build buttons in beautiful styles. You get predefined button styles such as Flat, Glow, Rounded, 3D, Border, Pill, Circle, and dropdown. For quick use just include the button.css into your HTML. But if you want to customize your own button, follow this tutorial.

8. Saffron

With Saffron, you can add CSS3 animations and transitions with ease. There are a dozen animations and transitions available, including fade in/out, slide in/out, rise in/out as well as miscellaneous effects like shake, teeter, bounce, and others. To use Saffron just include the mixin in the Sass declaration, and call the effect name inside your CSS class. You can get Saffron by installing it using Bower or Gem, or just download it manually from Github.

9. Type Settings

TypeSettings is a type of toolkit for Sass. It will set font-size in modular scale using em (instead of rems or pixels), vertical rhythm, and responsive ratio based headlines. You can install this one with Bower as well, download the release, or clone the repo. For more details, check out its page.

10. Sass Line

Sass Line is a Sass mixin that helps you make better typography. It uses rems unit on your font so that you can work it in proportionally from the baseline grid. Sass Line uses a precise vertical rhythm based on the baseline grid, and lets you set a modular-scale for each of your breakpoints to get good proportions across all aspects of your website.

Go here to get more details on how to use it.

11. Andy.scss

Andy.scss is a collection of useful Sass mixins, built to help you develop a website’s look with ease while keeping it light. There are dozens of Sass mixins available, from backgrounds to animations. Almost all common-used CSS properties are covered here. Get it at Github.

More Posts on Sass:





hongkiat.com

A Simple And Easy Guide To Understand Sass

A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started).

In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want:

Tools Of The Trade

Thoriq showed you how you can use Sass from the command line using the sass --watch command.

If you prefer GUI tools, you can go with my personal favourite app, Codekit, a web developer tool for compiling Sass, concatenating, autoprefixing and much more. Prepros is another very capable application which can be used on all systems. Both are paid applications but are well worth it if you’ll be using them in the long run.

If you just want to try out Sass without paying for anything you can use the terminal, or Koala (here’s our review), a free cross-platform feature-rich app, which can hold its ground against premium counterparts.

Variables

One of the first things you’ll need to wrap your head around is variables. If you come from a PHP or other similar coding language background this will be second nature to you. Variables are for storing bits and pieces of reusable information, like a color value for example:

 $  primary_color: #666666; .button { color: $  primary_color; } .important { color: $  primary_color; } 

This may not seem that useful here, but imagine having 3,000 lines of code. If your color scheme changes you would need to replace each color value in CSS. With Sass you can just modify the value of the $ primary_color variable and be done with it.

Variables are used for storing font names, sizes, colors and a host of other information. For larger projects it may we worth extracting all your variables into a separate file (we’ll take a look at how this is done soon). What this allows you to do is recolor your whole project and change fonts and other key aspects without ever touching actual CSS rules. All you need to do is modify some variables.

Nesting

Another basic feature Sass gives you is the ability to nest rules. Let’s assume that you’re building a navigation menu. You have a nav element which contains an unordered list, list items and links. In CSS you may do something like this:

 #header nav { /* Rules for the nav area */ } #header nav ul { /* Rules for the menu */ } #header nav li { /* Rules for list items */ } #header nav a { /* Rules for links */ } 

In the selectors, we are repeating ourselves a lot. If elements have common roots, we can use nesting to write our rules in a much cleaner way.

Here’s how the above code could look in Sass:

 #header { nav { /* Rules for the nav area */ } ul { /* Rules for the menu */ } li { /* Rules for list items */ } a { /* Rules for links */ } } 

Nesting is extremely useful because it makes stylesheets (a lot) more readable. By using nesting together with proper indentation you can achieve highly legible code structures, even if you have a fair amount of code.

One drawback of nesting is that it can lead to unnecessary specificity. In the example above I’ve refered to links with #header nav a. You could also use #header nav ul li a which would probably be too much.

In Sass, it is much easier to be very specific since all you need to do is nest your rules. The following is far less readable and quite specific.

 #header { nav { /* Rules for the nav area */ ul { /* Rules for the menu */ li { /* Rules for list items */ a { /* Rules for links */ } } } } } 

Extending Rulesets

Extending will be familiar if you’ve working with object oriented languages. It is best understood through an example, let’s create 3 buttons which are slight variations of each other.

 .button { display: inline-block; color: #000; background: #333; border-radius:4px; padding:8px 11px; } .button-primary { @extend .button; background: #0091C2 } .button-small { @extend .button; font-size:0.9em; padding:3px 8px; } 

The .button-primary and .button-small classes all extend the .button class which means that they take on all its properties and then define their own.

This is immensely useful in many situations where variations of an element can be used. Messages (alert / success / error), buttons (colors, sizes), menu types and so on could all use the extending functionality for great CSS efficiency.

One caveat of extends is that they won’t work in media queries as you would expect. This is a bit more advanced but you can read all about this behavior in Understanding Placeholder Selectors – placeholder selectors are special kind of extend which we’ll talk about soon.

Mixins

Mixins are another favorite feature of preprocessor users. Mixins are reusable rulesets – perfect for vendor-specific rules or for shorthanding long CSS rules.

How about creating a transition rule for hover elements:

 @mixing hover-effect { -webkit-transition: background-color 200ms; -moz-transition: background-color 200ms; -o-transition: background-color 200ms; transition: background-color 200ms; } a { @include hover-effect; } .button { @include hover-effect; } 

Mixins also allow you to use variables to define the values within the mixin. We could rewrite the example above to give us control over the exact time of the transition. We may want buttons to transition a tiny bit slower for example.

 @mixin hover-effect( $  speed ) { -webkit-transition: background-color $  speed; -moz-transition: background-color $  speed; -o-transition: background-color $  speed; transition: background-color $  speed; } a { @include hover-effect(200ms); } .button { @include hover-effect(300ms); } 

Placeholder Selectors

Placeholder selectors were introduced with Sass 3.2 and solved a problem which could cause a bit of bloat in your generated CSS code. Take a look at this code which creates error messages:

 .message { font-size:1.1em; padding:11px; border-width:1px; border-style:solid; } .message-danger { @extend .button; background: #C20030; color:#fff; border-color: #A8002A; } .message-success { @extend .button; background: #7EA800; color:#fff; border-color: #6B8F00; } 

It is most likely that the message class will never be used in our HTML: it has been created to be extended, not used as is. This causes a little bit of bloat in your generated CSS. To make your code more efficient you can use the placeholder selector which is indicated with a percentage sign:

 %message { font-size:1.1em; padding:11px; border-width:1px; border-style:solid; } .message-danger { @extend %button; background: #C20030; color:#fff; border-color: #A8002A; } .message-success { @extend %button; background: #7EA800; color:#fff; border-color: #6D9700; } 

At this stage you may be wondering what the difference between extends and mixins are. If you use placeholders they behave like a parameter-less mixin. This is true, but the output in CSS differs. The difference is that mixins duplicate rules while placeholders will make sure that the same rules share selectors, resulting in less CSS in the end.

Operations

It’s hard to resist the pun here, but I’ll refrain from any medical jokes for now. Operators allow you to do some math in your CSS code and can be pretty darn helpful. The example in the Sass guide is perfect for showcasing this:

 .container { width: 100%; } article { float: left; width: 600px / 960px * 100%; } aside { float: right; width: 300px / 960px * 100%; } 

The example above creates a 960px based grid system with minimum hassle. It will compile down nicely to the following CSS:

 .container { width: 100%; } article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; } 

One great use I find for operations is to actually mix colors. If you take a look at the success message Sass above it’s not clear that the color of the background and the border have some sort of relationship. By subtracting a shade of gray we can darken the color, making the relationship visible:

 $  primary: #7EA800; .message-success { @extend %button; background: $  primary; color:#fff; border-color: $  primary - #111; } 

The lighter the subtracted color, the darker the resulting shade will be. The lighter the added color, the lighter the resulting shade.

Functions

There are a great number of functions to use: Number functions, string functions, list functions, color functions and more. Take a look at the long list in the developer documentation. I’ll take a look at a couple here just to show you how they work.

The lighten and darken function can be used to change the lightness of a color. This is better than subtracting shades, it makes everything even more modular and obvious. Take a look at our previous example using the darkening function.

 $  primary: #7EA800; .message-success { @extend %button; background: $  primary; color:#fff; border-color: darken( $  primary, 5 ); } 

The second argument of the function is the percentage of darkening required. All functions have parameters; take a look at the documentation to see what they are! Here are a few other self-explanatory color functions: desaturate, saturate, invert, grayscale.

The ceil function, just like in PHP, returns a number rounded to the next whole number. This can be used when calculating column widths or if you don’t want to use a lot of decimal places in the final CSS.

 .title { font-size: ceil( $  heading_size * 1.3314 ); } 

Overview

The features in Sass give us great power to write better CSS with less effort. The proper use of mixins, extends, functions and variables will make our stylesheets more maintainable, more legible and easier to write.

If you’re interested in another similar CSS preprocessor I suggest taking a look at LESS (or check out our beginner’s guide) – the underlying principal is much the same!





hongkiat.com

8 essential Sass resources to sharpen your skills

Read more about 8 essential Sass resources to sharpen your skills at CreativeBloq.com


There are a wealth of resources available to help you take your Sass skills to the next level. The official Sass website itself, sass-lang.com, is very thorough and has tons of examples. Beyond that, here are eight top sites and books to explore:




Creative Bloq

Top 5 Sass mistakes

Read more about Top 5 Sass mistakes at CreativeBloq.com


Sass: the powerful professional grade CSS extension language is a popular tool. But are you using it properly? Here, we share some common Sass pitfalls and how to avoid them.




Creative Bloq

Join the Sass revolution

Read more about Join the Sass revolution at CreativeBloq.com


Sass: you have heard about it. You’ve read about it and probably even given it a try yourself. Before we get to the practical advice though, let’s take a step back and see where Sass came from and where it’s going. In 2006, Hampton Catlin came up with the idea for a scripting language that would add ‘syntactic sugar’ to work around the many limitations of CSS.




Creative Bloq

Talking Sass with the co-founder of Dribbble

Read more about Talking Sass with the co-founder of Dribbble at CreativeBloq.com


Co-founder of Dribbble Dan Cederholm is a busy man.




Creative Bloq

Using Bootstrap 3 With Sass

Bootstrap comes with Responsive Grids, and a few common web components that we can pick up to build a responsive website quickly. If you have seen our previous posts on Bootstrap, you probably know that Bootstrap styles are composed using LESS.

While LESS has become more powerful with new features introduced in version 1.5, some of you might be more familiar with Sass/SCSS. There may also be some features in Sass that you can’t live without, but they are not present in LESS (yet). If you want to work on Boostrap and with Sass, thanks to Thomas McDonald, you can because Bootstrap has been ported to Sass/SCSS.

Installation

There are a few ways to start using Bootstrap + Sass. First, since it has been included as a Ruby gem, you can install it through Terminal with the following command line:

 gem install bootstrap-sass 

You can also use it along with Compass with this command below. It’s the same way as how we install Zurb Foundation. But, please note that this way will only include the _variables.less containing Bootstrap variables, and styles.less where you put your own style-rules.

 compass create my-new-project -r bootstrap-sass --using bootstrap 

Alternatively, you can simply download it from the Github repo.

What’s New in Bootstrap 3

Here are a few new features found in Bootstrap 3.

Flat Design

The change that you can immediately see from the new version, Bootstrap 3, is that it is now embraces flat design. The gradients, and shadows that we found in the previous version components are now gone.

Grid in Bootstrap 3

Bootstrap also introduces a set of new classes and new grid constructions. In version 3, there are Large, Medium, Small, and Extra Small Grids to cater to different viewport sizes. Let’s see the following HTML example:

 <div class="container"> <div class="row"> <div class="column col-md-4 col-sm-6"> <p>Left Column</p> </div> <div class="column col-md-4 col-sm-4"> <p>Middle Column</p> </div> <div class="column col-md-4 col-sm-2"> <p>Right Column</p> </div> </div> </div> 

We have three columns. Each column has an equal width when viewed in a large viewport size (on a desktop screen or landscape orientation on the tablet). The size is applied with col-md-4 class.

Then, when the screen size is getting smaller the column width division will be adjusted with the col-sm-* class, so that column width could remain in the right proportion rather than just being stacked, like in the previous version of Bootstrap.

New Components

There are also some new Components added in version 3. This includes Pager (used for building Next-and-Prev type of navigation), List Group, Panels, and Page Header.

Utilizing Sass Functions

Technically, we can just add Bootstrap classes to the HTML elements to make the website layout, as we did in the example above. But, when using CSS Pre-processors, like Sass, we can utilize some of the functions to achieve a cleaner and more semantic HTML structure rather than being stuffed with meaningless class names.

Given the previous example, we can change the structure as well as class names to something like this:

 <div class="container"> <div class="main-area"> <div class="column content"> <p>This is the Content.</p> </div> <div class="column sidebar"> <p>This is the Sidebar.</p> </div> <div class="column side-nav"> <p>This is the Navigation.</p> </div> </div> </div> 

Within the stylesheet, we can use Sass @extend directive to build the layout. Using @extend will group the selectors that share the same style-rules.

 .main-area { @extend .row; } .column { @extend .col-md-4; } .content { @extend .col-xs-6; @extend .col-sm-6; } .sidebar { @extend .col-xs-4; @extend .col-sm-4; } .side-nav { @extend .col-sm-2; @extend .col-sm-2; } 

Alternatively, you can also use Sass @include which will copy and include the style-rules from mixins into our class selectors.

 .main-area { @include make-row; } .content { @include make-xs-column(6); @include make-sm-column(6); } .sidebar { @include make-xs-column(4); @include make-sm-column(4); } .side-nav { @include make-xs-column(2); @include make-sm-column(2); } .column { @include make-md-column(4); } 

Now, view it on the browser and you will get your responsive layout.

Conclusion

Bootstrap and Sass definitely make a great combo. With Bootstrap, you can build a functioning responsive website in just a few hours. And features in Sass like @extend and @include can help us write leaner, programmable, and maintainable CSS. For more on Sass, you can refer to this article: Getting Started With Sass: Installation And The Basics.

So, have you tried Bootstrap + Sass?


    




hongkiat.com

Jake Giltsoff on combining a love for Sass and type

Read more about Jake Giltsoff on combining a love for Sass and type at CreativeBloq.com


One of the 10 nominees for Young Designer of the Year in the 2014 net Awards, Jake Giltsoff is a designer at fffunction.
    




Creative Bloq

20 Sass and Compass Tools That Every Developer Must Know About

Check out the round up of 20 great tools for SASS and Compass developments.
Template Monster Blog

Animate with CSS using Sass and Compass

Read more about Animate with CSS using Sass and Compass at CreativeBloq.com


When it comes to adding animation and interactivity in the browser, there are countless solutions by many people. What I’m proposing here isn’t a global solution to some problem, but rather a workflow that’s clean, simple, easily editable, and a breeze to maintain.
    




Creative Bloq