[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预处理器”中的一 ...
随机推荐
- 本地文件包含漏洞(LFI漏洞)
0x00 前言 本文的主要目的是分享在服务器遭受文件包含漏洞时,使用各种技术对Web服务器进行攻击的想法. 我们都知道LFI漏洞允许用户通过在URL中包括一个文件.在本文中,我使用了bWAPP和DVW ...
- 20162307 课堂测试 hash
20162307 课堂测试 hash 作业要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合:85, ...
- elasticsearch 亿级数据检索案例与原理
版权说明: 本文章版权归本人及博客园共同所有,转载请标明原文出处( https://www.cnblogs.com/mikevictor07/p/10006553.html ),以下内容为个人理解,仅 ...
- HDU 5683 zxa and xor 暴力模拟
zxa and xor 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5683 Description zxa had a great interes ...
- 基于Landmark的人脸对齐以及裁剪方法
利用Landmarks进行人脸对齐裁剪是人脸检测中重要的一个步骤.效果如下图所示: 基本思路为: a.人脸检测 人脸的检测不必多说了,基本Cascade的方式已经很不错了,或者用基于HOG/FHOG的 ...
- 解决Xilinx ISE在Win8下打开崩溃闪退的方法
http://www.121down.com/article/article_13651.html 坑爹的ISE对win8无法完美支持(包括目前最新的14.6),在使用64位ISE时点击OPEN之类的 ...
- 【Go入门教程7】面向对象(method、指针作为receiver、method继承、method重写)
前面两章我们介绍了函数和struct,那你是否想过函数当作struct的字段一样来处理呢?今天我们就讲解一下函数的另一种形态,带有接收者(receiver)的函数,我们称为method method ...
- Oracle手工生成段建议(Segment Advisor)
一.描写叙述 从oracle 10g開始,oracle引入了段顾问(Segment Advisor),用于检查数据库中是否有与存储空间相关的建议,而且从10gR2開始,oracle自己主动调度并执行一 ...
- Visual Studio调试的10个技巧
本篇体验Visual Studio的10个调试技巧,包括: 1.插入断点和断点管理2.查看变量信息3.逐语句F11,逐过程F10,跳出Shift+F114.查看堆栈信息5.设置下一条执行语句6.调试时 ...
- MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple
从控制器传递多个Model到视图,可以通过ViewData, ViewBag, PartialView, TempData, ViewModel,Tuple等,本篇逐一体验.本篇源码在github. ...