CSS预编译---SASS

14 篇文章 0 订阅
  • 声明变量($name:10px;)
  • 计算功能(font-size:10px-2px;)
  • 嵌套
#idName {
    .className {
        color: red;
    }
}
  • 注释(标准的CSS注释 /* comment */ ,会保留到编译后的文件。
  • 单行注释 // comment,只保留在SASS源文件中,编译后被省略。
  • 在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。)
  • 继承(@extend)
.class1 {
  border: 1px solid #ddd;
}

//@extend继承
.class2 {
    @extend .class1;
}
  • Mixin(@Mixin name{}定义重用样式,可设定参数,@include name;引用)
//@mixin定义CSS代码块
@mixin left {
  float: left;
  margin-left: 10px;
}

//@include引入代码
.class1 {
    @include left;
}


//指定参数和缺省值。
@mixin left($pos ,$value: 10px) {
  float: $pos;
  margin-left: $value;
}

//include传参
.class1 {
    @include left(left, 10px);
}


//复杂样例
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

.class1 {
    @include rounded(top, left);
}
  • 颜色函数 ( lighten(#cc3, 10%))

SASS提供了一些内置的颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
  • @import插入文件
@import "path/filename.scss";
  • 条件语句、循环语句
//if语句
$value:true !default;
.class1 {
    @if $value { 
        *display: inline;
        *zoom:1; 
    }@else {
        /**/
    }
}


//循环语句
@for $i from 1 to 10 {
  .border-#{$i} {
      border: #{$i}px solid blue;
  }
}


//while语句
$i: 6;

@while $i > 0 {
  .item-#{$i} { 
        width: 2em * $i; 
    }
  $i: $i - 2;
}


//each命令,作用与for类似:
@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
  • 自定义函数(@function name(){})
@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

文中实例及参照大多来自SASS文章。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值