1.0.1 • Published 6 years ago

wya-styles v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
6 years ago

结构

一、目录

  • themes 定义公共的变量
    • color.scss 颜色变量
    • default.scss 全局变量
  • mixins 定义公共的方法
    • animate.scss 动画
    • common.scss 公共方法
  • core 输出全局的样式
    • globals.scss 定义全局变量的方法
    • reset.scss 输出g-reset样式
    • animate.scss 输出动画
    • flex.scss 输出flex布局
    • layout.scss 输出全局变量
    • mobile 手机端模块样式
    • pc pc端模块样式

使用方法

  @import "../themes/default"; <br />
  @import "../mixins/index";

二、CSS 功能拓展

  • 嵌套规则、父选择器&、属性嵌套、位符选择器 %

SassScript

变量 $

运算

  • 所有数据类型均支持相等运算 == 或 !=
  • 数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值
  • 注意:除法运算
  • 以下三种情况 / 将被视为除法运算符号: 1、如果值,或值的一部分,是变量或者函数的返回值 2、如果值被圆括号包裹 3、如果值是算数表达式的一部分 4、如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。

  • 关系运算 <, >, <=, >= 也可用于数字运算

  • 颜色值运算
  • 字符串运算
  • 布尔运算:支持布尔型的 and or 以及 not 运算。

插值语句 #{}

控制指令

  • @extend
  • @include
  • @at-root
  • @debug
  • @if
  • @for
  • @each
  • @while
  • @mixin
  • @function

SassScript 支持六种主要的数据类型:

  • 数字Number(例如 1.2、13、10px)
  • 文本字符串Strings,无论是否有引号(例如 "foo"、'bar'、baz)
  • 颜色Color(例如 blue、#04a3f9、rgba(255, 0, 0, 0.5))
  • 布尔值Boolean(例如 true、false)
  • 空值Null(例如 null)
  • 值列表Lists,用空格或逗号分隔(例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif)
  • Maps(扩展)

函数:

  • 字符串函数

    • unquote($string):删除字符串中的引号;
    • quote($string):给字符串添加引号;
    • To-upper-case($string):将字符串小写字母转换为大写字母
    • To-lower-case($string):将字符串大写字母转换为小写字母
  • 数字函数

    • percentage($value):将不带单位的数转换成百分比值;
    • round($value):将数值四舍五入,转换成一个最接近的整数;
    • ceil($value):向上取整;
    • floor($value):向下取整;
    • abs($value):取数的绝对值;
    • min($numbers…):找出几个数值之间的最小值;
    • max($numbers…):找出几个数值之间的最大值;
    • random(): 获取随机数
  • 列表函数

    • length($list):返回一个列表的长度值;
    • nth($list, $n):返回一个列表中指定的某个标签值;
    • join($list1, $list2, $separator):将两个列给连接在一起,变成一个列表;
    • append($list1, $val, $separator):将某个值放在列表的最后;
    • zip($lists…):将几个列表结合成一个多维的列表;
    • index($list, $value):返回一个值在列表中的位置值。
    • Introspection函数: 主要用来对值做一个判断
    • type-of($value):返回一个值的类型;
    • unit($number):返回一个值的单位;
    • unitless($number):判断一个值是否带有单位;
    • comparable($number-1, $number-2):判断两个值是否可以做加、减和合并.

三元条件函数

  if($condition,$if-true,$if-false);

Maps的函数

  $map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
  )
  • map-get($map,$key):根据给定的 key 值,返回 map 中相关的值;
  • map-has-key($map,$key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false
  • map-keys($map):返回 map 中所有的 key
  • map-values($map):返回 map 中所有的 value
  • map-merge($map1,$map2):将两个 map 合并成一个新的 map
  • map-remove($map,$key):从 map 中删除一个 key,返回一个新 map
  • keywords($args):返回一个函数的参数,这个参数可以动态的设置 keyvalue

颜色函数

  • RGB
  • HSL
  • Opacity

简单介绍scss