如果定义样式的时候,内层样式名称和外层保持一致的话可以简写如下

如果一个样式下有相关的其他样式可以使用 &-xxx 来简写,

<template>
<div class="test-container">
<div class="test-container-header">header</div>
<div class="test-container-body">body</div>
<div class="test-container-footer">footer</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.test-container {
background: pink;
height: 200px;
&-header {
font-size: 24px;
color: #67c23a;
}
&-body {
font-size: 24px;
color: #f56c6c;
}
&-footer {
font-size: 24px;
color: #909399;
}
}
</style>

Scss 定义内层class的简单写法的更多相关文章

  1. 使用Ext.Net时,配置文件的最简单写法

    使用Ext.Net时,配置文件的最简单写法 <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配 ...

  2. html5滚动页面简单写法

    html5滚动页面简单写法纵向滚动比较简单 直接在外面加个高度 然后overflow-y: auto; 横向比较复杂了外面写两层 最外面一层写个宽度 overflow-x: auto;第二层 写wid ...

  3. PHP去重的简单写法

    PHP去重的简单写法用array_flip实现去重效果 <pre><?php$arr =array("a"=>"a1","b& ...

  4. MYSQL的存储过程和函数简单写法

    存储过程 MySQL中,创建存储过程的基本形式如下: CREATE PROCEDURE sp_name ([proc_parameter[,...]]) [characteristic ...] ro ...

  5. lua 定义类 就是这么简单

    在网上看到这样一段代码,真是误人子弟呀,具体就是: lua类的定义 代码如下: local clsNames = {} local __setmetatable = setmetatable loca ...

  6. java 自己定义异常,记录日志简单说明!留着以后真接复制

    log4j 相关配制说明:http://blog.csdn.net/liangrui1988/article/details/17435139 自己定义异常 package org.rui.Excep ...

  7. foreach循环的简单写法

    简单的foreach循环写法: pickedItems.ForEach(item => { this.List.Remove(item); }); //注意,List 必须和pickedItem ...

  8. javascript模块简单写法

    写法1: (function (wd, doc) { var mw = {}; mw.noConflict = noConflict; var _$ = wd.$; wd.$ = mw; functi ...

  9. IOS第八天(7:UITableViewController新浪微博,cell 复用的简单写法优化和cell高度从模型中获取)

    *********** #import "HMViewController.h" #import "HMStatus.h" #import "HMSt ...

随机推荐

  1. 学Python常用数据结构之字典

    迄今为止,我们已经为大家介绍了Python中的三种容器型数据类型,但是这些数据类型还不足以帮助我们解决所有的问题.例如,我们要保存一个人的信息,包括姓名.年龄.体重.单位地址.家庭住址.本人手机号.紧 ...

  2. c# Winfrom-DataGridView实现筛选功能

      //应对用户需求,需要在DataGridView中直接进行筛选功能,在网上找了一些代码加上自己修改整理过后的类,仅供参考! //上面代码可以直接创建类库项目生成DLL文件,下面代码为另外项目引用创 ...

  3. navcat 增删改查

    navcat // sql 语句结尾的地方需要 设置为空 SELECT * FROM users ; UPDATE users SET uname = 'hezhi' WHERE uid = 3 // ...

  4. ST表解决RMQ问题

    RMQ问题: RMQ(Range Minimum/Maximum Query),区间最值查询.对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j之间 ...

  5. windows 下部署 .netcore 到 iis

    园子里已经有许多 ASP.NET Core  部署的相关文章,不同环境有不同的配置方法,建议同鞋们在动手之前也看看官方说明,做到心中有数.我在实践的时候用的是 win8.1 + .net core 3 ...

  6. vue学习(十九) 生命周期 了解

    生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...

  7. liunx安装和部署nacos配置中心

    1.下载https://github.com/alibaba/nacos/releases  nacos-server-1.3.1.tar.gz  源码包2.上传到liunx服务器   /usr/lo ...

  8. Python数据类型-str,list常见操作

    一.字符串操作 语法:字符串名.startwith('字符串') 功能:判断字符串里是否以xxx开头 范例: 扩展:从控制台接收输入居住地址,如果地址以北京市开头,则输出北京人口,否则输入非北京人口. ...

  9. onepill服务端

    运行git搞崩掉了重新创建... 1.新建SpringBoot项目 应该就这些 2. 使用的框架: 数据库:Spring Date JPA Service+Dao+Controller OKHttpC ...

  10. 利用div显示隐藏实现的分页效果

    实现步骤: 1.创建对应切换div <div class="bottom_daohang"> <div class="bottom_daohang_zo ...