Flands Blog HomeArchivesTags
SASS常用方法

SASS的一些常用方法，整理一下

数组

1
2
3
4
$marginL: 1px 2px 3px;
margin-left: nth($marginL, 1);
margin-left: nth($marginL, 2);
margin-left: nth($marginL, 3);

部件

方法

1
2
3
4
@mixin a{width: 100px};
SCSS中使用
@include a;
来导入

默认参数

1
2
3
传入默认参数，当无传参时使用
@mixin a ($width :50%) {width: 100px};
@include a (20%);

extend继承

1
2
3
.a{width: 100px}
.b{@extend .a}
%a //仅继承

@at-root

嵌套在样式中使其输出到样式表的顶层

1
@at-root{代码}

if检测

判断数值

1
2
3
if type-of($width) != number {
 @error "width是一个数值，你输入的是#{$width}"
 }

判断数值是否有单位

1
2
3
4
5
6
7
8
if not unitless($width){
    if unit($width) != "%"{
        @error "width是百分值，你输入的是#{$width}"
    }
} @else {
@warn "width是百分值，你输入的是#{$width}"    //警告
$width: (percentage($width) / 100);     //添加百分比
}

接下来是常用的部件

calc计算

1
2
3
4
5
6
7
@mixin calc($property, $expression) { 
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

$Width: 387px;
@include calc(top, "50% - #{$Width}/2");

清理浮动

1
2
3
4
5
6
7
8
9
10
11
12
/* 清理浮动代码 */
.cf {
    zoom:1;
    &.cf:before, &.cf:after {content:"";display:table;}
    &.cf:after {clear:both;}
}
/* 调用 */
.nav {
    @extend .cf;
}

使用.cf而不用%cf是因为如果文档未使用%cf而不会输出

常用路径规划

$img: '../img/';

文件里用法

background: url("#{$img}logo3.png") no-repeat;

koala不支持中文注释

打开

Koala\rubygems\gems\sass-3.4.9\lib\sass

修改engine.rb，在require最下面加入

Encoding.default_external = Encoding.find('utf-8')

避免运算

加上括号就行

多个SCSS文件

加上下划线，就不会编译了，整合SCSS有用 style.scss加上

@import "scss/header";

!important

display: block !important;
CSSSASS