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_

[SCSS] Reuse Styles with the SCSS @extend Directive的更多相关文章

  1. [SCSS] Reuse Styles with the SCSS @mixin Directive

    Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mi ...

  2. 在vue-cli中如何安装scss,并全局引入scss

    在vue-cli脚手架采用scss正确的使用姿势 步骤一: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev ...

  3. [SCSS] Organize Styles with SCSS Nesting and the Parent Selector

    SCSS nesting can produce DRYer code by targeting child elements without having to write the parent c ...

  4. error app/styles/components/iconfont.scss (Line 12: Invalid GBK character "\xE5")

    因为要用到iconfont,引入iconfont到sass文件后,出现编译sass文件错误,如下截图: 解决方法:在顶部设置编码格式 @charset "utf-8"; 编译成功!

  5. 在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)

    项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-d ...

  6. dvaJs使用注意事项

    项目参考地址 dva-yicha 1. 使用路由跳转的方式 (1)所有的路由跳转功能都放到 dva/router 里面的 import { routerRedux } from 'dva/router ...

  7. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  8. Scss开发临时学习过程

    SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...

  9. 前端之Sass/Scss实战笔记

    简介 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正 ...

随机推荐

  1. 关于编译com工程的一些体会

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天发现com的编译的一个重要一步是微软提供的midl工具将其中的idl文件生成一个头文件.c文件(即IID文件)和代 ...

  2. 在Sql中将 varchar 值 '1,2,3,4,5,6' 转换成数据类型 int

    --问题:将aa转换为Int类型失败 string aa="3,5,11,56,88,45,23"; select * from ERPBuMen where ID in(aa) ...

  3. 洛谷 P2026 求一次函数解析式

    P2026 求一次函数解析式 题目背景 做数学寒假作业的怨念…… 题目描述 给定两个整点的坐标,求它们所在直线的函数解析式(一次函数). 输入输出格式 输入格式: 输入共两行. 第一行有两个整数x1, ...

  4. 自定义HTML标签属性

    为HTML元素添加一自定义的属性非常方便,只须将其加到尖括号中即可,与内置属性地位相等. 如我们要为TextBox元素添加属性idvalue: <input type="text&qu ...

  5. 7,NULL与nullptr对比

    #include <iostream> #include <array> using namespace std; void show(int num) { cout < ...

  6. Android Studio com.android.dex.DexException: Multiple dex files define(重复引用包)

    如果你用Android Studio开发,并且要用其他项目作为library,这个问题是很容易出现的.出现这个问题的原因是包的重复引用,意思就是在你自己的项目中引用了某个包,而被你作为library的 ...

  7. php网页跳转无法获取session值

    今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...

  8. 使用Spring Security3的四种方法概述

    使用Spring Security3的四种方法概述 那么在Spring Security3的使用中,有4种方法: 一种是全部利用配置文件,将用户.权限.资源(url)硬编码在xml文件中,已经实现过, ...

  9. WebService学习总结(2)——WebService是什么?

    一.WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨平台的规范(抽象) 3. 多个跨平台.跨语言的应用间通信整合的方案(实际 ...

  10. 解决Keystore was tampered with, or password was incorrect

    使用签名文件keystore查看生成的数字签名中报错解决 Keystore was tampered with, or password was incorrect 这是由于android规定自己定义 ...