Bootstrap 4 ALPHA SASS error.

Question

I was trying to compile Bootstrap's 4 SCSS (v4-alpha.getbootstrap.com) files however I got the following error.

Image-> http://postimg.org/image/ndbnru6cb/

Any idea what's causing this?

I recently created an HTML template using Boostrap and SASS via SCOUT.

I created one extra file called "_custom.scss" where I put all of my customization styles/CSS. Boostrap 4 alpha contains "_variables.scss" where you can edit the background colors, color, shadows and many more. However for some reason when I tried to edit this part:

// Settings for the `<body>` element.

    $body-bg:                    #000 !default;
    $body-color:                 $gray-dark !default;

It won't just allow me and won't reflect the changes on my Boostrap HTML template. Here's what I have on my section on my HTML file.

<head>
<title>Boostrap 4 - Tutorial</title>

    <meta charset="utf-8">
    <meta name="author" content="Sam Norton">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>

Now here's my _custom.scss file has:

/* GENERAL STYLES
-------------------------------------------------*/
body {
    font-family:'Lato', sans-serif;
    font-size:1em;
    color:#777;
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
    color:#333;
    line-height:1.4;
    font-weight:700;
}

.mx-width {
    max-width:960px;
    margin:0 auto;
}

a,a:hover {
    color:#563d7c;
    text-decoration:none;
}

img {
    max-width:100%;
}

header {
    padding-bottom:50px;
}

.intro {
    font-family:'Lato';
    font-size:60px;
    line-height:1;
    font-weight:300;
    color:#fff
}

.learn {
    font-family:'Lato';
    font-size:27px;
    line-height:1.4;
    font-weight:300;
    color:#fff;
}

.jumbotron-fluid {
    padding:0;
}

Basically I have the following folder on my project:

Image -> http://i.stack.imgur.com/rc4Dx.png

IF YOU WANT TO SEE THE FILES THEY ARE HERE: http://goo.gl/rEt7sI

Answer 1 · 2015-09-09T15:59:19Z

September 9, 2015 3:59pm

You need to start by looking at the line of code where the error message is stating.

I'm not sure what line it is but you're missing a semicolon in your color declaration for the class called intro. See if that makes a difference to begin with.

Welcome to the Treehouse Community

Looking to learn something new?

Sam Dalusung

Sam Dalusung

Bootstrap 4 ALPHA SASS error.

1 Answer

Pete Cass

Pete Cass

Sam Dalusung

Sam Dalusung