摘要：基本规则变量用定义伪类用定义样式可嵌套定义如嵌套规则适用群组选择器选择器的嵌套其实就是拼接空格的使用原生的只有执行到才会加载速度较慢而的在生成文件时就导入相当于合并文件局部文件约定用下划线定义如局部文件不会多带带编译只会存在于引用的文件
基本规则:
变量用$定义
伪类用&定义
样式可嵌套定义,如
#example{
a {
body.ie & hover { color: red }
color: white;
}
div {background:black;}
}
body.ie & hover { color: red } <=> body.ie #example a:hover { color: red }
嵌套规则适用群组选择器,> + ~选择器(sass的嵌套其实就是拼接空格)
border: {
style: left: right:
}
<=>
border-style: border-left: border-right:@import的使用:
原生的只有执行到才会加载,速度较慢;而sass的@import在生成文件时就导入,相当于合并css文件
局部文件,约定用下划线定义,如(_example.scss),局部scss文件不会多带带编译,只会存在于引用的文件中.
局部文件中的变量添加!default( 如 $val = red !default; ),代表默认值,未定义时生效,全局变量添加!global.
嵌套中可调用局部文件,只在当前嵌套中有效
使用原生@import的情况:
文件后缀为.css；
文件名为URL地址（如http://www.sass.hk/css/css.css；
文件名为CSS的url()值
编译后不会显示,格式: // 注释
混合器通过@mixin mixin($a:red,$b)定义,@include 调用,:后面为默认值
使用时机: 能否为这个混合器想出一个好的简短的名字
继承@extend定义,继承与父样式有关的一切样式(如: .child @extend .father)
可以使用选择器,只对选择器命中的样式生效(后面部分),也对子类生效(前面部分).
继承相当于 .father .child,因此会出现复杂的选择器.
为了避免生成大量选择器,不要在css规则中使用后代选择器
.foo .bar { @extend .baz; }
.bip .baz { a: b; }
这个例子有三个情况 foo->bip->bar 、(foo,bip)->foo->bar、bip-> bar,如果其中一条规则的后代选择器更复杂则代码量呈指数增长.
理解scss本质上是字符串的格式编译，比如变量，因为是从上到下格式化成css，所以变量只能写在最前面，编译器读取变量值然后替换引用的部分；又比如伪类、嵌套样式，&则不添加空格直接拼接，：则添加一个-字符。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113974.html
摘要：现在将学习笔记整理在这里，供大家参考。的安装的编辑器安装方法有很多，大致能分为两种应用程序和命令行界面。如果已经安装过，也可以使用指令如果提示权限不足，在命令行前加上即可。参考网页编辑器的使用的使用很简单，记住两条指令即可。 最近因为工作需要，自学了Sass。现在将学习笔记整理在这里，供大家参考。 1. Sass的安装 Sass的编辑器安装方法有很多，大致能分为两种：应用程序（appl...
摘要：前言很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。以前我只使用外部，现在的更加好用，所以在学习过程中记了一些笔记。在后面加一个感叹号，表示这是重要注释。 前言 很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了，虽然没什么干货，但...
阅读 1225·2021-11-19 09:40
阅读 3036·2021-11-02 14:47
阅读 2924·2021-10-11 10:58
阅读 3176·2019-08-30 15:54
阅读 2621·2019-08-30 12:50
阅读 1692·2019-08-29 16:54
阅读 427·2019-08-29 15:38
阅读 1197·2019-08-29 15:19
