Question about using @extend

DanielKehoe commented 10 years ago

I'm considering using Semantic-UI instead of Foundation for my book for Rails beginners (here http://learn-rails.com/learn-ruby-on-rails.html).

I'm having trouble using Sass @extend with semantic-ui-sass. Perhaps it is my limited knowledge of Sass but I hope you can clarify.

In the book I show how to use @extend to apply a CSS class to an HTML element, like this:

#app/assets/stylesheets/framework_and_overrides.css.scss
@import "foundation";
section {
  @extend .row;
  }

I tried the same thing with semantic-ui-sass but it didn't work:

#app/assets/stylesheets/framework_and_overrides.css.scss
@import "semantic-ui";
section {
  @extend .center;
  @extend .aligned;
  @extend .two;
  @extend .column;
  @extend .row;
  @extend .stackable;
  @extend .ui;
  @extend .grid;
  }

Here is the view file that uses the section tag:

#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Test</title>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <main role="main" class="ui one column page grid">
      <section>
        <div class="column">
          <p>Some words.</p>
        </div>
        <div class="column">
          <p>More words.</p>
        </div>
      </section>
    </main>
  </body>
</html>

If I replace

<section>

with

<section class="center aligned two column row stackable ui grid">

I get the results I want, which is two side-by-side columns.

What am I overlooking? Can you say why this doesn't work with semantic-ui-sass?

doabit commented 10 years ago

Hi, semnantic ui likes foundation, but more semantic, it can't use @extend xx now, it only can be used with nested class, e.g:

<section class="center aligned two column row stackable ui grid">
  <div class="column">
  </div>
</section>

In semantic ui, we can found .column class

.ui.grid > .column,
.ui.grid > .row > .column {
  display: inline-block;
  text-align: left;
  font-size: 1rem;
  padding-left: 1.5%;
  padding-right: 1.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
}

That means we muse use nested css, can't use extend, e.g:

section {
  @extend .center;
  @extend .aligned;
  @extend .two;
  @extend .column;
  @extend .row;
  @extend .stackable;
  @extend .ui;
  @extend .grid;
  }

This is foundation's code:

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
......
}

It dosen't need nested css, so we can use it like:

section {
  @extend .row;
}

So, if we use semantic ui, we must follow it's way, you can look at http://semantic-ui.com/guide/cssguide.html.

DanielKehoe commented 10 years ago

Thank you for the quick reply and good explanation.

So we can't "make our own class" using Sass when we use Semantic UI?

It seems we have to stick with the class names provided with Semantic UI and not combine or rename them. That seems to take away some of the benefit of using Sass.

doabit commented 10 years ago

Yes, we can't make our own class now. This is it and foundation differences. see https://github.com/jlukic/Semantic-UI/issues/216#issuecomment-29059921,

doabit / semantic-ui-sass

Question about using @extend #2