[Sass] Level 4: Extend -- Ex
Better use @extend with % placeholder.
Extend is useful when you want to reuse some of you class. Always use % placeholder.
EXTEND I
It looks like .blueprint
and .surveyor
have a number of matching properties. Add an @extend
to .surveyor
to make this section more efficient.
.blueprint {
background: blue;
border-radius: 5px;
margin-bottom: 15px;
padding: 10px;
}
.surveyor {
background: blue;
border-radius: 5px;
color: #fff;
margin-bottom: 15px;
padding: 10px;
}
Answer:
.blueprint {
background: blue;
border-radius: 5px;
margin-bottom: 15px;
padding: 10px;
}
.surveyor {
@extend .blueprint;
color: #fff;
}
NESTED EXTEND
The developers are using .notice
in some places of the application, .error
in others, and are unable to only use one or the other. Extend the .notice
styles into an .error
declaration.
.notice {
background: yellow;
border: 5px solid #000;
padding: 20px;
&.alert {
background: red;
box-shadow: 0 0 10px red;
}
a {
color: #222;
&:hover {
color: #313131;
}
}
}
Answer:
.notice {
background: yellow;
border: 5px solid #000;
padding: 20px;
&.alert {
background: red;
box-shadow: 0 0 10px red;
}
a {
color: #222;
&:hover {
color: #313131;
}
}
}
.error {
@extend .notice;
}
EXTEND III
Some of the CSS copied over originally contains already-combined selectors. Refactor the segment below to make use of extend on .socket
instead, in case we need to add elements later.
.socket,
.wrench,
.bolt {
border-radius: 50%;
padding: 15px;
width: 30px;
}
.wrench {
width: 100px;
}
.bolt {
padding: 14px;
}
Answer:
.socket {
border-radius: 50%;
padding: 15px;
width: 30px;
}
.wrench {
@extend .socket;
width: 100px;
}
.bolt {
@extend .socket;
padding: 14px;
}
PLACEHOLDER SELECTOR I
.group
(commonly referred to as clearfix) is used throughout our application for clearing floats. To keep use of this relegated to our styles rather than allowing .group
to be added as a class, convert .group
over to a placeholder selector and update the extend inside .factory
.
.group {
zoom:;
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
} .factory {
@extend .group;
background: #fff;
}
Answer:
%group {
zoom:;
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
} .factory {
@extend %group;
background: #fff;
}
PLACEHOLDER SELECTOR II
Whoops - we've discovered an alteration to .blueprint
later in our stylesheet, and extending.blueprint
with .surveyor
is creating extra selectors in .factory
that aren't needed. Create a placeholder selector called container
to hold the shared properties and extend it with.blueprint
and .surveyor
to remove the extra .factory .surveyor
selector.
.blueprint {
background: blue;
border-radius: 5px;
margin-bottom: 15px;
padding: 10px;
}
.surveyor {
@extend .blueprint;
color: #fff;
} .factory {
background: #fff;
.blueprint {
margin-bottom: 20px;
}
}
Answer:
%container{
background: blue;
border-radius: 5px;
margin-bottom: 15px;
padding: 10px;
} .blueprint {
@extend %container;
}
.surveyor {
@extend %container;
color: #fff;
} .factory {
background: #fff;
.blueprint {
margin-bottom: 20px;
}
}
[Sass] Level 4: Extend -- Ex的更多相关文章
- sass的mixin,extend,placeholder,function
1. mixin 就是定义了一个函数,可以传参,并且设定默认值,css选择器可以通过@include来引用,mixin混入的代码,就是原样复制,不会合并,会造成冗余 例如: @mixin br6($b ...
- [Sass] Level 3: Mixin -- Ex
When to use MIXIN? Better way to use MIXIN is when you deal with browser prefiex, for example: @mixi ...
- SASS详解之沿袭(extend)
SASS详解之继承(extend) 每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的.当一个div的身上有两个类名,一个是“one”,另一个是“two”的时候.如下 HTML代码 < ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SASS使用总结
简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; ...
- Sass@规则
@importSass 支持所有 CSS3 的 @ 规则, 以及一些 Sass 专属的规则,也被称为“指令(directives)”.Sass 扩展了 CSS 的 @import 规则,让它能够引入 ...
- Sass介绍及入门教程
Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...
随机推荐
- luoguP4492 [HAOI2018]苹果树 组合计数 + dp
首先,每个二叉树对应着唯一的中序遍历,并且每个二叉树的概率是相同的 这十分的有用 考虑\(dp\)求解 令\(f_i\)表示\(i\)个节点的子树,根的深度为\(1\)时,所有点的期望深度之和(乘\( ...
- BZOJ.3489.A simple rmq problem(主席树 Heap)
题目链接 当时没用markdown写,可能看起来比较难受...可以复制到别的地方看比如DevC++. \(Description\) 给定一个长为n的序列,多次询问[l,r]中最大的只出现一次的数.强 ...
- 【贪心】【后缀自动机】Gym - 101466E - Text Editor
题意:给你两个串A,B,以及一个整数K,让你找到B的一个尽可能长的前缀,使得其在A串中出现的次数不小于K次. 对A串建立后缀自动机,然后把B串放在上面跑,由于每到一个结点,该结点endpos集合的大小 ...
- Java中的Runnable、Callable、Future、FutureTask的区别
本文转载自:http://blog.csdn.net/bboyfeiyu/article/details/24851847 Runnable 其中Runnable应该是我们最熟悉的接口,它只有一个ru ...
- bzoj 4017 子序列和的异或以及异或的和
位运算很好的一个性质是可以单独每一位考虑..... 题解请看:http://blog.csdn.net/skywalkert/article/details/45401245 对于异或的和,先枚举位, ...
- GIT(5)----常用命令:新分支,切换,删除,远程推送,标签,日志
常用命令 1.新分支 创建新分支:git branch <branch_name> 创建分支并切换到新的分支上:git checkout -b <branch_name> 2. ...
- Ransac 与 最小二乘(LS, Least Squares)拟合直线的效果比较
代码下载地址 http://pan.baidu.com/s/1eQIzj3c 进入目录后,请自行定位到该博客的源代码与数据的目录“
- java基础知识概要图
- Oracle约束的启用和停用
关于Oracle的约束概念和基本操作,我已经在以前的<Constraint基础概念>.<Constraint的简单操作>两篇文章中有过比较详细的介绍了,但是对于如何停用和启 ...
- java中ant包中的org.apache.tools.zip实现压缩和解压缩
其实apache中的ant包(请自行GOOGLE之ant.jar)中有一个更好的类,已经支持中文了,我们就不重复制造轮子了,拿来用吧,这里最主要的功能是实现了 可以指定多个文件 到同一个压缩包的功能 ...