Several Sass questions : I just plain don' t get it.

Question

I have this challenge: Open a scope on an <ul> with the ID menu. Inside that, open a scope on a <li> element. Using Sass nesting, add a media query so that the <li> elements will have an attribute of text-align: center when the media is screen and the <li> has a max-width of 500px.

I am completely lost and have no idea where to begin. I can't find the information in the instructor's video, and googleing doesn't help - i don't understand their 'explanations'.

so far I've managed to figure this out:

Write a media directive for screen media with orientation landscape. Within the directive, set the width attribute for all image tags to 360px.

The code for that is:

@media screen and (orientation:landscape) {
    img {
    width: 360px;
  }
}

sigh

I thought that <ul> & id menu were HTML, not CSS or Sass. I have no idea how to work them into a Sass code.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="wrap">
    <h1>Hampton's Blog</h1>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Hampton</a></li>
      <li><a href="#">Hampton's Work</a></li>
    </ul>
    <img src="me2.jpeg" alt="">
    <div class="entry">
        <h1>Delicious Food in SF</h1>
        <div class="content">
          <p>
            You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include Mr. Chow's, Live Sushi and Piccino. 
            <a href="/info.html">Read More</a>
          </p>
      </div>
    </div>
    <div class="entry">
      <h1>Great Music</h1>
        <div class="content">
          <p>
              Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming. 
            <a href="/info.html">Read More</a>
          </p>
        </div>
    </div>
  </div>
</body>
</html>

style.scss

/* Write your SCSS code below. */
@media screen and (orientation:landscape) {
    img {
    width: 360px;
  }
}

Answer 1 · 2015-04-04T02:09:02Z

April 4, 2015 2:09am

OK I think I know what you mean. I'll break it down into a few different points, but if you're having trouble understanding how IDs are used to target elements with CSS or Sass, I recommend taking a step back and doing some basic CSS tutorials first. They cover the concept of targeting elements in more depth that I will in this answer. Anyway, here's how IDs are used in Sass:

In CSS or Sass, classes and IDs are the most common way to target HTML elements. What do I mean by target? I mean that

Say you have a few paragraph elements in your html:

<p>I'm the first paragraph</p>
<p>Hello, I'm the second paragraph</p>
<p>I'm an important paragraph!!</p>
<p>I'm just another paragraph.</p>

You can make all these paragraphs red by targeting the paragraph element in CSS or Sass (this much is the same for either) like this:

p { 
color: red ;
}

But what if you only want to target the important paragraph? You need to distinguish it from the rest of the paragraphs. So you can give it a class or id to do this. Classes are usually more appropriate than IDs, but they work pretty much the same.

<p>I'm the first paragraph</p>
<p>Hello, I'm the second paragraph</p>
<p id="important">I'm an important paragraph!!</p>
<p>I'm just another paragraph.</p>

So now that you have an ID on only that paragraph element, you can target the ID in your CSS, instead of the whole element. To tell the browser that you want to match an ID, you must use a selector. The selector for IDs is a pound sign. So any word that is started with a "#" will be considered an ID. Here's what that looks like:

#important {
color: red;
}

No only the paragraph that has the ID of "important" will be red.

So in short, HTML elements have classes and IDs. In both CSS and Sass, we use selectors to change the styles of HTML elements that have the classes or IDs we target.

I hope that's what you were looking for. I think you should really learn CSS first before trying out Sass though, as Sass will be really hard to learn without understanding the core concepts that you will learn in the CSS courses.

Answer 2 · 2015-04-03T23:05:25Z

April 3, 2015 11:05pm

Hey Steven,

I'm having trouble understanding your questions. It looks like you have a couple typos and missing words. What do you mean by "I thought that & id menu were HTML, not CSS or Sass"?

I think there are some missing words in the first paragraph that make it difficult to understand what the original instruction was. Can you please correct your question? I'd be happy to help but I need to understand what you're having trouble with exactly.

Answer 3 · 2015-04-03T23:34:07Z

April 3, 2015 11:34pm

I believe what you are looking for is something like this

Ul {
    Li {
        //Media query code here
    }
}

<ul> and <li> elements are HTML code. CSS targets HTML elements to apply a style to them. If you want to target all paragraph elements (<p>) you target p in css. all ul elements (<ul>) you target ul in css. So the code li { text-align: center;} will center align all <li> elements on the page. To target a specific id (like <ul id="menu">) you use #menu. SASS is just a precompiler for CSS to make the CSS code you write more readable and more efficient.

Answer 4 · 2015-04-20T19:08:59Z

April 20, 2015 7:08pm

I hate SASS

Welcome to the Treehouse Community

Looking to learn something new?

stevencooper

stevencooper

Several Sass questions : I just plain don' t get it.

stevencooper

stevencooper

4 Answers

Nick Ocampo

Nick Ocampo

Nick Ocampo

Nick Ocampo

stevencooper

stevencooper

jon1234

jon1234

ztwbzekpvk

ztwbzekpvk