32.Vue.js :sass学习

1.变量

sass 允许使用变量，所以变量以 $ 开头

$blue:#1875e7;
div{
    color:$blue
}

如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中

$side: left;
.rounded{
    border-#{$side}-radius:5px;
}

2.计算功能

sass允许在代码中使用算式：

$var:20;
body{
    margin:(14px/2);
    top:50px+100px;
    right：$var * 10%;
}

3.嵌套

sass 允许选择器嵌套

div h1 {
    color: red;
}

//可以写成
div{
hi{
color:red;
}
}

属性也可以嵌套

p{
    border-color:red;
}

//也可以写成
p{
    border:{
        color:red;
    }
}

注意：border后面必须加：冒号；

4.注释

sass 共有两种注释风格

标准的css注释/*comment*/,会保留到编译后的文件

单行注释//comment，只保留在sass源文件中，编译后被省略

5.代码的重用

• 继承

//sass 允许一个选择器，继承另一个选择器
.class1{
    border:1px solid #ddd;
}

//class2 要继承class1，就要使用@extend 命令：
.class2{
    @extend.class1;
    font-size:120%;
}

• Mixin

Mixin 有点像c语言的宏，是可以重用的代码块；

使用@mixin 命令，定义一个代码块；