试试scss

Posted on   |   In   |  

ruby的sass环境弄起来麻烦, 反正以后项目里集成sass也是自动的, 装个Koala…

规范

只有*.scss的文件 支持scss语法的编译,
还有个问题 注释里有中文就会报错…

scss语法

变量

1
2
3
4
5
/* variables */
$var-color: red;
.p1 {
  background-color: $var-color;
}

计算

1
2
3
4
/* calculate */
.p1 {
  border-radius: (50px /2);
}

缩进结构

1
2
3
4
5
6
7
/* indent */
.p1 {
  background-color: $var-color;
  .c1 {
    background-color: #000;
  }
}

父选择器

1
2
3
4
5
/* parent selector */
.p1 {
  background-color: $var-color;
  &:hover {background-color: yellow;}
}

引用

1
2
/* import */
@import "scssFile"; /*same as scssFile.scss*/

继承

1
2
3
4
5
/* inheritance */
.p2 {
  @extend .p1;
  border: 5px solid blue; 
}

混入

1
2
3
4
5
6
7
8
9
10
11
/*list of properties*/
$prefixes : -webkit-, -moz-, -ms-, -o-,"";
@mixin scss-radius ($radius) {
    @each $pre in $prefixes {
        #{$pre}border-radius:$radius;
    }
}
.p2 {
    @include scss-radius (10px);
}