sass 基本使用

sass的作用

将scss文件转换为css文件

sass的安装

1.cmd->npm install sass -g

2.sass --version

sass的使用

1.创建sass文件 （后缀名为 .scss 不是.sass）

2.cmd->路径->sass xx.scss文件 xx.css文件

sass 主要的语法

1.变量

声明变量的语法是$+变量名+：+变量值；

$color:#e9232c;
div{
    color: $color;
}

转换为css

div {
  color: #e9232c;
}

2作用域

原则是最近的优先级最大

$mycolor:red;
div{
    $mycolor:block;
    color: $mycolor;
}

转换为css

div{
    color:block;
}

3嵌套

$mycolor:red;
#header{
    font-size: 20px;
    ul{
        >li{
            a{
                &:hover{
                    color: $mycolor;
                }
            }
        }
    }
}

转换为css

#header {
  font-size: 20px;
}
#header ul > li a:hover {
  color: red;
}

4 import

reset.scss

$mycolor:red;
div{
    color: $mycolor;
}

public.scss

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

导入

@import "./reset.scss";
@import"./public.scss";

#heard{
    font-size: 20px;
}

转换css

div{
    color:red;
}
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}
#heard {
  font-size: 20px;
}

5.混入

使用混合@mixin命令定义，以及使用@include调用该mixin：

@mixin important {
    color: red;
    font-size: 20px;
}

div{
    @include important;
}

转换为css

div{
    color:red;
    font-size:20px;
}

6.@混入带$参数

@mixin important($radius) {
    border-radius:$radius;
    -moz-border-radius:$radius;
    -webkit-border-radius:$radius;
    -o-border-radius:$radius;
}
div{
    @include important(20px);
    font-size: 20px;
}

转化为css

div {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  font-size: 20px;
}

7.extends继承

.button-basic{
    
    font-size: 20px;
}
.button-success{
    @extend .button-basic;
    color: blue;
    
}
.button-error{
    @extend .button-basic;
    color: red;
}

转换为css

.button-basic, .button-error, .button-success {
  font-size: 20px;
}

.button-success {
  color: blue;
}

.button-error {
  color: red;
}