Browse Source

Update 'README.md'

天问 1 year ago
parent
commit
4c8cbd4992
1 changed files with 448 additions and 1 deletions
  1. 448 1
      README.md

+ 448 - 1
README.md

@@ -1,7 +1,454 @@
 # stylus
 
+
+
+## Usage
+
+使用方式分两种。一种是在.vue文件的style块中使用,一种是引用.styl文件的形式
+
 ```
-npm install stylus -g
+npm install stylus stylus-loader --save-dev
 
 stylus -w style.styl -o style.css
 ```
+
+https://stylus.bootcss.com/
+
+## Docs
+
+### 选择器
+
+缩排(基于缩进代替大括号,空格代替冒号)当然按之前css写也是可以的
+
+  规则集:使用逗号为多个选择器同时定义属性,使用新行也是一样的效果
+
+```
+textarea, input
+  border 1px solid #eee
+//新行
+textarea
+input
+  border 1px solid #eee
+```
+
+  父级引用:字符&指向父选择器。下面这个例子,我们两个选择器(textarea和input)在:hover伪类选择器上都改变了color值
+```
+textarea
+input
+  color #A7A7A7
+  &:hover
+    color #000
+  消除歧义:类似padding - n的表达式可能既被解释成减法运算,也可能被释义成一元负号属性。为了避免这种歧义,用括号包裹表达式。
+```
+  有Stylus无法处理的属性值?unquote()可以帮你:
+
+filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')
+//生成为:
+filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
+二、变量
+  我们可以指定表达式为变量,然后在我们的样式中贯穿使用。标识符(变量名,函数等),也可能包括$字符。
+
+  变量甚至可以组成一个表达式列表
+```
+
+font-size = 14px
+font = font-size "Lucida Grande", Arial
+body
+  font font sans-serif
+//编译为:
+body {
+  font: 14px "Lucida Grande", Arial sans-serif;
+}
+```
+  Stylus有另外一个很酷的独特功能,不需要分配值给变量就可以定义引用属性。下面是个很好的例子,元素水平垂直居中对齐(典型的方法是使用百分比和margin负值),如下:
+
+```
+#logo
+  position: absolute
+  top: 50%
+  left: 50%
+  width: w = 150px
+  height: h = 80px
+  margin-left: -(w / 2)
+  margin-top: -(h / 2)
+
+  我们不使用这里的变量w和h,而是简单地前置@字符在属性名前来访问该属性名对应的值:
+
+
+#logo
+  position: absolute
+  top: 50%
+  left: 50%
+  width: 150px
+  height: 80px
+  margin-left: -(@width / 2)
+  margin-top: -(@height / 2)
+
+  属性会“向上冒泡”查找堆栈直到被发现,或者返回null(如果属性搞不定)。下面这个例子,@color被弄成了blue。
+
+
+body
+  color: red
+  ul
+    li
+      color: blue
+      a
+        background-color: @color
+```
+三、插值
+  Stylus支持通过使用{}字符包围表达式来插入值,其会变成标识符的一部分。例如,-webkit-{'border' + '-radius'}等同于-webkit-border-radius。比较好的例子就是私有前缀属性扩展:
+
+```
+vendor(prop, args)
+  -webkit-{prop} args
+  -moz-{prop} args
+  {prop} args
+
+border-radius()
+  vendor('border-radius', arguments)
+
+box-shadow()
+  vendor('box-shadow', arguments)
+
+button
+  border-radius 1px 2px / 3px 4px
+
+//变身:
+button {
+  -webkit-border-radius: 1px 2px / 3px 4px;
+  -moz-border-radius: 1px 2px / 3px 4px;
+  border-radius: 1px 2px / 3px 4px;
+}
+```
+  选择器插值:插值也可以在选择器上起作用。例如,我们可以指定表格前5行的高度,
+
+```
+table
+  for row in 1 2 3 4 5
+    tr:nth-child({row})
+      height: 10px * row
+//解析为
+table tr:nth-child(1) {
+  height: 10px;
+}
+table tr:nth-child(2) {
+  height: 20px;
+}
+table tr:nth-child(3) {
+  height: 30px;
+}
+table tr:nth-child(4) {
+  height: 40px;
+}
+table tr:nth-child(5) {
+  height: 50px;
+}
+```
+四、运算符
+  提供包含界线操作符(..)和范围操作符(...)
+
+1..5    // => 1 2 3 4 5
+1...5    // => 1 2 3 4
+  二元加乘运算其单位会转化,或使用默认字面量值
+
+  乘除:/ * %(在属性值内使用/时候,你必须用括号包住。否则/会根据其字面意思处理)
+```
+font: (14px/1.5);
+  真与假:Stylus近乎一切都是true,包括有后缀的单位,甚至0%、0px等都被认作true。不过,0在算术上本身是false。表达式(或“列表”)长度大于1被认为是真。
+
+
+//true例子:
+0% 
+0px
+1px 
+-1
+-1px
+hey
+'hey'
+(0 0 0)
+('' '')
+
+//false例子:
+0 
+null
+false
+''
+```
+  存在操作符in:检查左边内容是否在右边的表达式中。
+```
+
+//元组同样适用:
+vals = (error 'one') (error 'two')
+error in vals
+// => false
+(error 'one') in vals
+// => true
+
+  混合书写适用例子:
+
+
+pad(types = padding, n = 5px)
+  if padding in types
+    padding n
+  if margin in types
+    margin n
+
+body
+  pad()
+
+body
+  pad(margin)
+
+body
+  pad(padding margin, 10px)
+//对应于:
+body {
+  padding: 5px;
+}
+body {
+  margin: 5px;
+}
+body {
+  padding: 10px;
+  margin: 10px;
+}
+
+  条件赋值操作符?=(别名?:)让我们无需破坏旧值(如果存在)定义变量。该操作符可以扩展成三元内is defined的二元操作。
+
+color ?= white
+color = color is defined ? color : white
+  实例检查:is a:Stylus提供一个二元运算符叫做is a,用做类型检查。
+
+
+15 is a 'unit'
+// => true
+#fff is a 'rgba'
+// => true
+15 is a 'rgba'
+// => false
+//另外,我们可以使用type()这个内置函数。
+type(#fff) == 'rgba'
+// => true
+//注意:color是唯一的特殊情况,当左边是RGBA或者HSLA节点时,都为true.
+
+  变量定义:is defined:此伪二元运算符右边空荡荡,左边无计算。用来检查变量是否已经分配了值。
+
+
+foo is defined
+// => false
+foo = 15px
+foo is defined
+// => true
+#fff is defined
+// => 'invalid "is defined" check on non-variable #fff'
+
+  该操作符必不可少,因为一个未定义的标识符仍是真值。
+
+
+body
+  if ohnoes
+    padding 5px
+//当未定义的时候,产生的是下面的CSS
+body {
+  padding: 5px;
+}
+//显然,这不是我们想要的,如下书写就安全了:
+body
+  if ohnoes is defined
+    padding 5px
+
+  颜色操作:颜色操作提供了一个简洁,富有表现力的方式来改变其组成。例如,我们可以对每个RGB:
+
+#0e0 + #0e0
+// => #0f0
+  另外一个例子是通过增加或减少百分值调整颜色亮度。颜色亮,加;暗,则减。
+
+#888 + 50%
+// => #c3c3c3
+#888 - 50%
+// => #444
+```
+五、混合书写(Mixins)
+  Mixins是预处器中的函数。平时你在写样式时肯定有碰到过,某段CSS样式经常要用到多个元素中,这样你就需要重复的写多次。在CSS预处器中,你可以为这些公用的CSS样式定义一个Mixin,然后在你CSS需要使用这些样式的地方,直接调用你定义好的Mixin。这是一个非常有用的特性。Mixins是一个公认的选择器,还可以在Mixins中定义变量或者是默认参数。可以不使用任何符号,就是直接定义Mixins名,然后在定义参数和默认值之间用等号(=)来连接。
+
+```
+/* Stylus 定义了一个名叫error的mixin,这个error设置了一个参数“$borderWidth”,在没特别定义外,这个参数的值是默认值2px */
+error(borderWidth= 2px) {
+  border: borderWidth solid #F00;
+  color: #F00;
+}
+.generic-error {
+  padding: 20px;
+  margin: 4px;
+  error(); /* 调用error mixins */
+}
+.login-error {
+  left: 12px;
+  position: absolute;
+  top: 20px;
+  error(5px); /* 调用error mixins,并将参数$borderWidth的值指定为5px */
+} 
+```
+1、混入
+
+  混入和函数定义方法一致,但是应用却大相径庭。例如,下面有定义的border-radius(n)方法,其却作为一个mixin(如,作为状态调用,而非表达式)调用。当border-radius()选择器中调用时候,属性会被扩展并复制在选择器中。
+
+```
+border-radius(n)
+  -webkit-border-radius n
+  -moz-border-radius n
+  border-radius n
+
+form input[type=button]
+  border-radius(5px)
+//编译为
+form input[type=button] {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+  使用混入书写,你可以完全忽略括号,提供梦幻般私有属性的支持。
+
+
+border-radius(n)
+  -webkit-border-radius n
+  -moz-border-radius n
+  border-radius n
+
+form input[type=button]
+  border-radius 5px
+
+  注意到我们混合书写中的border-radius当作了属性,而不是一个递归函数调用。
+
+  更进一步,我们可以利用arguments这个局部变量,传递可以包含多值的表达式。
+
+border-radius()
+  -webkit-border-radius arguments
+  -moz-border-radius arguments
+  border-radius arguments
+  现在,我们可以像这样子传值:border-radius 1px 2px / 3px 4px!
+```
+2、父级引用
+
+  混合书写可以利用父级引用字符&,继承父业而不是自己筑巢。例如,我们要用stripe(even, odd)创建一个条纹表格。even和odd均提供了默认颜色值,每行也指定了background-color属性。我们可以在tr嵌套中使用&来引用tr,以提供even颜色。
+
+```
+stripe(even = #fff, odd = #eee)
+ tr
+   background-color odd
+   &.even
+   &:nth-child(even)
+       background-color even
+
+//如果你愿意,你可以把stripe()当作属性调用。
+stripe #fff #000
+3、混合书写中的混合书写
+
+  自然,混合书写可以利用其它混合书写,建立在它们自己的属性和选择器上。
+
+
+inline-list()
+  li
+    display inline
+
+comma-list()
+  inline-list()
+  li
+    &:after
+      content ', '
+    &:last-child:after
+      content ''
+
+ul
+  comma-list()
+```
+六、方法(Functions)
+1、函数:Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致;却可以返回值。
+
+2、返回值:
+
+
+//很简单的例子,两数值相加的方法:
+add(a, b)
+  a + b
+
+//我们可以在特定条件下使用该方法,如在属性值中:
+body 
+  padding add(10px, 5)
+
+//渲染:
+body {
+  padding: 15px;
+}
+
+3、默认参数:可选参数往往有个默认的给定表达。在Stylus中,我们甚至可以超越默认参数。
+
+
+add(a, b = a)
+  a + b
+
+add(10, 5)
+// => 15
+add(10)
+// => 20
+
+4、多个返回值:Stylus的函数可以返回多个值,就像你给变量赋多个值一样。
+
+```
+//下面就是一个有效赋值:
+sizes = 15px 10px
+sizes[0]
+// => 15px
+
+//类似的,我们可以在函数中返回多个值:
+sizes()
+ 15px 10px
+sizes()[0]
+// => 15px
+```
+5、别名:给函数起个别名,很简单,直接等于就可以了。例如上面的add()弄个别名plus(), 如下:
+```
+plus = add
+plus(1, 2)
+// => 3
+```
+6、变量函数:我们可以把函数当作变量传递到新的函数中。例如,invoke()接受函数作为参数,因此,我们可以传递add()以及sub()。
+
+```
+invoke(a, b, fn)
+  fn(a, b)
+add(a, b)
+  a + b
+body
+  padding invoke(5, 10, add)
+  padding invoke(5, 10, sub)
+//结果:
+body {
+  padding: 15;
+  padding: -5;
+}
+```
+7、参数:arguments是所有函数体都有的局部变量,包含传递的所有参数。
+
+```
+sum()
+  n = 0
+  for num in arguments
+    n = n + num
+
+sum(1,2,3,4,5)
+// => 15
+```
+8、哈希示例:下面,我们定义get(hash, key)方法,用来返回key值或null。我们遍历每个键值对,如果键值匹配,返回对应的值。
+```
+
+hash = (one 1) (two 2) (three 3)
+
+get(hash, two)
+// => 2
+get(hash, three)
+// => 3
+get(hash, something)
+// => null
+```