sass学习总结

作者: 苦苦修行 | 来源:发表于2018-12-01 16:08 被阅读0次

sass学习总结
sass学习总结
gulp的配置
sass入门学习总结
关于less和sass你了解多少！
Sass入门
less总结
sass
SASS 总结
Sass总结

sass总结

重点：
1、带@的一般是一种组合
2、混合器@mixin 选择器继承@extend
3、.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
4、https://www.jianshu.com/p/7f879ce0cbb9 自定义函数
https://www.jianshu.com/p/ef2ca6fbf944 内置函数

细节：

1、变量具有块级作用域

2、变量不区分下划线和中划线， $link-color =$ link_color

3、父级选择器的一种用法

content aside {

color: red;
body.ie & { color: green }
}
/编译后/

content aside {color: red};

body.ie #content aside { color: green }

4、群组选择器嵌套
nav, aside {
a {color: blue}
}
/编译后/
nav a, aside a {color: blue}

5、+是相邻元素，~是同层所有元素
header + p { font-size: 1.1em } 同层相邻组合选择器+选择header元素后紧跟的p元素
article ~ article { border-top: 1px dashed #ccc } 同层全体组合选择器~，
选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

6、嵌套的另一种用法
dl > {
dt { color: #333 }
dd { color: #555 }
}
/编译后/
dl > dt { color: #333 }
dl > dd { color: #555 }

7、属性嵌套，把属性名从中划线-的地方断开，在根属性后边添加一个冒号:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
或另一种嵌套
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}

8、使用sass的@import规则可以省略.sass或.scss文件后缀

9、使用SASS部分文件
如果某个sass文件不想被单独编译成css文件，只想当作被引用文件使用，文件命名要带下划线，
比如_night-sky.scss，当要导入这个文件时，则可以省略下划线，比如@import "night-sky";

10、修改默认变量值
1）一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值
2）使用sass的!default标签，如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
例如 $fancybox-width: 400px !default;
3）两者的区别，1）有先后顺序，2）没有先后顺序，比如在2）这种情况下，
你自定义的变量在引入的变量之前，还是会应用你的变量

11、嵌套导入
举例说明，有一个名为_blue-theme.scss的局部文件，内容如下：
aside {
background: blue;
color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}

12、原生css的@import会引发网络下载，scss的@import是在编译时就整合在一起，
所以尽量使用scss的导入。如果必须导入css文件，可考虑将css文件后缀名改为scss。
如果非要导入css，记得css后缀名

13、注释。使用//这种注释，在最终生成的css文件中会将其去除。
如果使用/* ... */则不会将其去除。

14、混合器是将多种属性打包在一起起一个名字使用
定义
@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;
}
编译结果
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

15、如何使用混合器
@include rounded-corners;

16、给混合器传参
定义
@mixin link-colors( $normal,$ hover, $visited) { color:$ normal;
&:hover { color: $hover; } &:visited { color:$ visited; }
}
使用
a {
@include link-colors(blue, red, green);
}

17、混合器默认传值
定义
@mixin link-colors(
$normal,$ hover: $normal,$ visited: $normal ) { color:$ normal;
&:hover { color: $hover; } &:visited { color:$ visited; }
}
使用
@include link-colors(red)

18、选择器继承
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
使用
.seriousError {
@extend .error;
border-width: 3px;
}

19、混合器和classname有些类似，区别是混合器是用在样式表中的，classname是用在html中的

20、了解继承与混合器的区别
继承说明了两个类之间有父子关系，或者是样式由粗到细的过程
混合器可以理解成就是一个常用的组件

21，继承@extend

//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error”，本质是指向同一个元素
所以我们可以认为seriousError error都指代同一个元素，所以
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}