[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 @extendto .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;
}
}
最新文章
- Anagrams
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
- SQL语句题库
- php 引用其他action中的方法
- C#实现局域网文件传输
- mysql同时修改2个表思路
- 从Count看Oracle执行计划的选择
- iOS开发——网络编程Swift篇&（八）SwiftyJSON详解
- JavaScript中的this引用
- HTML最基础的入门(上)
- STL sort函数的用法
- PHP初入，for循环使用
- JavaScript（六）函数
- 关于Bootstrap自定义图标
- Mac 安装配置nexus2.6 搭建Maven的中央仓库
- 20155228 2016-2017-2 《Java程序设计》第2周学习总结
- nginx配置 解决ajax请求跨域问题
- html部分常用标签的含义及作用
- unidbgrid单元格操作
- linux和docker的capabilities介绍
热门文章
- BZOJ 1449: [JSOI2009]球队收益 最小费用最大流 网络流
- Educational Codeforces Round 45 (Div 2) (A~G)
- bzoj 5055: 膜法师 -- 树状数组
- Codeforces Round #355 (Div. 2) D. Vanya and Treasure 分治暴力
- poj 1825 Ants 水题
- git pull的时候出错： Git Couldn't reserve space for cygwin's heap
- A* search算法解迷宫
- 【Eclipse提高开发速度-插件篇】安装多语言Propertys编辑工具
- C#托管堆对象实例包含什么
- 跨境网上收款 找PayPal没错(获取Client ID 和 secret)