官网: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用法总结(持续更新中)的更多相关文章

  1. vue中的一些用法,持续更新中......

    1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...

  2. Pig基础学习【持续更新中】

    *本文参考了Pig官方文档以及已有的一些博客,并加上了自己的一些知识性的理解.目前正在持续更新中.* Pig作为一种处理大规模数据的高级查询语言,底层是转换成MapReduce实现的,可以作为MapR ...

  3. Pig语言基础-【持续更新中】

      ***本文参考了Pig官方文档以及已有的一些博客,并加上了自己的一些知识性的理解.目前正在持续更新中.***   Pig作为一种处理大规模数据的高级查询语言,底层是转换成MapReduce实现的, ...

  4. PHP 日常开发过程中的bug集合(持续更新中。。。)

    PHP 日常开发过程中的bug集合(持续更新中...) 在日常php开发过程中,会遇到一些意想不到的bug,所以想着把这些bug记录下来,以免再犯! 1.字符串 '0.00'.'0.0'.'0'  是 ...

  5. 史上最全的spark面试题——持续更新中

    史上最全的spark面试题——持续更新中 2018年09月09日 16:34:10 为了九亿少女的期待 阅读数 13696更多 分类专栏: Spark 面试题   版权声明:本文为博主原创文章,遵循C ...

  6. 2020年腾讯实习生C++面试题&持续更新中(3)

    2020年腾讯实习生C++面试题&持续更新中(3) hello,大家好,我是好好学习,天天编程的天天. 来给大家大家分享腾讯实习生面经了. 天天希望大家看到面经后一定要做充分的准备,结合自己掌 ...

  7. 2020年腾讯实习生C++面试题&持续更新中(1)

    2020年腾讯实习生C++面试题&持续更新中(1) 腾讯面试整理(1) 最近大三的学生找实习生的同学非常多,给大家分享一篇腾讯实习生的面试题,关于面试题,会持续更新~~~ 也算是今天开通博客的 ...

  8. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  9. git常用命令(持续更新中)

    git常用命令(持续更新中) 本地仓库操作git int                                 初始化本地仓库git add .                       ...

  10. Atom使用记录(持续更新中)

    部分内容取自:http://www.jianshu.com/p/dd97cbb3c22d,我自己也在使用,持续更新中 Atom安装插件在窗口中File---Setting---install 在里面进 ...

随机推荐

  1. MVCC实现机制

    1. MVCC简介 1.1 什么是MVCC MVCC(Multiversion concurrency control )是一种多版本并发控制机制. 1.2 MVCC是为了解决什么问题? 并发访问(读 ...

  2. IDEA导入Eclipse 非Maven的Web项目

  3. MySQL的变量

    MySQL的变量 变量分两种,系统变量和用户变量 来源:https://blog.csdn.net/J080624/article/details/73828012 [1]系统变量 系统定义好的变量, ...

  4. Django框架——基础教程(总)

    1. Django简介 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...

  5. se37 函数中的异常使用

    一种是rase <exceptions> FUNCTION ztest. *"-------------------------------------------------- ...

  6. TensorFlow入门——MNIST初探

    import tensorflow.examples.tutorials.mnist.input_data as input_data import tensorflow as tf mnist = ...

  7. springboot-异步线程调用

    启动类:添加@EnableAsync注解 @SpringBootApplication @EnableAsync public class Application{ public static voi ...

  8. 在mysql 上如何在不影响生产的情况下删除一个大表

    mysql 中常用的删除的方法基本上有下面三种方式: 1.delete 一般用于删除少量表中的数据 优化建议,一定要加上where 条件,并且where条件的列上 一定要有主键或者索引.否则会出现全表 ...

  9. php 多肽实例

    多态定义:只关心一个接口或者基类,而不关心一个对象的具体类.(同一类型,不同结果) 这里两个例子: 第一个,我们发现,基类定义了标准,子类进行了自我规则的实现.这是多态的一个要求.同时,这是满足重写: ...

  10. 构建docker基本镜像

    1.准备: 创建一个目录oldboy-hello 2.编写Dockerfile 内容如下,只有三行 FROM scratch ADD hello / CMD ["/hello"] ...