CSS Simplify by SCSS

Even though you use SCSS to help you to write down css and it already uses tree-structure to make things more simply, things are not done yet. Here lists several ways to make it more efficient.

1. Duplicate styles

If you meet duplicate styles, you can group them together and then assign css style.

.toolbar-item, .toolbar-layer {
  background-image: url(../img/toolbar.png);
  background-repeat: no-repeat;
}

2. Twin styles

Some styles are not exactly the same, they can use variables to cover these differences.

First you need to define “function” to clarify its content.

@mixin toolbar-item($pos, $hoverPos){
  background-position: 0 $pos;
  &:hover {
    background-position: 0 $hoverPos;
  }
}

And then you apply it to where you want to use.

@include toolbar-item(-674px, -736px);

This method is also very useful for making css style good for every browser. Here gives an example.

@mixin transition($transition){
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
@mixin opacity($opacity){
  opacity: $opacity;
  filter: alpha(opacity=$opacity);
}

3. Common Styles

When some of css styles are used in multiple files, we can put all these styles to one file, named “_mixin.scss”. When you want to use these styles, you just use this to import:

@import "mixin"

Please note, you don’t need to include dash sign and its extension.

4. Use existing styles

You also can extend other existing styles.

.error {
   border: 1px solid #f00;
   background: #fdd;
}

.badError {
   @extend .error 
   border-width: 3px;
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s