Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Proposing SASS Regions #577

Closed
replete opened this Issue · 12 comments

8 participants

@replete

The problem

To keep things organised in larger projects, we're using a modular system of keeping related styles and templates together as 'modules'. For example, our topbar 'module' is made up of topbar.scss, the template topbar.html, and some backend logic.

Because of this arrangement, many repeated @media declarations end up inside our compiled CSS file, like this:

@media only screen and (max-width: 400px) {
    .topbar {
    background:$white}
}
@media only screen and (max-width: 400px) {
    .layout {
    padding:50px}
}

Proposing SASS Regions

Define a region at some point in the SASS chain, and allow SASS content to be repeatedly appended in the order it was called.

While this example is focussed on @media queries, I think Regions is a versatile and useful addition to the SASS language, in-keeping with its goals and current feature set.

Defining a new region:

app.scss, our primary sass stylesheet:

$breakpoint_medium_width: 400px;
$white: #fefefe;
// ...
body {
    background-color:$white;
}
// ...
@media only screen and (max-width: $breakpoint_medium_width) {
    //Defines a new SASS Region (needs better syntax)
    @region('breakpoint_medium');
}

Appending to a region:

topbar.scss, one of our many modules:

//Append this content wherever 'breakpoint_medium' was defined
@region('breakpoint_medium') {
    .topbar {
    background:$white}
}

layout.scss, one of our many modules:

//Append this content wherever 'breakpoint_medium' was defined
@region('breakpoint_medium') {
    .layout {
    padding:50px}
}

Processed output:

app.css, our final compiled CSS:

body {
background-color:#fefefe}

@media only screen and (max-width: 400px) {
    .topbar {   
    background:#fefefe}

    .layout {
    padding:50px}
}

Please comment if you would like to see this become a part of SASS.

@replete

This idea could also be extended to reach regions in separate sass scopes.

For instance, I want to add something to the ie7 region inside the ie.scss master file:

app.scss:

//...
@region('ie7', '../ie.scss') {
    .borris {
    zoom:1;
    display:inline}
}

ie.scss:

//IE stylesheet

.ie7 {

    .some-other-thing { 
    border-top:1px solid transparent;
    //display:block;
    }

    //Define region 
    @region('ie7');
}

ie.css - rendered:

.ie7 .some-other-thing { border-top:1px solid transparent}
.ie7 .borris { zoom:1; display:inline}

This concept can also be applied to things more useful than just IE fixes. Also, what I've demonstrated above wouldn't be fun to work with, it would ideally be simplified into a function, that accepts @content.

@Anahkiasen

+1 for this

@gisu

+1 from me

@nex3
Owner

This is basically a variant of the @buffer syntax brought up in #116. I've already mentioned that I prefer the @target approach outlined in #241.

In general, I'm not convinced that having many copies of the same @media query is a large problem. Other than looking messy (a valid concern but not a critical one), I don't think it causes serious practical problems. It's exactly the sort of textual duplication that gzip compression is excellent at dealing with. Each duplicated query won't end up adding more than a byte or two to the over-the-wire size of the resulting CSS.

@nex3 nex3 closed this
@artemrizhov

Hi @replete ! You can try my implementation (in beta now) of such feature. Comments and suggestions are welcome! :) Description and discussion is in issue #116.

@Writkas

not all the hosting give the gzip compression enabled, and in reality the repetition of media queries is not very attractive... it's my humble opinion. sorry for my english.

@Snugug
@Writkas

@Snugug oks thanks, you have more details about this? is only for a course that I am giving.

@Snugug
@Writkas

@Snugug oks, thanks for the help :+1:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.