CSS预处理器——sass教程(2)
发布日期:2022-02-15 02:36:22 浏览次数:1 分类:技术文章

本文共 4194 字,大约阅读时间需要 13 分钟。

CSS预处理器——sass教程(2)

sass 的基本使用

普通变量与默认变量

我们在之前的内容里提到过,我们使用$符号来声明 sass 中的变量,后设置的变量值会覆盖前设置的变量值,例:

//demo1.scss$boxWidth:100px;$boxWidth:200px;div{  width: $boxWidth;}

编译结果:

div {

 width: 200px;}/*# sourceMappingURL=demo1.css.map */

sass 允许使用@import导入外部 sass 样式,例:

@import "demo1.scss"div{  width:$boxWidth;}

编译结果:

div {

 width: 200px;}/*# sourceMappingURL=demo2.css.map */

在声明的变量后放置!default表示这是个默认值,如果在默认值之前声明过该变量,并且在样式中使用了该变量,使用的是默认变量前的变量,默认变量不会覆盖之前声明过的变量。如果在默认值之后又声明了该变量,并且在样式中使用了该变量,使用的是默认变量后重新声明的变量,后声明的变量会覆盖前声明的变量的规则依然在。

//demo3.scss$boxHeight: 100px;$boxHeight: 200px !default;div{  height: $boxHeight;}

编译结果:

div {

 height: 100px;}/*# sourceMappingURL=demo3.css.map */

如果我们使用@import导入外部样式,如果存在两个相同的变量,那么@import的位置也会决定它是否会出现覆盖的现象。例:

//demo4.scss$boxHeight: 300px;@import "demo3.scss"div{  height: $boxHeight;}

编译结果:

div {

 height: 100px;}/*# sourceMappingURL=demo4.css.map */

demo4.scss中声明的$boxHeight:300pxdemo3.scss中的$boxHeight:100px;覆盖了。

注释

如上述代码中所示,它使用//来进行注释,或者使用/* */来包裹一个范围内的内容以表示注释内容。

全局变量与局部变量

sass 在3.4版本之后已经可以正确地处理全局变量与局部变量了。所谓全局变量就是在 css 选择器外声明的变量,而局部变量是在选择器内部声明的,只在这个选择器的内部以及这个选择器下的子元素的局部范围内发挥作用。例:

$color : red;body{  color: $color;  div{
$color: blue;
color: $color;
span{
  color: $color;
}  }  h1{
color: $color;  }}

编译结果:

body {

 color: red;}body div {
 color: blue;}body div span {
 color: blue;}body h1 {
 color: red;}/*# sourceMappingURL=demo5.css.map */

选择器嵌套

我们在 sass 那一章节里就已经知道了 sass 是可以嵌套选择器的,除了选择器嵌套外还可以嵌套属性与伪类。

属性嵌套

我们在 css 中习惯使用为元素设置的id属性及class属性来声明属性样式, scss 语法也允许使用idclass属性。例:

$bgColor: yellow;.box{  background-color: $bgColor;  #box1{
background-color: $bgColor;  }}

编译结果:

.box {

 background-color: yellow;}.box #box1 {
 background-color: yellow;}/*# sourceMappingURL=demo6.css.map */

伪类嵌套

伪类嵌套与属性嵌套相似,但是需要与&符号配套使用(&表示当前使用的这个选择器)。例:

.box{  &::before,  &::after{
content:"";
display: block;  }  &::before{
color: blue;  }}

编译结果:

.box::before, .box::after {

 content: "";  display: block;}.box::before {
 color: blue;}/*# sourceMappingURL=demo7.css.map */

混合宏

在 sass 中我们可以使用混合宏来调用大量重复的内容,混合宏也有着类似于函数(甚至面向对象)的效果。

声明混合宏

在 sass 可以使用@maxin来声明混合宏,混合宏可以不带参数,也可以是带参数的混合宏。例:

//不带参数的混合宏声明@mixin mainColor{  color: blue;  background-color: blue;}//带默认参数的混合宏声明@mixin mainHeight($length:100px){  height: $length;  margin-top: $length;}

调用混合宏

这些声明好的混合宏可以使用@include在需要的样式类进行调用。例:

//带参数的混合宏声明@mixin mainHeight($length:100px){  height: $length;  margin-top: $length;}.box{  @include mainHeight(200px);}

编译结果:

