CODEWITHSUNDEEP
csssass
Questioner
Questioner

Reputation: 7463

How can SASS help me develop responsive web designs?

I have been designing with CSS for years, but I am only just now learning how to use SASS. This is very much a beginner question, so please bear with me.

The reason I started looking into SASS was because I wanted to develop a responsive web design, but was hoping there was a better way to do it than manually make different style sheets for every screen size.

I believe that in principle, a CSS preprossesor like SASS should help with this issue... but at the moment I don't understand how.

If I have a div with the id #squishable, and on large screens I want it to have a width of 1000 pixels, and on small screens a width of 100 pixels, but a red background in both cases, I think I would do something like this:

$color = red;

#squishable {
    backgorundcolor: $color;
}

@media only screen
and (min-width : 321px) {

    #squishable {
        width:100px;
    }
}

@media only screen
and (min-width : 1824px) {
    #squishable {
        width:1000px;
    }
}

However, I'm not sure this approach is in much of an advantage over just using CSS. Maybe as an example, it's too simplistic. But, in any case, I don't see exactly what I would be doing differently with SASS to make it easier to code for a responsive web design. Is this all there is to it?

Can someone help me get over this conceptual hurdle and let me know how I take advantage of SASS to create elements that are responsive? Hopefully with a simple example similar to what I've got above?

Upvotes: 2

Views: 664

Answers (3)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

You can absolutely improve your workflow further!

Using SASS @mixin, @include, @content and regular variables you can setup an environment where you create your media queries "inline", or inside of your regular selectors if you will.

This is my mixin for media queries:

(never mind the stupid variable names and placeholder breakpoints)

// Breakpoints
$mq-tiny:   5em;
$mq-small:  10em;
$mq-medium: 15em;
$mq-large:  20em;
$mq-huge:   25em;
$mq-crazy:  30em;

@mixin mq($size, $direction: min-width, $media-type: only all) {
  @if      $size == tiny   { @media #{$media-type} and (#{$direction}: $mq-tiny)   { @content; } }
  @else if $size == small  { @media #{$media-type} and (#{$direction}: $mq-small)  { @content; } }
  @else if $size == medium { @media #{$media-type} and (#{$direction}: $mq-medium) { @content; } }
  @else if $size == large  { @media #{$media-type} and (#{$direction}: $mq-large)  { @content; } }
  @else if $size == huge   { @media #{$media-type} and (#{$direction}: $mq-huge)   { @content; } }
  @else if $size == crazy  { @media #{$media-type} and (#{$direction}: $mq-crazy)  { @content; } }
  @else                    { @media #{$media-type} and (#{$direction}: $size)      { @content; } }
}

And here's an example of how it can be used:

SCSS:

.selector {
  width: 100px;

  @include mq(large) {
    width: 1000px;
  }
}

CSS output:

.selector {
  width: 100px
}

@media only all and (min-width: 20em) {
  .selector {
    width: 1000px
  }
}

Take note that you don't need to use a variable name for the width. You can pass 1000px instead of large if you want to.

You may also have noticed the optional arguments in the @mixin; $direction and $media-type. These arguments default to min-width and only all respectively, but if you pass them through the @include they'll change for that specific element only.

Example with other arguments:

SCSS:

.selector {
  @include mq(1000px, min-height) {
    width: 100px;
  }
}

CSS output:

@media only all and (min-height: 1000px) {
  .selector {
    width: 100px
  }
}

Hope this helps!

Edit: Here's a pen if you want to play around with it.

Upvotes: 3

Weimin Ye
Weimin Ye

Reputation: 665

Highly recommend you develop your SAAS css style import bootstrap framework, it will save you much time at responsive web designs

More detailed information please see this link: http://pivotallabs.com/sass-with-bootstrap/

Upvotes: 0

Artem Petrosian
Artem Petrosian

Reputation: 2954

To increase maintainability of your code you can use variables to define media queries breakpoints:

// define breakpoints
$small-screen: 321px;
$large-screen: 1824px;

$small: "only screen and (min-width:"#{$small-screen}")";
$large: "only screen and (min-width:"#{$large-screen}")";
// and so on...


// now you can esely manipulate with your media breakpoints
@media #{$small} {
    ...
}

@media #{$large} {
    ...
}

Upvotes: 1

Related Questions