Add extend/inherit and operator definitions (#28490)
* Add extend/inherit and operator definitions * Update index.mdpull/28715/head^2
parent
5b79aba887
commit
eddf9063fc
|
@ -117,8 +117,8 @@ Mixins can also take arguements. For example:
|
|||
## Extends
|
||||
Sometimes you’ll want one selector to share the styles of another selector. The `@extend` directive works like mixins in that you’re able to share snippets of code across your stylesheets. `@extend` is useful for sharing sets of related properties that get repeated in your stylesheets, such as base styles for button sets.
|
||||
|
||||
Example:
|
||||
```css
|
||||
Example 1:
|
||||
```sass
|
||||
.btn--primary {
|
||||
background-color: #333;
|
||||
border-radius: 5px;
|
||||
|
@ -132,5 +132,37 @@ Example:
|
|||
}
|
||||
```
|
||||
|
||||
Example 2:
|
||||
```sass
|
||||
%success {
|
||||
background-color:green;
|
||||
color:white;
|
||||
}
|
||||
|
||||
#myDiv {
|
||||
@extend %success;
|
||||
font-size:10px;
|
||||
}
|
||||
|
||||
#myOtherDiv {
|
||||
@extend %success;
|
||||
font-size:20px;
|
||||
}
|
||||
```
|
||||
Both selectors(`#myDiv` and `#myOtherDiv`) will inherit properties from `%success`, while maintaining their own unique properties.
|
||||
|
||||
## Operators
|
||||
|
||||
Sass adds mathematical operators, such as +, -, *, / and % to CSS.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
#myDiv {
|
||||
height: 1920px / 480px;
|
||||
width: 1080px * 2;
|
||||
}
|
||||
```
|
||||
|
||||
## Additional Resources
|
||||
- [Official Sass website](https://sass-lang.com/)
|
||||
- [Official Sass website](https://sass-lang.com/)
|
||||
|
|
Loading…
Reference in New Issue