官网: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. VS Code 配置碰到的问题

    VS Code 呈现缩进参考线以及语法高亮改变 找到 首选项——>设置→搜索renderIntentGuides→将此选项改为true(默认为false),就可以了.

  2. 无障碍开发(三)之ARIA aria-***属性值

    aria-***属性值

  3. luogu题解 P1707 【刷题比赛】矩阵加速递推

    题目链接: https://www.luogu.org/problemnew/show/P1707 分析: 洛谷的一道原创题,对于练习矩阵加速递推非常不错. 首先我们看一下递推式: \(a[k+2]= ...

  4. 移动端H5开发自适应技巧

    移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...

  5. html/form表单常用属性认识

    1.form表单常用属性练习 <style> .form1 { margin: auto; height: 900px; width: 500px; text-align: center; ...

  6. vue中添加与删除,关键字搜索

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python中re模块

    1.定义 正则表达式是一个特殊的字符序列,能方便的检查一个字符串是否与某种模式匹配.re模块使得python拥有全部的正则表达式功能. 2.用途 通过使用正则表达式,可以:测试字符串内的模式.—— 例 ...

  8. 本地安装Mysql后,navicat链接异常:Clinet dose not support authentication protocol request by server ; consider upgrading MySQL client

    第一步:首先通过cmd进入mysql 在命令窗口 输入:mysql -u root -p: 第二步:更改加密方式 mysql> ALTER USER 'root'@'localhost' IDE ...

  9. Woobuntu

    Wooyun + Ubuntu = Woobuntu Woobuntu是基于Ubuntu系统的一款安全研究环境配置工具,可以自动安装并配置众多的安全工具与依赖环境,此外还针对中国用户的习惯进行了一些优 ...

  10. 升级python导致yum报错的解决方法

    把python从2.7升级到3.6后 , 使用yum报错 File ‘’/usr/bin/yum'', line 30 except KeyboardInterrupt, e: ^ 故障原因:yum采 ...