sass初体验

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

sass是一个css预处理器 sass是css扩展语言，可以帮助我们减少css重复的代码，节省开发时间 sass扩展了css3,增加了规则，变量，混入，选择器，继承，内置函数等特性 sass文件后缀名为.scss 浏览器并不支持sass代码，需要使用一个sass预处理器将sass代码转换为css代码

sass安装

安装

npm install -g sass

编写

//test1.scss文件
$bgcolor:lightblue;

body{
  background-color: $bgcolor;
}

转换

//方式一，每次修改都要手动转换
sass test1.scss test1.css
//方式2 自动转换 监听文件,一旦源文件有变动，就自动生成编译后的版本
sass --watch test1.scss:test1.css
//or 监听文件夹
sass --watch app/sass:public/css

/*转换后的css文件*/
body {
  background-color: lightblue;
}

/*# sourceMappingURL=test1.css.map */

sass语法

sass变量

sass变量存储一些信息，可以重复使用 sass变量可以存储：字符串，数字，颜色值，布尔值，列表，null sass变量使用**$**符号：$variablename:value; 如果变量需要镶嵌在字符串中，必须写在**#{}**之中

$myColor:red;
$side:left;

body{
   color:$myColor;
   border-#{$side}-radius:5px;
}

sass变量的作用域

sass变量的作用域只能在当前的层级上有效果

//test1.scss
$bgcolor:lightblue;

body{
  $bgcolor:red;//这里改变了变量的值
  background-color: $bgcolor;
}

p{
  color:$bgcolor
}
//转换为css后
body {
  background-color: red;
}

p {
  color: lightblue;
}

/*# sourceMappingURL=test1.css.map */

可以使用 !global 关键词来设置变量是全局的

//test1.scss
$bgcolor:lightblue;

body{
  $bgcolor:red!global;
  background-color: $bgcolor;
}

p{
  color:$bgcolor
}
//转换为css后
body {
  background-color: red;
}

p {
  color: red;
}

/*# sourceMappingURL=test1.css.map */

sass嵌套规则

选择器嵌套

div{
   h1{
      color:red;
   }
}
//转换为css后
div h1{
   color:red;
}

属性嵌套

属性也可以嵌套，例如border-color属性，可以写成：

h1{
   boder:{
      color:red;
   }
}

注意：属性嵌套后面有冒号

使用&引用父元素

在嵌套的代码块中，可以使用&引用父元素

a{
  font-size: 30px;
  &:hover{
    color:blue;
  }
}
//转换成css后
a {
  font-size: 30px;
}
a:hover {
  color: blue;
}

sass @import

@import指令可以让我们导入其他文件的内容 语法：@import filename;

sass @mixin 和 @include

@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式 @include指令可以混入(mixin)引入到文档中

定义一个混入

通过@mixin指令来定义混入

@mixin important-text{
  color:green;
  font-size: 20px;
  font-weight: bolder;
}

使用混入

span{
  @include important-text
}
//转换为css后
span {
  color: green;
  font-size: 20px;
  font-weight: bolder;
}

• 混入中也可以使用混入

//混入中也可以使用混入
@mixin special-text{
  @include important-text;
  background-color: yellow;
}

• 混入可以接收参数，可以向混入中传递变量

@mixin bordered($color,$width){
  border: $width  solid $color;
}
.box{
  @include bordered(red,2px)
}
.box2{
  @include bordered(#ccc,5px)
}
//转换为css后
.box {
  border: 2px solid red;
}
.box2 {
  border: 5px solid #ccc;
}

• 如果不能确定一个混入使用多少参数，可以使用**...**来设置可变参数

@mixin box-shadow($shadows...){
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.box3{
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999)
}
//转换为css后
.box3 {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

• 浏览器前缀使用混入是非常方便的

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));//就不用每次都写前缀了
}
//转换为css后
.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

sass @extend与继承

@extend指令告诉sass一个选择器的样式从另一个选择器继承

.basic-btn{
  padding: 5px;
  font-size: 16px;
  text-align: center;
}
.btn1{
  @extend .basic-btn;
  background-color: red;
}
//转换为css后
.basic-btn, .btn1 {
  padding: 5px;
  font-size: 16px;
  text-align: center;
}

.btn1 {
  background-color: red;
}

使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。