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;
}
}

[Sass] Level 4: Extend -- Ex的更多相关文章

  1. sass的mixin,extend,placeholder,function

    1. mixin 就是定义了一个函数,可以传参,并且设定默认值,css选择器可以通过@include来引用,mixin混入的代码,就是原样复制,不会合并,会造成冗余 例如: @mixin br6($b ...

  2. [Sass] Level 3: Mixin -- Ex

    When to use MIXIN? Better way to use MIXIN is when you deal with browser prefiex, for example: @mixi ...

  3. SASS详解之沿袭(extend)

    SASS详解之继承(extend) 每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的.当一个div的身上有两个类名,一个是“one”,另一个是“two”的时候.如下 HTML代码 < ...

  4. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  5. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  6. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  7. SASS使用总结

    简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; ...

  8. Sass@规则

    @importSass 支持所有 CSS3 的 @ 规则, 以及一些 Sass 专属的规则,也被称为“指令(directives)”.Sass 扩展了 CSS 的 @import 规则,让它能够引入 ...

  9. Sass介绍及入门教程

    Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...

随机推荐

  1. 「HNOI2018」转盘

    「HNOI2018」转盘 现场推出了大部分结论但是只写了 \(40\) 分暴力,被贺指导踩爆,现在还有点怀念 HNOI2018 贺指导对着镜子荒野行动的日子,那几天他云球迷瞎**指点篮球,被送上指导称 ...

  2. 【20181102T1】优美的序列【二分+ST表】

    题面 [正解] 相当于是 \(GCD_{i=L}^{R} A_i = min_{i=L}^{R} \{A_i\}\) 然后GCD可以用ST表实现\(O(log A_i)\)查询 并且GCD是递减的,所 ...

  3. UVALive 4868 Palindrometer 暴力

    F - Palindrometer Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit ...

  4. C#高级编程9 第11章 Linq

    Linq 1.Linq概述 列表和实体 准备数据: public class Championship { public int Year { get; set; } public string Fi ...

  5. Jmeter实现webservice的接口测试

    前提条件 测试的URL:http://ws.webxml.com.cn/WebServices/WeatherWS.asmx 测试接口:getSupportCityString 获取城市的编码:htt ...

  6. Go语言Web框架gwk介绍 (二)

    HttpResult 凡是实现了HttpResult接口的对象,都可以作为gwk返回Web客户端的内容.HttpResult接口定义非常简单,只有一个方法: type HttpResult inter ...

  7. 如何在ubuntu安装phpstorm

    第一步:使用组合键ctrl+alt+t 打开Terminal,cd /home/xxx(当前登录用户名)/downloads(下载目录) 第二步:下载 phpstorm 附截止发文最新版本链接:htt ...

  8. druid数据源

    Druid是一个JDBC组件,它包括三部分:  DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系. DruidDataSource 高效可管理的数据库连接池 ...

  9. HDOJ 4876 ZCC loves cards

    枚举组合,在不考虑连续的情况下推断能否够覆盖L...R,对随机数据是一个非常大的减枝. 通过检測的暴力计算一遍 ZCC loves cards Time Limit: 4000/2000 MS (Ja ...

  10. C#编程(六)------------枚举

    原文链接:http://blog.csdn.net/shanyongxu/article/details/46423255 枚举 定义枚举用到的关键字:enum public enum TimeOfD ...