SCSS基本使用

Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为lhighlight-color看起来太丑了。)，比如 &highlight-color和Ssidebar-width。为什么选择$符号呢?因为它好认、更具美感，且在css中并无他用，不会导致与现存或未来的css语法冲突。

1.Sass变量的使用

定义变量使用$符号开头

$bgcolro:red;
 
 
.box {
    width: 200px;
    height: 200px;
    border: {
        style: solid;
        width: 10px;
        color: $bgcolro
    }
}
 

 

2.Sass嵌套（他们的效果是一样的）

header ul {
    width: 400px;
    height: 200px;
    list-style: none;
    background-color: aqua;
}
 
header ul li {
    width: 60px;
    height: 15px;
    float: left;
}
 
header ul li a {
    text-decoration: none;
}
 
header ul li a:hover {
    color: #fff;
}
 
 
/* 一般我们都是写成上面的格式但是Sass允许嵌套*/
 
header {
    ul {
        width: 400px;
        height: 200px;
        list-style: none;
        background-color: aqua;
        li {
            width: 60px;
            height: 15px;
            float: left;
            a {
                text-decoration: none;
                &:hover {
                    color: #fff;
                }
            }
        }
    }
}

3.注释

/* */ ： 标准的CSS注释，编译后会保留

// ：双反斜线注释，只保留在Sass源文件中，编译后被省略

4.引入

Sass引入使用@import（语法：@import "名称"）

$bgcolro:red;
header {
    ul {
        width: 400px;
        height: 200px;
        list-style: none;
        background-color: aqua;
        li {
            width: 60px;
            height: 15px;
            float: left;
            a {
                text-decoration: none;
                &:hover {
                    color: #fff;
                }
            }
        }
    }
}
 
div {
    >nav {
        p,
        span {
            color: red;
        }
    }
}
 
.box {
    width: 200px;
    height: 200px;
    border: {
        style: solid;
        width: 10px;
        color: red
    }
    ;
}
 
@import "_demo"

5.层次选择器（>、+/~）

举一个例子其他一样：

div {
    >nav {
        p,
        span {
            color: red;
        }
    }
}

补充：hover前面要加上（&）符号，否则会没有效果（hover前面会自动加空格）

 
header {
    ul {
        width: 400px;
        height: 200px;
        list-style: none;
        background-color: aqua;
        li {
            width: 60px;
            height: 15px;
            float: left;
            a {
                text-decoration: none;
                &:hover {
                    color: #fff;
                }
            }
        }
    }
}