Closed DanielKehoe closed 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.
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.
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,
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:
I tried the same thing with semantic-ui-sass but it didn't work:
Here is the view file that uses the
section
tag:If I replace
with
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?