SASS @extend官方文档剖析

宋华发布于2019-08-29 11:00 / 3287人阅读

摘要：但是这两个其实都是相差无几的，只是有细微的差别。目前就先这样理解，其实这个实现的方式是跟我们现实逻辑颠倒的。但是为了避免不必要的重复。和会调换位置，换完之后在省略重复的。

@extend用法剖析

提醒：建议继承那些干净的无后代写法的样式

我们经常会遇到这样的情况，当我们在开发页面时候一个class需要包含前一个class的所有样式，但是又必须有他自己特殊新增的样式。但是这两个class其实都是相差无几的，只是有细微的差别。比如错误提示的样式(.error和.specialerror),既然后着只是比前者多一两句样式，为何还要写两个class呢，因为我们不想把前者.error的样式重新在写一遍，无聊极了。但是这样带来一个问题，就是html标签上会多出好几个class。

为了解决这个问题，sass里提供了@extend的解决方法
先看一个例子：


  Oh no! You"ve been hacked!

我们的css如下

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.specialerror {
  border-width: 3px;
}

这里就出现我们刚说的问题了，其实我们心里是十万个不愿意就这么在后面唐突的加个specialerror的，因为如果只写specialerror，就丢失了前面的样式（为什么呢，因为我们没有在specialerror里复写error的样式，只是新增了）

通过Sass的@extend，一个选择器将继承另一个选择器的样式
例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.specialerror {
  @extend .error;
  border-width: 3px;
}

被编译为：

.error, .specialerror {
  border: 1px #f00;
  background-color: #fdd;
}

.specialerror {
  border-width: 3px;
}

意味着.error所有的样式都会加到.specialerror上，这样.specialerror就会有.error的样式了。这样我们就可以只写.specialerror了。目前就先这样理解，其实这个@extend实现的方式是跟我们现实逻辑颠倒的。

但是如果改成这样：

 .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .specialerror {
      @extend .error;
      border-width: 3px;
    }
    .error.intrusion {
      background-image: url("/image/hacked.png");
    }

加上面这段样式后

就会加上和

一样的背景

怎么做到的呢

.error {
      border: 1px #f00;
      background-color: #fdd;
    }
    
.error.intrusion {
  background-image: url("/image/hacked.png");
}

.specialerror {
  @extend .error;
  border-width: 3px;
}

被编译为：

.error, .specialerror {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .specialerror.intrusion {
  background-image: url("/image/hacked.png"); }

.specialerror {
  border-width: 3px; }

这里需要重点讲解下，其实我们正常理解增加扩充添加就是copy然后paste,是的，这样思考其实也是对的，就像文章一开始那个最简单的例子。但是为了避免不必要的重复。@extend的逻辑稍稍不同。你可以这样认为，使用@extend时候sass会将.error相关样式先拷贝一份，

 .specialerror {
      @extend .error;
      border-width: 3px;
    }

然后把字符“specialerror”存储在@extend里，遇到”error“字符就进行替换，这样.specialerror就有了.error的样式啦！这也就能解释，为什么会出现下面.specialerror.intrusion的原因了。

  .error.intrusion, .specialerror.intrusion {
      background-image: url("/image/hacked.png"); }

当组合选择器的样式时， @extend 能够很聪明得避免不必要的重复，例如.seriousError.seriousError会被转换成.seriousError。不会生成类似#main#footer的不可用选择器。

求证例子：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

被编译为：

a:hover, .hoverlink {
  text-decoration: underline; }

就像上面的.error.intrusion ,任何使用 a:hover 都会替换为 .hoverlink,即使中间包含其他选择器。例如：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

被编译为：

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

Multiple Extends

一个选择器还可以扩充多个选择器的样式例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

被编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

对于下面这种只需注意下就行，就是.criticalError内 “@extend .seriousError”这句话。在运行这句语句时候，sass会检测到.seriousError内有“@extend .error”。
所以.criticalError既有.error的样式也有.seriousError的样式，故criticalError需要替换的是error和seriousError。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

被编译为：

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

选择器序列
例如.foo .bar或者 .foo + .bar, 目前还不能被扩展. 但是对于嵌套的选择器还是可以使用@extend添加到其他选择器的例如：

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

编译为：

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

当两个没有共同点的序列扩充组合时候, 将会产生两个不同的选择器: 一种是第一个序列在前，另一种是第二个序列在前例如： #admin .tabbar会和#demo .overview调换位置。

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

被编译为：

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

如果另个序列有一些共同的选择器，这些选择器将会被组合在一起而且只有不同的将会保留下来。下面这个例子中，每个写都包含id #admin, 所以产生的选择器就会合并这两个#admin。#admin .tabbar和 #admin .overview会调换位置，换完之后在省略重复的。

  #admin .tabbar a {
      font-weight: bold;
    }
    #admin .overview .fakelink {
      @extend a;
    }

这被编译为：

 #admin .tabbar a,
    #admin .tabbar .overview .fakelink,
    #admin .overview .tabbar .fakelink {
      font-weight: bold; }

云服务器 GPU云服务器 webrtc官方文档 Kfaka官方文档 hbase官方文档 mongodb官方文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111360.html

【React 实战教程】从0到1 构建 github star管理工具

摘要：公司的前端技术栈是，而笔者之前使用的是，因此正好想利用的自己构建个的管理项目来加深的使用。会出现不在尾部的问题。前言在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提...

Charlie_Jade 2019-08-23 11:58 评论0 收藏0
gulp-work-flow 前端工作流原来可以这么简单

摘要：话不多说，今天的主题是使用打造传统项目的前端工作流。是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。这意味着，你可以用的方式编写程序，又不用担心现有环境是否支持。概述最近前端一直是一个火热的话题，前端技术栈也是伴随着nodejs的出现而更替的飞快，导致大部分前端开发者曾一度迷茫在这各种技术选型上，比如前端自动化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 评论0 收藏0
sass的基本使用

摘要：本文所有的例子都是在中编译，而可以自行编译，具体可以查看该链接配置的概念定义是的一种预处理器，文件后缀名为，可以用中的来转成样式。最近在项目中利用到了css预处理器（sass），而之前没接触过的本博主出于好奇心，就在业余的时间里搜了一些资料来看看，看完后觉得sass挺不错，就想简单的介绍一下sass的基本使用方法（ps：本文只介绍sass的一些基本使用，而这些内容都是本博主觉得比较有...

alighters 2019-08-30 15:53 评论0 收藏0
React+TypeScript+Mobx+AntDesignMobile进行移动端项目搭建

摘要：通过装饰器或者利用时调用的函数来进行使用下面代码中当或者发生变化时，会监听数据变化确保通过触发方法自动更新。只能影响正在运行的函数，而无法影响当前函数调用的异步操作参考官方文档用法装饰器函数遵循中标准的绑定规则。前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技术栈,使用Create-React-App脚手架进行一个移动端项目搭建，主要介绍项...

lindroid 2019-08-23 18:24 评论0 收藏0
wepy - 一个小程序的组件化开发框架

摘要：主要解决问题开发模式转换在原有的小程序的开发模式下进行再次封装，更贴近于现有框架开发模式。官方代码获取应用实例事件处理函数基于的实现支持组件化开发。根组件，一般都是页面父组件小程序对象子组件列表方法参数返回值说明组件初始化。小程序框架wepy文档 Github地址快速入门项目创建与使用安装wepy 以下安装都通过npm安装安装 wepy 命令行工具。 npm install ...

I_Am 2019-08-20 12:30 评论0 收藏0