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

推荐阅读更多精彩内容