为了账号安全,请及时绑定邮箱和手机立即绑定

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



作者:亲爱的孟良
链接:https://www.jianshu.com/p/f348eec86ac3


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消