sass的具体使用方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/channyfish/article/details/75174180

scss

scss转css的四种格式

nested：嵌套缩进的css代码，它是默认值  
expanded：没有缩进的、扩展的css代码  
compact：简洁格式的css代码  
compressed：压缩后的css代码  

sass的使用

1.变量 sass的变量必须是$开头，后面紧跟变量名

//  scss样式  
$globalColor:red;
.nav{
  color: $globalColor;
}
.class{
  background-color: $globalColor;
}   
//   css样式
.nav{
  color: red;
}
.class{
  background-color: red;
}    

2.变量的嵌套

$globalColor:red;
    $border:1px soild $globalColor;
    .nav{
      color: $globalColor;
    }
    .class{
      background-color: $globalColor;
    }

1. 嵌套规则
   （1）普通嵌套

#header{
    .nav{
      background: red;
      .logo{
        position: absolute;
      }
      a{color: red;
        &:hover{
          color: blue;
        } 
      }
    }
    p{
      color: blue;
    }
}
//scss-style

#header .nav {
  background: red;
}
#header .nav .logo {
  position: absolute;
}
#header .nav a {
  color: red;
}
#header .nav a:hover {
  color: y;
}
#header p {
  color: blue;
}
//css-style

（2）群组选择器

footer{
  h1,h2,h3{
    color: blue;
  }
}
//scss-style

footer h1, footer h2, footer h3 {
  color: blue;
}
//css-style

（3）属性组合

.nav{
  border: {
    style: solid;
    width: 1px;
    color: blue;
  }
}
//scss--style
.nav {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
//css-style

4.sass的导入

@import "header";

.main{
  color: red;
}

@import "footer";
-----------------------------
.header{
  background-color: red;
}
.header{
  nav{
    background-color: blue;
  }
}
-----------------------------
.footer{
  background-color: blue;
}
//scss

.header {
  background-color: red;
}

.header nav {
  background-color: blue;
}

.main {
  color: red;
}

.footer {
  background-color: blue;
}
//css

5.默认变量值

变量值后面可以加！defult表示默认变量。
有其他变量时则使用其他变量，没有则使用默认变量。

@import "header";
$global:red;
.header{
  background: $global;
}
--------------------
$global:yellow;

//sass

.header {
  background: yellow;
}
//css 

6.混合器（mixin）

@mixin border-radius{
  -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.header{
    &-nav{
      @include border-radius;
    }
  @include border-radius;
}
//scss

.header {
  -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.header-nav {
  -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
//css

混合器的传参

@mixin links-colors($normal,$hover,$visited,$active){
  color: $normal;
  &:hover{
    color: $hover;
  }
  &:visited{
    color: $visited;
  }
  &:active{
    color: $active;
  }

}
.header{
    &-nav{
      @include border-radius;
    }
  @include links-colors(red,blue,green,yellow)
}
-------------------------------

.header:hover {
  color: blue;
}
.header:visited {
  color: green;
}
.header:active {
  color: yellow;
}

7.继承（extend）

继承 和混合器的不同在于：继承不能传参，且是写死的，继承下的子元素的css样式不能被继承。

.center{
  margin:0 auto;
  &-text{
    color: yellow;
  };
}
.main{
  color: blue;
  @extend .center;
}
//scss

.center, .main {
  margin: 0 auto;
}
.center-text {
  color: yellow;
}

.main {
  color: blue;
}
//css

由例子可以看出 main只继承了center的margin属性，下面的text属性没有被继承。

8.占位符（palceholder）

占位符和继承的用法差不多，但占位符是用%开头来写，并且使用占位符来继承时，%后的在css中不会被显示出来

%center{
  margin:0 auto;
}
.main{
  @extend %center;
}
//scss

.main {
  margin: 0;
}
//css