CSS预处理语言学习-SCSS、SASS
Sass中文网：https://www.sass.hk/
1、使用变量
1-1、变量声明
使用 $ 开头进行变量声明
// 全局变量
$nav-color: #F90;
nav {
// 局部变量
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
1-2、变量引用
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
1-3、变量命名
用 - 中划线声明的变量可以使用 _ 下划线的方式引用，反之亦然；在 sass 中纯 css 部分不互通，比如类名、ID或属性名。
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
2、嵌套 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、父选择器的标识符&；
article a {
color: blue;
&:hover { color: red }
}
// 编译后
article a { color: blue }
article a:hover { color: red }
特殊情况：
父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。
当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
2-2、群组选择器的嵌套；
// 使用前
.container h1, .container h2, .container h3 { margin-bottom: .8em }
// 使用后
.container {
h1, h2, h3 {margin-bottom: .8em}
}
// 修改前
nav a, aside a {color: blue}
// 修改后
nav, aside {
a {color: blue}
}
2-3、子组合选择器和同层组合选择器：>、< 和 ~；
article section { margin: 5px }
article > section { border: 1px solid #ccc }
- 可以用子组合器
>选择一个元素的直接子元素 - 第一个选择器会选择
article下所有命中section选择器的元素 - 第二个选择器只会选择
aticle下紧跟着的子元素中命中section选择器的元素
header + p { font-size: 1.1em }
- 同层相邻选择器
+：选择header元素后紧跟的p元素
article ~ article { border-top: 1px dashed #ccc }
- 同层全体组合器
~：选择所有跟在article后的同层article元素，不管他们之间隔了多长时间；
修改后：
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
2-4、嵌套属性
嵌套属性规则： 把属性名从中划线 - 的地方断开，在根属性后边添加一个冒号:，紧跟一个{} 块，把子属性部分写在这个{} 块中。
nav {
border: {
style: solid;
left: 0px;
right: 0px;
}
}
// 编译后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
3、导入SASS文件;
使用sass 的 @important 规则不需要指名被导入文件的全名，可以省略.sass，.scss 文件后缀。
3-1、使用SASS部分文件；
sass 局部文件的文件名以下划线_ 开头，sass 就不会在编译时单独编译这个文件输出css ，而只是把这个文件用作导入；
@import "themes/_night-sky.scss";
等价于
@import "themes/night-sky";
3-2、默认变量值;
- 重复声明变量的情况下，只有最后移出声明有效且会覆盖前面的值：
color值为red
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
-
!default：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。如果在导入
sass局部文件之前声明了$fancybox-width变量，那么局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width默认400px
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
3-3、嵌套导入
sass 允许@important 命令写在css 规则内。_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导入
sass支持原生的CSS@important。- 不能用
sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。 - 为
sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。
4、静默注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
5、混合器
- 混合器使用
@mixin标识符定义 - 可以通过
@include来使用这个混合器，@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。
@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;
}
5-1、何时使用混合器
- 一段样式不停的重复出现
- 可以有一个名词来概述这些属性修饰的样式
5-2、混合器中的CSS规则
混合器中不仅可以包含属性，也可以包含css 规则：
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
当一个包含css规则的混合器通过@include 包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则：
ul.plain {
color: #444;
@include no-bullets;
}
sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容：
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
5-3、给混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
使用@include 时：
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
// 允许使用语法 $name: value 形式指定参数的值
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
5-4、默认参数值
可通过 $name: default-value 的声明形式，给参数指定默认值：
@mixin link-colors(
$normal,
$hover: $normal, // $normal就是$hover和$visited的默认值
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
6、使用选择器继承来精简CSS
选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend 语法实现：
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"；
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
6-1、何时使用继承
继承时基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。
当一个元素拥有的类(.seriousError)，表明它属于另一个类(.error)
6-2、继承的高级用法
如果.seriousError``@extend``.important.error ， 那么.important.error 和h1.important.error 的样式都会被.seriousError继承， 但是.important或者.error下的样式则不会被继承。
6-3、继承的工作细节
@extend背后最基本的想法是：如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error``.seriousError这一选择器组进行替换。
关于@extend有两个要点你应该知道。
- 跟混合器相比，继承生成的
css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。 - 继承遵从
css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
6-4、使用继承的最佳实践
避免生成的css 中包含大量的选择器的最好犯法就是不要再css 规则中使用后台选择器
（比如.foo .bar）去继承css 规则。
.foo .bar { @extend .baz; }
.bip .baz { a: b; }
7、小结
本文介绍了sass最基本部分,你可以轻松地使用sass编写清晰、无冗余、语义化的css。
对于sass提供的工具你已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。
变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。
变量、混合器的命名甚至sass的文件名，可以互换通用_和-。同样基础的是sass的嵌套机制。
嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。
sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套。
你也已经学到了sass的另一个重要特性，样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。
通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。
混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让你的css变得更加可维护和语义化。
最后，我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的css的整洁和可维护性。
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
