Sass的目的之一就是为了少写css代码,便于阅读。
为降低Sass编译后的css代码量,使用组合选择器更能提高网站的速度:
先复习一下css选择器
// 后代选择器 article section { margin: 5px } //祖先元素 后代元素 {} // 子元素选择器 article > section { border: 1px solid #ccc } //父元素 子元素 {} // 兄弟元素选择器 + ~ header + p { font-size: 1.1em } //选中元素 紧跟在选中元素的第一个p元素,如果header后面的第一个元素不是p标签,则该选择器不生效 div ~ p { color: #333 } //前一个~后面所有 选中后面所有指定兄弟元素 //分组选择器(并集选择器) .p1,#p2,.p3...{} // 选择器1,选择器2,选择器n{} 选中多个选择器对应的元素 //复合选择器(交集选择器)注意选择器之间不能有空格,要紧挨着 span.s3 { font-size: 20px } //选中span标签class叫s3的元素 //伪类选择器 伪类表示元素的一种特殊状态 :hover 移入时元素的状态 :visited 已被访问过后的元素的状态 :active 被点击时元素的状态 //通配选择器 用来选中页面中所有的元素 *{ color:red } //属性选择器 根据元素中的属性或属性值来选取指定元素 p[title*="bc"] { backgroud-color: yellow } //把所有title属性值中包含bc的p标签并设置成黄色背景 p[title="abc"] { color: red } //把所有title属性值为abc的p标签并设置成红色 p[title^="abc"] { color: red } //把所有title属性值以abc开头的p标签并设置成红色p[title$="abc"] { color: red } //把所有title属性值以abc结尾的p标签并设置成红色
这些选择器可以毫不费力的用到Sass的规则嵌套中
#div {
~div{ font-size: 12px }; //选中#div后面所有的div标签
>p { backgroud: #eee }; //选中#div下所有的p标签
dl > {
dt { color: #333 };
dd { color: #fff };
};
nav + & { margin: 10px }
}
1.嵌套属性
div{ border-style:solid; border-width:1px; border-color:#222; } //改成: div{ border:{ style:solid; width:1px; color:#222; } }
2.导入Sass
css有一个不常用的@import规则,允许一个css文件导入其他css文件,后果就是只有执行到@import时,浏览器才会下载其他css文件,导致页面加载起来特别慢。
Sass也有一个@import规则,与css不同的是Sass的@import规则在生成css的时候就把相关文件导入进来了,这意味着所有的相关样式被归纳到了同一个css文件中,而无需发起额外的下载请求。被导入文件的变量和混合器都可以再导入文件中使用。
Sass文件散布在项目中,但有些Sass项目的作用只用于导入,Sass特意为这种情况约定了命名规则,即下划线开头,表示该文件只用于被引用,不需要生成对应的独立css文件。被引用时可以省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import “themes/night-sky”,局部文件可以有多个不同文件引用。
标签:总结,知识点,Sass,title,color,元素,选择器,css From: https://www.cnblogs.com/jinGang66/p/16787573.html