sass精华摘要
2019-04-30 本文已影响0人
stevekeol
【Sass特点】：引入变量、允许嵌套、样式导入
1.1、变量的定义
变量均以$开头
//{}内外定义的不同：$nav-color在别的地方也可用；在{}中定义的$width变量，只能在该{}中使用
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
1.2、变量的引入
//凡是css标准值可用的地方均可用变量
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//变量中可用颗粒度更小的变量
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
2.0 嵌套CSS规则
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
//编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
2.1 父选择器 &
//当其中一个链接a被hover，所有的都会变色
article a {
color: blue;
:hover { color: red }
}
//用父选择器& : 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，
//而是&被父选择器直接替换
article a {
color: blue;
&:hover { color: red }
}
2.2 群组选择器的嵌套
//错误写法
.container h1, .container h2, .container h3 { margin-bottom: .8em }
//正确写法
.container {
h1, h2, h3 {margin-bottom: .8em}
}
2.3.1 子层相邻组合选择器 >
//选中article 下所有的section
article section { margin: 5px }
//选中article下第一个section
article > section { border: 1px solid #ccc }
2.3.2 同层相邻组合选择器 +
//选中header后同层紧跟的p
header + p { font-size: 1.1em }
2.3.3 同层全体组合选择器 ~
//选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
article ~ article { border-top: 1px dashed #ccc }
2.4 嵌套属性
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
//较好
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//较差
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
3.0 导入Sass文件
//这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。
@import"sidebar";
3.1 使用Sass局部文件
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时。
专门为@import命令而编写的文件，称为Sass局部文件，改文件名必须以下划线开头来命名，这样Sass就不会在编译时单独编译这个文件输出css，而仅仅引入。当引入时，应该省略下划线：
//当引入themes/_night-sky.sass（省略下划线和后缀）
@import "themes/night-sky";
3.2 默认变量值
需要对引入的样式稍作修改时：默认变量值(在被引入的样式文件中声明，哪些变量是允许你修改设置的)
//在需要被引入的样式文件中
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
用户在导入你的sass局部文件之前声明了一个
fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。
3.3 嵌套导入
只在某一个选择器的范围内导入sass文件
//局部文件 '_blue-theme.scss'
aside {
background: blue;
color: white;
}
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
3.4 原生css文件的引入
以.css后缀结尾的样式文件，被引入时会被视为想用原生的@import，这会导致浏览器解析css时的额外下载。
只需要将后缀 .css 改为 .scss即可
4 静默注释
【静默注释】:当你既需要详尽的开发阶段使用的注释；也需要在生成的样式文件中隐藏一些注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
5.0 混合器
【变量】：整个网站中有几处小小的样式类似
【混合器】：标识符@mixin 给大段大段的重用样式的代码赋予一个名字
//取名（即混合器的作用）
@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;
}
5.1 混合器的使用场景
//判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字
5.2 混合器中也可用Sass的特性
//取名
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
//引入
ul.plain {
color: #444;
@include no-bullets;
}
5.3 给混合器传参
@include混合器时给混合器传参，来定制混合器生成的不一样的样式
//取名
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
// 引入
a {
@include link-colors(blue, red, green);
}
5.4 混合器传参时的默认参数值
当有些参数暂时没有定制需求时，可设置默认的参数值（可以是任何有效的css属性值，甚至是其他参数的引用）
//取名
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//引入
@include link-colors(red)
6.0 选择器继承
【选择器继承】：一个选择器可以继承为另一个选择器定义的所有样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
6.1 选择器继承的使用场景
【混合器】：展示性样式的重用
【类名】：语义化样式的重用
【选择器继承】：当一个类（.seriousError）是另一个类（.error）的细化
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
6.2 混合器和选择器继承的区别
1. 跟混合器相比，继承生成的css代码相对更少(因为继承仅仅是重复选择器，而不会重复属性)
2. 继承遵从css层叠的规则(通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出)
6.3 悟
可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长(前提:不要用后代选择器去继承)
