CODEWITHSUNDEEP
csssass
Jason Chen
Jason Chen

Reputation: 2577

Re-Order My Code In SASS?

I'm trying to learn SASS now, and I'm having trouble trying to visualize exactly how differently I would arrange my code. How would I, for instance, arrange the following code into SASS so that it avoids repetition?

a: link {color: #000; text-decoration: none;}
a: visited {color: #000; text-decoration: none;}
a: acive {color: #000; text-decoration: none;}

Currently the only way I can think of is adding two different variables with the following appropriate attributes, but that still seems repetitive to me. I have also considered mixins, but am unsure how exactly to incorporate them in this example.

��Thanks in advance for the help. Also, as far as I understand it, SASS isn't meant to enhance web performance, just workflow. Is this correct? I say this specifically because, when processed, the code ends up looking the same on CSS.

Upvotes: 0

Views: 193

Answers (2)

davidpauljunior
davidpauljunior

Reputation: 8338

The repeated part of this is the a and the styles color: #000; text-decoration: none.

So, with SASS you can nest your styles so you only need to write a once. The syntax for :link etc, is &:link.

Therefore, you can write:

a {
  &:link,
  &:visited,
  &:active {
    color: #000;
    text-decoration: none;
  }
}

Or if you do have variables, e.g. $black: #000; you can swap them in. color: $black.

It's not only for workflow though. One of the main advantages of using SASS (or LESS) is that you can organise your SASS files separately e.g. _buttons.scss, _layout.scss etc, and then import (using @import) them all into one 'theme.scss' and then have SASS compile the 'theme.scss'.

How this compilation is done depends on your setup, but Compass (Compass.app for the UI lovers like me) is a very popular option. What you end up with is the browser only request 1 file for styles, rather than many.

Upvotes: 2

samma89
samma89

Reputation: 123

@mixin links($color:#000,$tdec:none){
     a{
          &:link,&:visited,&:active{
               color:#{$color};
               text-decoration: #{$tdec};
          }
     }
}

Then use the mixin ;

@include links();

or

@include links(#fee,underline);

may be this is what you're looking for.

Yeah. SASS doesnt meant to enhance web performance. But im sure SASS can mess your CSS if you use it wrong way(unnecessary nesting etc). When you get used to it, it'll save your coding time alot.

Upvotes: 0

Related Questions