sass study notes (2)

1. Select an identifier of the parent &

Here sass this will not work
article a { color: blue; :hover { color: red } }.

The solution is to use a special selector & sass, as follows:

article a {
  color: blue;
  &:hover { color: red }
}

/*编译后*/
article a { color: blue }
article a:hover { color: red }

You can add selectors before the parent selector

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

2. Nested group selector

The following changes will waste a lot of time to write selector

.container h1, .container h2, .container h3 { margin-bottom: .8em }

sass nested very useful in certain scenarios, when a group selector sass unlock rules embedded rules, it will each selector embedded rules out the correct solution:

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

3. Select sub-combinations and combinations of the same layer as the selector:>, + and -

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

/*sass会如你所愿地将这些嵌套规则一一解开组合在一起:*/

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

4. The nested property

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

Nested attribute rule is such that: attribute name from the scribe line - where disconnection, a colon behind the root attributes:, {} followed by a block, the sub-attribute written in this section {} block. Like nested css selectors, like, sass your child will undo the property, the roots attributes and sub-attributes in part by the dash - to link up with the last generation of effect you manually write css styles over and over again the same:

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

For the short form of the property, you can even be nested like this below, indicate the exception to the rule:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

After compiling

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}