sass 指令学习

原创
2016/03/24 17:08
阅读数 158

格式化风格

nested      缩进嵌套css (默认的)
expanded    没有缩进。扩展的css
compact    简洁格式的css
compressed   压缩之后的css

变量

$blue: #fff;

使用#{} 嵌套字符串


$side:left;

.test{
    border-#{$side}-radius:5px
}

计算功能

使用 *  /   +     - 
进行计算


嵌套

原来代理
div h1{
    color:red;
}

// scss 可以这样

div{
    h1{
        color:red;
    }
}


在嵌套里面,可以使用&引用父元素,比如 a:hover的写法
a{
    &:hover{
        color: red;
    }
}


继承

比如已经有了class1 了
.class1{
    
}

这边class2可以继承 class1的

.class2{
    @extend .class1;
}

mixin

对于mixin有点像 c语言里面的宏,可以重用的代码块
使用@mixin指令,定义一个代码块


@mixin left{
    float:left;
    margin-left:10px
}


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

颜色函数

sass 提供一些内置的颜色函数


插入文件

@import 方法


@if 条件判断

@else 命令

@if 1 + 1 == 2 {  border: 1px solid; }


循环语句 for  / while  语句  each 语句 

@for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }
  
  
  
  $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }
  

自定义函数

@funcion double($n){
    @return $n * 2;
}




展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部