Sass

如何将sass编译成css?

在命令提示符输入如下命令：

C:\Users\Administrator\Desktop\hellonode\ninghao-sass>  sass sass/first.scss:css/first.css

自动编译Sass

//正在监视变化
C:\Users\Administrator\Desktop\hellonode\ninghao-sass>sass --watch sass:css

Sass编译输出的四种格式

nested:嵌套

sass写法

ul{
    font-size: 15px;
    li{
        list-style: none;
    }
}

编译出的结果

ul {
  font-size: 15px; }
  ul li {
    list-style: none; }

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

嵌套时调用父选择器（用&符号引用）

.nac{
    height: 100px;
    ul{
        margin: 0;
        li{
            list-style: none;
            &:hover{
                background-color: brown;
            }
        }
    }
}

编译结果

.nac {
  height: 100px;
}
.nac ul {
  margin: 0;
}
.nac ul li {
  list-style: none;
}
.nac ul li:hover {
  background-color: brown;
}

属性的嵌套

body{
    font: {
        family: serif;
        size: 15px;
        weight:normal;
    }
}

编译结果

body {
  font-family: serif;
  font-size: 15px;
  font-weight: normal;
}

compact:紧凑
在命令行内输入如下代码，即可编译为紧凑格式

C:\Users\Administrator\Desktop\hellonode\ninghao-sass>sass --watch sass:css --style compact

编译结果

ul { font-size: 15px; }
ul li { list-style: none; }

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

expanded:扩展
同理，压缩输出结果为

ul {
  font-size: 15px;
}
ul li {
  list-style: none;
}

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

compressed:压缩
同理，压缩输出结果为

ul{font-size:15px}ul li{list-style:none}
/*# sourceMappingURL=first.css.map */

sass定义变量

声明变量和使用变量
使用$符定义变量

$primary-color : red;
div.box{
    background-color: $primary-color;
}

编译结果

div.box {
  background-color: red;
}

Mixins(类似于JS中的函数)在这里插入代码片

定义和引用

@mixin alert {
    color: aquamarine;
    background-color: brown
}
.alert-warning{
    @include alert;//使用@incliude引用
}

编译结果

.alert-warning {
  color: aquamarine;
  background-color: brown;
}

使用参数

@mixin alert($text-color,$background) {
    color: $text-color;
    background-color: $background;
    a {

        color: red;
    };
}
.alert-warning{
    @include alert(yellow,black);
}

编译结果

.alert-warning {
  color: yellow;
  background-color: black;
}
.alert-warning a {
  color: red;
}

继承/扩展（@extend）

作用;使一个选择器可以去继承另一个选择器定义的所有样式

.alert{
    background-color: aqua;
}
.alert.info{
    margin: 0;
    padding: 0;
    @extend .alert;
}

编译结果

.alert, .alert.info {
  background-color: aqua;
}
.alert.info {
  margin: 0;
  padding: 0;
}

@import

作用：在一个sass文件中包含多个其他的sass文件，使css模块化，每一个Partials文件都要以下划线开头

@mport 'base';//意思是引入一个名叫"_base.scss"的文件

其他

hsl()函数:色相（0-360），饱和度（0%-100%），明度（0%-100%）
adjust（需要调整的参数，调整的度数）：调整色相
lighten(需要调整的参数，百分比)：调整明度（调亮）
darken(需要调整的参数，百分比)：调整明度（调暗）
seturate(需要调整的参数，百分比):增加颜色的纯度；
disseturate(需要调整的参数，百分比):减少颜色的纯度
opacify(需要调整的参数，（0-1）):增加颜色不透明度
**transparentize(需要调整的参数，（0-1）)**减少颜色不透明度
@if @for @each @while
@warn 警告
@error 错误