frog-sass
frog-sass 样式库,让开发更加简洁.
基于 webpack & sass-loader。
Install
frog-sass 使用 npm 管理器,你需要通过 npm 来安装 frog-sass
npm install frog-sass --save
安装 eyeglass 扩展包 (eyeglass 地址:https://github.com/sass-eyeglass/eyeglass)
npm install eyeglass --save-dev
在你的 webpack.config.js 中添加如下代码
const path = require('path');
const webpack = require('webpack');
const eyeglass = require("eyeglass");
const config = {
...
module: {
rules: [
{
test: /(\.css|\.scss)$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'sass-loader',
options: eyeglass({
includePaths: path.resolve(__dirname, 'node_modules')
})
}
]
},
]
},
...
};
module.exports = config;
在你的 scss 文件首行添加引用
@import "frog-sass";
Using
清除浏览器默认样式 _reset
已内置于 frog-sass,引入 frog-sass 的同时已经在使用。
变量 _const
Color
// 四种主色
$primary-color: $BLUE_7;
$secondary-color: $GREEN_7;
$warning-color: $RED_7;
$default-color: $GREY_7;
// $[颜色]_[1-10]
Font
// font-family
// html 标签已默认设置 PC 和 Mobile 两种字体
$PC_FONT_FAMILY: "Noto Sans CJK SC", "Source Han Sans CN", STXihei, SimHei, "Microsoft YaHei";
$MOBILE_FONT_FAMILY: "Noto Sans CJK SC", "Source Han Sans CN", "PingFang SC", STXihei;
// font-size
$FONT_SIZE_10, $FONT_SIZE_12, $FONT_SIZE_14,
$FONT_SIZE_16, $FONT_SIZE_18, $FONT_SIZE_20,
$FONT_SIZE_22, $FONT_SIZE_24
// 针对 Chrmoe 无法展示 10 号字问题,暂时采取缩放方式解决
// 缩放会缩小块级元素,最好直接作用于 span 标签使用
@media screen and (-webkit-min-device-pixel-ratio: 0) {
span {
@include font-size-10();
}
}
Device
// 屏幕尺寸临界值
$SCREEN_XS: 480px;
$SCREEN_SM: 768px;
$SCREEN_MD: 992px;
$SCREEN_LG: 1200px;
统一添加浏览器前缀的方法
// 对于某些属性,浏览器的兼容可以通过添加前缀来处理
@mixin prefix($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
// 使用方法
.test {
@include prefix(transition, border-left 2s);
}
// 编译之后
.test {
-webkit-transition: border-left 2s;
-moz-transition: border-left 2s;
-ms-transition: border-left 2s;
-o-transition: border-left 2s;
transition: border-left 2s;
}
flex布局浏览器兼容
// 设置弹性布局
@mixin flexDisplay {
display: flex;/* android 4.4 */
display: -webkit-box;/* Android 2.1-3.0, iOS 3.2-4.3 */
display: -webkit-flex;/* Chrome 21+ */
display: -ms-flexbox;/* WP IE 10 */
}
// 水平布局下的子元素
@mixin flexJustify($position) {
justify-content: $position;/* android 4.4 */
-webkit-box-pack: $position;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: $position;/* Chrome 21+ */
-ms-flex-pack: $position;/* WP IE 10 */
}
// 垂直布局下的子元素
@mixin flexAlign($position) {
align-items: $position;/* android 4.4 */
-webkit-box-align: $position;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-align-items:$position;/* Chrome 21+ */
-ms-flex-align: $position;/* WP IE 10 */
}
// 设置弹性布局的方向,子元素按照在源文档中声明的顺序从上到下显示
@mixin flexDirectionColum {
flex-direction: column;/* android 4.4 */
-webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex-direction: column;/* Chrome 21+ */
-ms-flex-direction: column;/* WP IE 10 */
}
// 子元素自动占据剩余的空间
@mixin flex1 {
-webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex:1;/* Chrome 21+ */
-ms-flex:1;/* WP IE 10 */
flex:1;/* android 4.4 */
}
// 水平布局下的子元素 两端对齐
@mixin flexPackJustify {
-webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: space-between;/* Chrome 21+ */
-ms-flex-pack: justify;/* WP IE 10 */
justify-content: space-between;/* android 4.4 */
}
// 使用方法
.test {
@include flexDisplay();
@include flexJustify(center);
@include flexAlign(center);
}
// 编译之后
.test {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
}
常用组合的属性
// 省略号,单行文本超出指定宽度,显示省略号
@mixin ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
}
// 箭头,分为left,right,top,bottom四个方向的箭头,传入三个参数,分别是箭头指向,宽度,颜色
@mixin arrow($direction: right, $width: 10px, $color:#000000) {
width: 0;
height: 0;
@if $direction == top {
border-left: #{$width} solid transparent; /* 左边框的宽 */
border-right: #{$width} solid transparent; /* 右边框的宽 */
border-bottom: #{$width} solid $color;
} @else if $direction == bottom {
border-left: #{$width} solid transparent; /* 左边框的宽 */
border-right: #{$width} solid transparent; /* 右边框的宽 */
border-top: #{$width} solid $color;
} @else if $direction == left {
border-top: #{$width} solid transparent; /* 上边框的宽 */
border-bottom: #{$width} solid transparent; /* 下边框的宽 */
border-right: #{$width} solid $color;
} @else if $direction == right {
border-top: #{$width} solid transparent; /* 上边框的宽 */
border-bottom: #{$width} solid transparent; /* 下边框的宽 */
border-left: #{$width} solid $color;
}
}
// 省略号使用方法
.test {
@include ellipsis(); // 文本超出指定宽度,显示省略号
}
// 编译之后
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
}
// 箭头使用方法
.arrow {
@include arrow(top, 10px, #e4393c); // 生成一个宽度为10px的向上的红色箭头
}
// 编译之后
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent; /* 左边框的宽 */
border-right: 10px solid transparent; /* 右边框的宽 */
border-bottom: 10px solid #e4393c;
}
px2vw px2vh方法
// px2vw
@function px2vw($value, $width) {
@return $value/$width*100vw;
}
// px2vh
@function px2vh($value, $height) {
@return $value/$height*100vh;
}
// 使用方法,传入两个参数,第一个是元素宽度,第二个是设计稿宽度
.test {
width: px2vw(37.5px, 375px)
}
// 编译之后
.test {
width: 10vw;
}