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.


@mixin links($color:#000,$tdec:none){
               text-decoration: #{$tdec};

Then use the mixin ;

@include links();


@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.

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 {
  &: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 ( 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.

Need Your Help

Algorithm/pattern for selecting sub-collections using LINQ and C#

c# linq algorithm design-patterns

I have a C# collection of strings. Each string is a sentence that can appear on a page. I also have a collection of page breaks which is a collection of int's. representing the index where the coll...

How to add a button to Firefox?

firefox firefox-addon

I would like to add a simple button to the Firefox interface: The button will bookmark the current page under the most recently used bookmark folder.