今天完成的事情:了解了什么是Sass,如何使用Sass
明天计划的事情:完成任务十一
收获:
1.什么是Sass?
Sass (全称:Syntactically Awesome Stylesheets) 是CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。Sass 文件后缀为 .scss。
2.如何使用Sass?
①Sass变量
变量用于存储信息,可以重复使用。声明了变量之后就可以在之后的代码中使用。变量使用$符号
如:$MyColor:pink;即声明了变量MyColor的值为pink
使用如 就等于
body { body{
color: $MyColor; color: pink;
} }
②Sass作用域
Sass 变量的作用域只在当前的层级上有效果,如在h1内声明的变量只在h1内有用。
如: 就等于
$myColor: red; h1{
h1 { color: green;
$myColor: green; }
color: $myColor; p{
} color: red;
p { }
color: $myColor;
}
使用 !global 关键词来设置变量是全局的
如在上面的例子中,将h1内的变量声明加上!global
h1{
$myColor: green !global;
color: $myColor
}
则p的颜色也会变为green
p {
color: green;
}
③Sass嵌套
可以把同一个祖级的子级或孙级的代码嵌套在一起,如
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
等同于
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
很多 CSS 属性有同样的前缀,例如:font-family, font-size 和 font-weight , text-align, text-transform 和 text-overflow。也可以把他们嵌套在一起
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
等同于
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
④Sass @import
@import 指令可以让我们导入其他文件中的内容。
如创建一个文件reset.scss:
html,
body{
margin: 0;
padding: 0;
}
再在其他的scss文件中用@import指令导入文件
@import "reset";
body {
color: red;
}
就等同于
html,
body {
margin: 0;
padding: 0;
}
body {
color: red;
}
⑤Sass @mixin 与 @include
@mixin 指令创建一个可重复使用的样式。
@include 指令可以将创建的样式引入到文档中。
先使用@mixin指令创建
@mixin text {
color: red;
}
再使用@include指令引入
.danger {
@include text;
background-color: green;
}
就等同于
.danger {
color: red;
background-color: green;
}
也可以再一个@mixin指令中引入其他的
@mixin special-text {
@include text;
@include link;
@include border;
}
@mixin指令也可以接收变量
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myBox {
@include bordered(blue, 1px);
}
等同于
.myBox {
border: 1px solid blue;
}
可以给变量设置一个默认值,在代码没有更改变量时,将使用默认值
如
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
p {
@include bordered(red)
}
等同于
p {
border: 1px solid red;
}
如果不能确定有多少个参数,可以用...来设置可变参数
@mixin box-shadow($shadows...) {
}
⑥Sass @extend
@extend指令可以使一个选择器的样式从另一个选择器上继承
如
.button-left {
color: red
}
.button-right {
@extend .button-left;
background-color: red;
}
等同于
.button-left, .button-right {
color: red;
}
.button-right {
background-color: red;
}
评论