关于scss的安装请点击这里

定义一个变量：

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;
}

Scss 与 Sass 入门学习小记 (一) 1.变量 2.选择器嵌套模式 3.属性嵌套模式 4.定义混合指令 @mixin 5.继承和扩展

2.选择器嵌套模式

3.属性嵌套模式

4.定义混合指令 @mixin

5.继承和扩展

相关推荐

4.定义混合指令 `@mixin`