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

如果一个样式下有相关的其他样式可以使用 &-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. SpringBoot系列之Elasticsearch极速入门与实际教程

    @ 目录 一.什么Elasticsearch? 二.Elasticsearch安装部署 2.1 Elasticsearch安装环境准备 2.2 Docker环境安装Elasticsearch 2.3 ...

  2. Burp Suite Report - 报告功能

    1. 通过点击Host选择不同的颜色,可以设置严重性: 2.生成网页版应用分析报告:选中所有条目->右击网址,保存所有选中项目,存储格式为html.

  3. 足球动图gif(二)

  4. PJzhang:python基础入门的7个疗程-seven

    猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课 https://www.liaoxuefeng.com/wiki/1016959663602400 第19天:开源模块 数据 ...

  5. 性能1.84倍于Ceph!网易数帆Curve分布式存储开源

    在上周刚结束的网易数字+大会上 网易数帆宣布: 开源一款名为Curve的高性能分布式存储系统, 性能可达Ceph的1.84倍! 网易副总裁.网易杭州研究院执行院长兼网易数帆总经理汪源: 基础软件的能力 ...

  6. 面试高频SpringMVC执行流程最优解(源码分析)

    文章已托管到GitHub,大家可以去GitHub查看阅读,欢迎老板们前来Star! 搜索关注微信公众号 码出Offer 领取各种学习资料! SpringMVC执行流程 SpringMVC概述 Spri ...

  7. JDBC 连接 MySQL 8.0.15+ 常见错误记录

    课后复习 1. No suitable driver found for mysql:jdbc://localhost:3306/test 错误原因: mysql:jdbc://localhost:3 ...

  8. Spring Security 实战干货:理解AuthenticationManager

    1. 前言 我们上一篇介绍了UsernamePasswordAuthenticationFilter的工作流程,留下了一个小小的伏笔,作为一个Servlet Filter应该存在一个doFilter实 ...

  9. Java环境变量设置:Path、CLASSPATH、JAVA_HOME的作用分别是什么?

    1.Path 作用是指定命令搜索路径,在i命令行下面执行命令如javac编译java程序时,它会到PATH变量所指定的路径中查找百看是否能找到相应的命令程序.        需要把jdk安装目录下的b ...

  10. 呕心搜集总结的15个“swoole”常见问题(一)

    一.升级Swoole版本 可以使用 pecl 进行安装和升级 pecl upgrade swoole 也可以直接从 github/gitee/pecl 下载一个新版本,重新安装编译. 更新 Swool ...