[SCSS] Organize Styles with SCSS Nesting and the Parent Selector
SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions.
.box { &-container { /* .box-container, & --> .box*/
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} transition: all 0.8s ease-in-out;
&:hover {
background-color: #ff4d4d;
transform: rotate(360deg);
}
background-color: #5fb3ce;
border: 1px solid burlywood;
font-size: 1.5em;
width: 200px;
height: 200px;
}
To css:
.box {
transition: all 0.8s ease-in-out;
background-color: #5fb3ce;
border: 1px solid burlywood;
font-size: 1.5em;
width: 200px;
height: 200px; }
.box-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh; }
.box:hover {
background-color: #ff4d4d;
transform: rotate(360deg); }
[SCSS] Organize Styles with SCSS Nesting and the Parent Selector的更多相关文章
- [SCSS] Organize SCSS into Multiple Files with Partials
Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your perform ...
- vue项目安装scss,以及安装scss报错(this.getResolve is not a function)
1.安装scss: npm install node-sass sass-loader vue-style-loader --save-dev //安装node-sass sass-loader vu ...
- [SCSS] Reuse Styles with the SCSS @extend Directive
We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It dep ...
- [SCSS] Reuse Styles with the SCSS @mixin Directive
Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mi ...
- [SCSS] Use Standard Built-in SCSS Functions for Common Operations
We can use javascript for color and opacity variations, math, list and map logic or to see if someth ...
- 如何在 SCSS 使用 JavaScript 变量/scss全局变量
Update2019/3/6:发现一个更好的方法,预处理器加载一个全局设置文件 官方github给出了详细的配置. 在 SCSS 中使用变量很方便,创建一个 variables.scss 文件,里面声 ...
- react layout init
class Layout extends React.Component { constructor(props) { super(props); } render() { return ( < ...
- 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...
- element-ui的table表格控件表头与内容列不对齐问题
原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...
随机推荐
- 阅读笔记——Web应用程序
Web应用程序与DD文件 Web应用程序 web应用程序是一种可以通过Web访问的应用程序.Web应用程序最大的好处是永和很容易访问应用程序.用户只需要有浏览器即可,不需要安装其他任何软件.一个Web ...
- 6.CPP风格数组
//数组初始化 1 #include <iostream> using namespace std; void main() { //C int a[5] = { 1,2,3,4,5 }; ...
- php网页跳转无法获取session值
今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...
- ThinkPHP5.0---删除数据
删除特定记录 public function delete() { // 获取要删除的对象:关键字为16 $Teacher = Teacher::); // 删除对象 $Teacher->del ...
- Flask项目之手机端租房网站的实战开发(五)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- 洛谷 P1657 选书
P1657 选书 题目描述 学校放寒假时,信息学奥赛辅导老师有1,2,3……x本书,要分给参加培训的x个人,每人只能选一本书,但是每人有两本喜欢的书.老师事先让每个人将自己喜欢的书填写在一张表上.然后 ...
- 《你不知道的JavaScript(上)》笔记——提升
笔记摘自:<你不知道的JavaScript(上)>第3章 提升 1.包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理. 2.变量和函数声明从它们在代码中出现的位置被“移动”到了 ...
- (转)bat批处理的注释语句
在批处理中,段注释有一种比较常用的方法: goto start = 可以是多行文本,可以是命令 = 可以包含重定向符号和其他特殊字符 = 只要不包含 :start 这一行,就都是注释 :start 另 ...
- js闭包(函数内部嵌套一个匿名函数:这个匿名函数可将所在函数的局部变量常驻内存)
js闭包(函数内部嵌套一个匿名函数:这个匿名函数可将所在函数的局部变量常驻内存) 一.总结 1.闭包:就是在一个函数内部嵌套一个匿名函数,这个匿名函数可以访问这个函数的变量. 二.要点 闭包 闭包的相 ...
- 【例题 6-6 UVA - 679】Dropping Balls
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 直接模拟会超时. 根据奇偶的规律.直接判断会往哪里走就好. 每个二叉树的节点.必然是左边和右边走的次数对半分.->奇数左边多一 ...