sass用法总结(持续更新中)
官网:https://www.sass.hk/
1,嵌套规则
1.1普通嵌套:Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
1.2父选择器 &:(hover)
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover
样式时,或者当 body
元素有某个 classname 时,可以用 &
代表嵌套规则外层的父选择器。
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
} 编译为
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
编译后的 CSS 文件中 &
将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递:
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
} 编译为 #main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }
&
必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如
#main {
color: black;
&-sidebar { border: 1px solid; }
} 编译为 #main {
color: black; }
#main-sidebar {
border: 1px solid; }
当父选择器含有不合适的后缀时,Sass 将会报错。
2,变量
2.1 SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em; //直接使用即调用变量: #main {
width: $width;
} //变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明: #main {
$width: 5em !global;
width: $width;
} #sidebar {
width: $width;
} 编译结果为: #main {
width: 5em;
} #sidebar {
width: 5em;
}
2.2 vuecli3中使用全局变量:
https://www.cnblogs.com/lonhon/p/9887993.html
3,混合器:
可以通过sass
的混合器实现大段样式的重用
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
} notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
} //sass最终生成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
在.notice
中的属性border-radius
-moz-border-radius
和-webkit-border-radius
全部来自rounded-corners
这个混合器。
混合器使用@mixin
标识符定义。然后就可以在你的样式表中通过@include
来使用这个混合器,放在你希望的任何地方。@include
调用会把混合器中的所有样式提取出来放在@include
被调用的地方。
通过使用参数,你可以使用混合器把你样式中的通用样式抽离出来,然后轻松地在其他地方重用。实际上,混合器太好用了,一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大,导致加载缓慢。
sass用法总结(持续更新中)的更多相关文章
- vue中的一些用法,持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
- Pig基础学习【持续更新中】
*本文参考了Pig官方文档以及已有的一些博客,并加上了自己的一些知识性的理解.目前正在持续更新中.* Pig作为一种处理大规模数据的高级查询语言,底层是转换成MapReduce实现的,可以作为MapR ...
- Pig语言基础-【持续更新中】
***本文参考了Pig官方文档以及已有的一些博客,并加上了自己的一些知识性的理解.目前正在持续更新中.*** Pig作为一种处理大规模数据的高级查询语言,底层是转换成MapReduce实现的, ...
- PHP 日常开发过程中的bug集合(持续更新中。。。)
PHP 日常开发过程中的bug集合(持续更新中...) 在日常php开发过程中,会遇到一些意想不到的bug,所以想着把这些bug记录下来,以免再犯! 1.字符串 '0.00'.'0.0'.'0' 是 ...
- 史上最全的spark面试题——持续更新中
史上最全的spark面试题——持续更新中 2018年09月09日 16:34:10 为了九亿少女的期待 阅读数 13696更多 分类专栏: Spark 面试题 版权声明:本文为博主原创文章,遵循C ...
- 2020年腾讯实习生C++面试题&持续更新中(3)
2020年腾讯实习生C++面试题&持续更新中(3) hello,大家好,我是好好学习,天天编程的天天. 来给大家大家分享腾讯实习生面经了. 天天希望大家看到面经后一定要做充分的准备,结合自己掌 ...
- 2020年腾讯实习生C++面试题&持续更新中(1)
2020年腾讯实习生C++面试题&持续更新中(1) 腾讯面试整理(1) 最近大三的学生找实习生的同学非常多,给大家分享一篇腾讯实习生的面试题,关于面试题,会持续更新~~~ 也算是今天开通博客的 ...
- 【前端面试】Vue面试题总结(持续更新中)
Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...
- git常用命令(持续更新中)
git常用命令(持续更新中) 本地仓库操作git int 初始化本地仓库git add . ...
- Atom使用记录(持续更新中)
部分内容取自:http://www.jianshu.com/p/dd97cbb3c22d,我自己也在使用,持续更新中 Atom安装插件在窗口中File---Setting---install 在里面进 ...
随机推荐
- MVCC实现机制
1. MVCC简介 1.1 什么是MVCC MVCC(Multiversion concurrency control )是一种多版本并发控制机制. 1.2 MVCC是为了解决什么问题? 并发访问(读 ...
- IDEA导入Eclipse 非Maven的Web项目
- MySQL的变量
MySQL的变量 变量分两种,系统变量和用户变量 来源:https://blog.csdn.net/J080624/article/details/73828012 [1]系统变量 系统定义好的变量, ...
- Django框架——基础教程(总)
1. Django简介 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...
- se37 函数中的异常使用
一种是rase <exceptions> FUNCTION ztest. *"-------------------------------------------------- ...
- TensorFlow入门——MNIST初探
import tensorflow.examples.tutorials.mnist.input_data as input_data import tensorflow as tf mnist = ...
- springboot-异步线程调用
启动类:添加@EnableAsync注解 @SpringBootApplication @EnableAsync public class Application{ public static voi ...
- 在mysql 上如何在不影响生产的情况下删除一个大表
mysql 中常用的删除的方法基本上有下面三种方式: 1.delete 一般用于删除少量表中的数据 优化建议,一定要加上where 条件,并且where条件的列上 一定要有主键或者索引.否则会出现全表 ...
- php 多肽实例
多态定义:只关心一个接口或者基类,而不关心一个对象的具体类.(同一类型,不同结果) 这里两个例子: 第一个,我们发现,基类定义了标准,子类进行了自我规则的实现.这是多态的一个要求.同时,这是满足重写: ...
- 构建docker基本镜像
1.准备: 创建一个目录oldboy-hello 2.编写Dockerfile 内容如下,只有三行 FROM scratch ADD hello / CMD ["/hello"] ...