Scss 与 Sass 入门学习小记 (一)

关于scss的安装请点击这里

1.变量

定义一个变量：

SassScript 最普遍的用法就是变量，变量以美元符号($)开头，赋值方法与 CSS 属性的写法一样：

$primary-color:#129b33;
$primary-border:1px solid #fff;

使用我们的定义的变量

div.box {
    background-color: $primary-color;
    border: 1px solid $primary-color;
    border: $primary-border;
}
// 编译结果

div.box {
    background-color:#129b33; 
　　 border: 1px solid #129b33; 
　　border:1px solid #fff; 

}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}
//编译结果
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

2.选择器嵌套模式

// 这样写会生成父类空格子类的选择器   .nav ul li
.nav {
    height: 100px;
    ul {
        margin: 0;
        li {
            padding: 5px;
        }
    }
}
//编译结果

.nav {

　　height: 100px;

}

.nav ul {

　　margin: 0;

}

.nav ul li {

　　padding: 5px;

}

正如我们所见嵌套模式会生成 派生选择器 或者叫上下文选择器，也就是嵌套与被嵌套之间会生成 空格，但是，如果我们想生成 类似伪类的 a:hover的选择器，则要用到 & 来代替父类选择器

.nav {
    height: 100px;

    ul {
        margin: 0;

        li {
            padding: 5px;

            a {
                color: #000;

                &:hover {
　　　　　　　　　　　　// .nav ul li a:hover{}
                    color: #fff;
                }
            }
        }
    }

    & &-text {
        // 这里会转换为 .nav .nav-text{}
        font-size: 16px;
    }
}

3.属性嵌套模式

// 属性的嵌套
body {
    font: {
        family: Helve;
        size: 16px;
        weight: 600;
    }
}

.nav {
    border: 1px solid #000 {
        left: 0; 
        right: 0; 
    }
}
// 编译结果
body{
     font-family:Helve,
     font-size: 16px;
     font-weight: 600;
}
.nav{
　　border: 1px solid #000;
　　border-left: 0; 
　　border-right: 0;

}

4.定义混合指令 @mixin

混合指令的用法是在 @mixin 后添加名称与样式

// 定义
@mixin alert {
    color: #000;
    background-color: #fff;

    a {
        color: #555;
    }
}

// 使用  @include
.alert-waring {
    @include alert;
}
//编译
.alert-waring {
    color: #000;
    background-color: #fff;
}

.alert-waring a {
    color: #555;
}

// 定义带参数的mixin
@mixin alert($text-color, $backgroud) {
    color: $text-color;
    background: $backgroud;

    a {
        // darken内置的函数 加深指定颜色的暗度
        color: darken($text-color, 10%);
    }
}
// 使用
.alert-waring {
    // 按参数的顺序传值
    @include alert(#000, #444)
}

.alert-info {
    // 不按参数的顺序，但是要指定参数的名字
    @include alert($backgroud: #444, $text-color:#000)
}

5.继承和扩展

继承和扩展另一个选择器的所有样式 不仅会继承指定的选择器的样式 还会继承与其相关的选择器的样式，继承的结果是创建一个群组选择器

.alert {
    padding: 5px;
}

.alert-info {
    @extend .alert;
    background: #000;
}
// 编译结果
// 生成群组选择器
.alert, .alert-info{
    padding: 5px;
}
.alert-info{
    background: #000;
}

// 继承相关的选择器的样式
.alert {
    padding: 5px;
}
.alert a{
    color: red;
}
.alert-info {
    @extend .alert;
    background: #000;
}
// 编译
.alert, .alert-info{
    padding: 5px;
}
.alert a, .alert-info a{
    color: red;
}
.alert-info{
    background: #000;
}