Extend Only First Level on Sass

How to @extend from another sass file, or how to achieve OOSASS?

The problem is here:

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

ruddy and fullwidth aren't selectors. If you're extending the .ruddy class, you need to include the period, as that is part of the selector.

#intro {@extend .ruddy; @extend .fullwidth}
aside {@extend .ruddy;}
.thing {@extend .fullwidth;}

Sass extend arguments or a workaround

Might I recommend taking advantage of the lang attribute? You could just as easily use mixins instead of extends if you wanted.

http://codepen.io/cimmanon/pen/tshuK

@mixin margin($v) {
  @if length($v) == 4 {
    margin: $v;

    &:lang(ar) {
      margin: nth($v, 1) nth($v, 4) nth($v, 3) nth($v, 2);
    }
  } @else {
    margin: $v;
  }
}

@mixin margin-right($v) {
  margin-right: $v;

  &:lang(ar) {
    margin-left: $v;
  }
}

:lang(en) {
  direction: ltr;
}

:lang(ar) {
  direction: rtl;
}

%float-left {
  //&:lang(en) {
    float: left;
  //}

  &:lang(ar) {
    float: right;
  }
}

%align-left {
  //&:lang(en) {
    text-align: left;
  //}

  &:lang(ar) {
    text-align: right;
  }
}

.content {
    width:500px;
    margin:20px auto;
    padding:20px;
    background:#e5e5e5;
    overflow:auto;
    h1, p {
        margin:0;
    }
    .thumbnail {
        @extend %float-left;
        //@include margin(0 20px 0 0);
        @include margin-right(20px);
    }
    .description {
        @extend %float-left;
        @extend %align-left;
    }
}

Instead of using a class, you would set the lang attribute on whatever ancestor element you feel is appropriate (it could be all the way up on the html or body tag if you want).

<div lang="en"></div>

SASS, when to extend?

You should only use extend when you have a certain attribute set that will be used multiple times. The sheer stupidy of extending a class with a class with one attribute that has the unit value worked into the name of it is incomprehensible.

A better example for a reason to extend can be found in the reference guide

Say we have 2 classes

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

.error is a general no interesting style but a serious error should be really clear.

.seriousError is created to thicken the line, the only problem is that now we have to use both classes in the html to combine the styles.

Because we're lazy and just want to use one class and not duplicate code that might be changed in the future we can extend .seriousError with .error

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

Now we didn't duplicate the code in our sass file but did get the right styles on the page.

Check out the reference guide for more/better examples.

Just please for the sake of kittens stop extending classes with one attribute classes. And don't implicitly state the value/attributes in the selector, thats not very semantic.

You, and your team, should read this post which explains a few problems with the aproach you take here vs semantic code. Couldn't find a better tuned post this quick.

Sass extend with pseudo selectors

When you want to extend a pseudo class or pseudo element, you just want to extend the parent selector (ie. everything that comes before the colon).

%foo:before {
  color: red;
}

.bar {
  @extend %foo;
}

Generates:

.bar:before {
  color: red;
}

So for your instance, what you want to do is this:

.icon-ab-logo, {
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

%foo:before, .icon-ab-logo:before { //i want to reuse this.
    content: "\e000";
}

@mixin icon( $icon ){
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    @extend #{$icon};
}

.bar {
    @include icon('%foo');
}

Be aware that your mixin generates a lot of styles, so it's not really suitable for extensive reuse. It would make a lot more sense to be extending that as well.

Target first level lis and not the nested lis

Have a container <div> with a class, and use the > selector. Lets say your container div's class is "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Note: the > selector does not work in IE6 and below when used as a CSS selector. It does work in all other browsers though, including IE7 and IE8, and when used in JQuery, it works in all browsers supported by jQuery, including IE6.

---

Related Topics