sass常用记录

sass常用记录

多写才能记住

基础的语法

还是要记一下用法

• 安装sass
• 监听，sass --watch sass文件名:输出的css文件名

父选择器 &

注意的是&和相连的类名之间不能有空格，有空格就成了后代选择器了，&会被替换成嵌套外层的父选择器，有一点特别的是，后面还可以跟后缀

.mod { 
    &.on { 
        color: green; 
    }
    &-houzhui{
        color:red;//后缀，编译完成就是.mod-houzhui
    } 
}

属性嵌套

.font-syle {
    font:{
        family: fantasy;
        size: 25px;
        weight: bold;
    }
}

注释

• /*hello*/ 会被完整输出到编译后的css文件中
• //hello不会被输出到编译后的文件中

---

不同于css的语法

变量 $

//定义
$width: 4rem;
//使用
.main {
    width: $width;
}

运算 +, -, *, /, %

插值语句

#{}插值语句可以在选择器或者属性名中使用变量，也就是把变量名放在里面

$name: meng;
p.#{$name} {
    color: green;
}
//编译成
p.meng {
    color: green;
}

@extend

使用场景就是a样式和b样式有相同的部分，但是也有不同的部分，那么这相同的部分就可以用继承的写法了

.same {
    color: red;
    font-size: 12px;
}
.a {
    @extend .same;
}
//按道理来讲会被渲染成
.same .a {
    color: red;
    font-size: 12px;
}

定义混合样式 @mixin， 引用混合样式 @include

和@extend的区别，一个是给自己套了一个选择器(@extend)，一个是把一些样式写在了自己的样式里(@mixin)，看代码看代码！！@mixin是解放生产力的一种做法

• 基本使用

@mixin large-text{
    font: {
        family: Arial;
        size: 25px;
    }
    color: #ff0;
}
//使用
.title{
    @include large-text;
    padding: 5px;
}

• 进阶使用

@mixin large-text($color, $font-size) {
    color: $color;
    font-size: $font-size;
}
//使用
p {
    @include large-text($color: #fff, $font-size: 20px)
}
//可以传变量， 变量也可以有默认值，当指令被引用的时候，如果没有给参数赋值，默认值生效，比如：
@mixin large-text($color, $font-size: 15px) {
    color: $color;
    font-size: $font-size;
}