.box {

 height: 200px;  margin-top: 200px;}/*# sourceMappingURL=demo8.css.map */

上述代码在调用mainHeight时,又给他赋了一个新值,新值会覆盖该宏声明时的默认值。这种调用就像是调用一个外部已经定义好的函数一样。

混合宏允许传递多个参数,这样就更像是一个函数的调用了。例:

@mixin length($height, $width) {  height: $height;  width: $width;}.box1{  @include length(100px, 200px);}

编译结果:

.box1 {

 height: 100px;  width: 200px;}/*# sourceMappingURL=demo8.css.map */

我们在使用 css 时会遇上需要使用多个属性值的情况,混合宏允许多个值使用...进行压缩。例:

@mixin boxShadow($boxshadow...) {  box-shadow: $boxshadow;}div{  @include boxShadow(0 1px 2px #ccc, 1px 0 2px rgb(0,230,222));}

编译结果:

div {

 box-shadow: 0 1px 2px #ccc, 1px 0 2px #00e6de;}/*# sourceMappingURL=demo9.css.map */

继承

我们可以使用@extend来继承已经存在的代码块。例:

@mixin mainColor($color) {  color: $color;  background-color: $color;}.box{  width: 100px;  height: 100px;  @include mainColor(red);}.box1{  @extend .box;}

编译结果:

.box, .box1 {

 width: 100px;  height: 100px;  color: red;  background-color: red;}/*# sourceMappingURL=demo10.css.map */

占位符

在 sass 中可以使用%placeholder占位符声明一段样式,如果这段样式不使用@extend调用,那么它将不会出现编译生成的 css 样式中。例:

%boxStyle{  color: skyblue;  width: 100px;  height: 100px;}%divStyle{  color: red;}.box1{  @extend %boxStyle;}

编译结果:

.box1 {

 color: skyblue;  width: 100px;  height: 100px;}/*# sourceMappingURL=demo11.css.map */

使用占位符避免写 css 样式时,出现的大量冗余代码。

混合宏、继承和占位符它们都有各自的特点。混合宏的特点在于它允许使用参数,如果我们想要传递参数,就需要考虑使用混合宏。继承可以将一个基本样式作为基类被其它样式所继承,如果不需要使用变量,并且已经含有一个基类想要继承,就可以考虑使用继承了。而占位符可以独立定义样式,如果不想生成大量冗余样式,就可以考虑使用占位符了。

插值语法#{}

插值语法使选择器和属性名可以使用变量,例:

$name:button;$a: color;.#{$name}{  background-#{$a}: blue;  width: 100px;  height: 100px;  #{$a}: red;}

编译结果:

.button {

 background-color: blue;  width: 100px;  height: 100px;  color: red;}/*# sourceMappingURL=demo12.css.map */

看着挺强大,但是没有使用原生的属性名或者选择器名来得更方便些,配合之后内容中#each将会显得更加实用些。

转载地址:https://blog.csdn.net/PeZXO/article/details/107282235 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:css预处理器——sass教程(1)
下一篇:CSS预处理器——sass教程(3)

发表评论

最新留言

不错!
[***.36.148.50]2022年08月04日 11时10分09秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

EasyX图形库常用操作 2019-04-28 04:22:17
开发板通过NTS挂载在PC机中的文件夹 2019-04-28 04:22:16
配置交叉编译工具链 2019-04-28 04:22:16
C#控制台程序生成文件分析 2019-04-28 04:22:15
Visual Studio常用快捷键 2019-04-28 04:22:15
.NET平台相关概念(简单了解) 2019-04-28 04:22:15
格式化字符串的几种方式 2019-04-28 04:22:14
预处理指令的开始和结束 2019-04-28 04:22:14
#和##运算符 2019-04-28 04:22:14
java中的stack类和C++中的stack类的区别 2019-04-28 04:22:11
include的两种形式、CPP的搜索路径 2019-04-28 04:22:10
gzip、bzip2和tar 2019-04-28 04:22:10
which和whereis 2019-04-28 04:22:09
file 2019-04-28 04:22:09
grep 2019-04-28 04:22:09
内存泄露检测工具--VisualC++ debugger 和 CRT 库 2019-04-28 04:22:08
find 2019-04-28 04:22:08
vi常用命令汇总 2019-04-28 04:22:07
动态规划--编辑距离问题 2019-04-28 04:22:07
C/C++中的数据类型转换 2019-04-28 04:22:04