SASS bootstrap media queries/sass files

Question

I'm trying to make a responsive website with SASS Bootstrap but I'm having problems with sass stylesheets.

When I include the sass version of my style sheet it only picks out certain elements of my HTML, like the top level elements, not anything that is inside a row or a column, whereas the CSS version works perfectly fine.

I have also made a separate stylesheet for my media queries and it is not responding!

Head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/sass-bootstrap.css" rel="stylesheet">
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

Scripts:

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/sass-bootstrap.min.js"></script>

Media Queries:

$screen-lg-min: 1200px;
$screen-md-min: 992px;
$screen-sm-min: 768px;

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Sass Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { 

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { 

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}

I'm probably doing something wrong but if anyone could be of any help I would appreciate it.

Answer 1

Read about how to compile Sass files into CSS

Basically you just need to compile them:

$ gem install sass
$ sass sass/main.scss main.css
$ sass sass/media-screens.scss media-screens.css

Then edit this in your html

<link href="main.css" rel="stylesheet">
<link href="media-screens.css" rel="stylesheet">

I would recommend settings up the watch task for fast development

$ sass --watch main.scss:main.css

In that last example, I would recommend importing your media query stylesheet into main so you don't have to compile a bunch of files.

And even better, use an automated build tool like Grunt to do all of this for you.

Answer 2

// DEVICE LIST //
$xs-min: "only screen and (min-width:none)";
$xs-max: "only screen and (max-width:520px)";
$xs-sm: "only screen (min-width: none) and (max-width:767px)";

$sm-min: "only screen and (min-width:768px)";
$sm-max: "only screen and (max-width:991px)";
$sm-md: "only screen (min-width: 768px) and (max-width:991px)";

$md-min: "only screen and (min-width:992px)";
$md-max: "only screen and (max-width:1199px)";
$md-lg: "only screen (min-width: 992px) and (max-width:1199px)";

$lg-min: "only screen and (min-width:1200px)";
$lg-max: "only screen and (max-width:none)";

Write down your device list like above, customize break-points. Use #{ } while using it in SCSS. Also make sure you are using compass because it is using helper method of compass.

/* Small devices (tablets, 768px and up) */
@media #{$sm-min} { 

}

/* Medium devices (desktops, 992px and up) */
@media #{$md-min} { 

}

/* Large devices (large desktops, 1200px and up) */
@media #{$lg-min} { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}

Answer 3

<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

Looks that you use scss files in your page, but Browser doesn't support scss files. First of all you need compile your scss files to css files, maybe Scount app can help you: http://mhs.github.io/scout-app/