[SCSS] Reuse Styles with the SCSS @extend Directive
We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
Extends:
change the source order, mixins don’t.
maintain relationships, mixins don’t.
share inherited traits, mixins don’t.
can extend multiple classes, mixins don’t.
can create multiple class declarations in the compiled CSS, mixins don’t.
can use the placeholder selector, mixins don’t.
Mixins:
can accept arguments, extends don’t.
can pass additional content, extends don’t.
repeat code when compiled, extends group class names together.
work well wIth media queries, extends have a limited interaction wIth media queries.
In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.
.base { color: red; &:hover {color: green} &::after {content: "?"} &-stuff {height: 5rem} // this will not be extended } .cool {height: 20rem} .new { width: 20px; // extend multi classes @extend .base, .cool; } /* It is possible to use placeholder */ %base { color: red; } .new2 { @extend %base; } /* Placeholder for extend with mixin */ %hero {background: linear-gradient(red, white, black)} %villain {background: darkred} @mixin character($type: hero) { height: 20px; width: 20px; @extend %#{$type} // #{} --> output a string } .doc-ock {@include character(villain)} /* Works with media query */ @media screen and (min-width: 800px) { %buddy { color: purple; } } @media screen and (min-width: 800px) { .buddy { @extend %buddy; } }
Reference to http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_
相关文章
- struts2文件下载 出现Can not find a java.io.InputStream with the name的错误
- The connection to adb is down, and a severe error has occured.分析
- SQL SERVER 2005删除维护作业报错:The DELETE statement conflicted with the REFERENCE constraint "FK_subplan_job_id"
- How to Create Mixed Reality Videos for the Vive - with Two Controllers
- [Typescript] Extract the Discriminator from a Discriminated Union
- [RxJS] Defer task execution with the asapScheduler (microtask)
- [Functional Programming] Discard the High and Low Values From an Array of Numbers with Ramda
- [Mise] Update a count state value with the x-on event listener directive in Alpine JS
- [React] Understand the React Hook Flow
- [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional
- [Functional Programming] Combine Multiple State ADT Instances with the Same Input (converge(liftA2(constant)))
- [JWT] JWT Signature With RS256 - Learn The Advantages Compared to HS256
- [SCSS] Write Custom Functions with the SCSS @function Directive
- [SCSS] Write similar classes with the SCSS @for Control Directive
- [CSS] Change the auto-placement behaviour of grid items with grid-auto-flow
- [Javascript] Validate Data with the Every() Method
- [Angular 2] Exposing component properties to the template
- (纪录片)统计的乐趣 The Joy of Stats (2010)
- [AWS] Lab: Configure and Work with CodeCommit from the CLI
- [Next.js] Consume Next.js API routes with the SWR library on the client-side
- [Functional Programming] Combine Multiple State ADT Instances with the Same Input (converge(liftA2(constant)))
- [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
- [SCSS] Loop Over Data with the SCSS @each Control Directive
- [CSS] Change the auto-placement behaviour of grid items with grid-auto-flow
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
- 使用代码创建Hybris storefront订单时遇到错误No result for the given example [TitleModel (&
- There is no source code available for the current location
- Paper之DL之BP:《Understanding the difficulty of training deep feedforward neural networks》
- 成功解决MSB8020 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found. To build using the
- 杭州电 1052 Tian Ji -- The Horse Racing(贪婪)
- Struts2.5.6版本文件下载问题Can not find a java.io.InputStream with the name [downloadFile] in the invocation stack
- How to solve the problem : "You have been logged on with a temporary profile"
- org.apache.subversion.javahl.ClientException: svn: E155021: This client is too old to work with the
- How to use the RMAN Validate Command