Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Variables, Mixins, and Extending Selectors Introducing Mixins

shareyourpeace
shareyourpeace
3,244 Points
Posted by shareyourpeace
shareyourpeace
3,244 Points

Can someone provide simple html to demonstrate the mixin code ?

I added this to the previous index.html file.

<div class="box">
<p> this is content in the box</p>
</div>

But only the words " this is the content in the box" Appears.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

what do you mean? what your trying to do?

shareyourpeace
shareyourpeace
3,244 Points
shareyourpeace
shareyourpeace
3,244 Points

Just want some output in the browser.

3 Answers

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Okay ,

Firstly , did you use HTML blocks for you website? body tags? any tags apart from this? If no i recommend to check out http://teamtreehouse.com/tracks/web-design . This will teach you fundamentals of how to make a webiste. Straight away you will learn how to have some output .

If you use a text editor , save it as .html file or .css file depends what your doing. If HTML save tis as html if CSS save it as CSS.

Paste that in you code editor and save it as html file so e.g. firstwebpage.html

<!DOCTYPE>
<html>
<head>
<title> First output </title>
</head>

<body>
<div class="box">
<p> this is content in the box</p>
</div>
</body>

</html>

if you paste that, you will have your output.

shareyourpeace
shareyourpeace
3,244 Points
shareyourpeace
shareyourpeace
3,244 Points

Thanks for responding and trying to help :) What you suggest - yes - all of that has been taken care of. I have been building websites for a while now.

Here is the screenshot.

http://imgur.com/B0xoMtq

I expected to see the words' This is the content for the Box' surrounded by the border-radius code.

When I hover over the words 'This is the content for the Box', I expect it to turn green.

Just Missing Something here .... a bit of burnout may be the reason.

Here is some of the code. main.css

@mixin roundy($radius, $color)  {
  border-radius: $radius;
  border-top-right-radius: $radius * 2;
  border-bottom-left-radius: $radius * 2;
  a {
      color:$color;
  }
}


@mixin green_links {
    a {
        color:green;
        &:hover {
            color:darkgreen;
        }
    }
    h1 {
        color: red;
    }
}

.box {
    @include roundy(4px,blue);

    .innerbox {
        @include roundy(2px,blue);
    }
    @include green_links;

index.html

<body class="blog">
        <h1>My Topics of Interest Blog Post</h1>
        <div class ="box">
            <p> this is content for the box </p>

        </div>
    <div class ="button"></div>
    <div class="innerbox"></div>
    <span> this is content for the inner box </span>

        <div class ="entry">   
            <h1>Autism linked to pesticides in California</h1>

See it ? Thanks again

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

wait, so you want to put the paragraph different colour when hover over it and turn to green colour?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Would this help you?

<div class="app">
    <p> First paragraph </p>
    <p> Second paragraph </p>
    <p> Third paragraph </p>
</div>

/* targeting the direct descending sibling of the 3rd paragraph*/
p:nth-of-type(3):hover + p{
    color:red;
}
/* targets the 4th paragraph when hovering the second */
p:nth-of-type(2):hover ~ p:nth-of-type(4){
    color:blue;
}
/* targets all paragraphs being siblings of the first paragraph */
p:first-of-type:hover ~ p{
    color:green;
}