css 预处理器的相关使用

sass 预处理器相关语法及使用技巧

1. 变量

定义变量：$变量: 属性值; 的方式定义变量
使用变量：$变量

$bone_fish_color: #dcdfe6;/* 使用 */
color: $bone_fish_color;

2. 继承 @extend

使用场景: 继承另一个选择器的代码.
使用方式: @extend(.|#)需要继承代码的选择器

.class {border: 1px solid #f00;
}
.class1 {@extend.class;font-size: 12px;
}

3. 重用代码块 mixin

使用场景: 同一块代码需要重复使用,只有部分代码不同可以使用 mixin
使用方式:

1. 定义 @mixin 方法
2. 使用 @include 调用 上面定义的方法.

mixin 可以当作一个方法,传入不同的参数

@mixin randomAttr($attr, $value: 1s) {-webkit-#{$attr}: $value;-moz-#{$attr}: $value;-ms-#{$attr}: $value;-o-#{$attr}: $value;#{$attr}: $value;
}
div {@include randomAttr(animation);
}

4. & 父选择器的标识符;

article a {color: blue;&:hover {color: red;}
}

scss 一些常用的方法

兼容 IE 透明度写法

@mixin opacity($number: 0.5) {opacity: $number;filter: alpha(opacity=#{$number * 100});
}

修改 input placeholder 颜色

@mixin placeholderColor($color: #fff) {&::-webkit-input-placeholder {color: $color;}&::-moz-placeholder {/* Mozilla Firefox 19+ */color: $color;}&:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: $color;}&:-ms-input-placeholder {/* Internet Explorer 10-11 */color: $color;}
}

多行文字超出显示省略号

@mixin ellipsisMultiline($number: 1) {display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: $number;
}

文字一行超出显示省略号

%ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}