L3F.WIN

Github及Hexo的使用

0%

Hexo Landscape模板修改

1. Landscape菜单的修改

themes/landscape/_config.yml
使用Editor工具打开_config.yml文件,找到 menu ,下面就是你需要修改的菜单选项了。
输入格式

1
菜单名称: 链接地址

2. 修改Read More

themes/landscape/_config.yml
使用Editor工具打开_config.yml文件,找到 excerpt_link ,下面就是你需要修改的菜单选项了。
输入格式

1
excerpt_link: '希望显示的文字'
阅读全文 »

哈希

Stylus 的0.39.0版添加了对哈希的支持

定义

你可以使用大括号和逗号将键和值定义一个哈希对象:

1
2
3
4
foo = {
bar: baz,
baz: raz
}

Key值应该是合法的标识或字符串:

1
2
3
4
5
foo = {
bar: baz,
'baz': raz,
'0': raz
}

当你已经有hash后,你就可以使用括号和字符串来设置它的值:

1
2
3
foo = {}
foo['bar'] = baz
foo['baz'] = raz

注意,你不能使用变量或插值在大括号定义,你可以在括号中使用变量:

1
2
3
4
5
6
foo = {}
bar = 'baz'
foo[bar] = raz

foo.baz
// => raz
阅读全文 »

条件式

条件提供控制流,否则就是静态语言了,提供有条件的导入,混合,函数等。 下面的例子是简单的例子,不推荐:)

if / else if / else

跟一般的语言一致,if表达式满足(true)的时候执行后面语句块,否则,继续后面的else if或else.
下面这个例子,根据overload的条件,决定是使用padding还是margin.

1
2
3
4
5
6
7
8
overload-padding = true

if overload-padding
padding(y, x)
margin y x

body
padding 5px 10px
阅读全文 »

注释

Stylus支持三种注释,单行注释,多行注释,以及多行缓冲注释。

单行注释

跟JavaScript一样,双斜杠,CSS中不输出。

1
2
3
// 我是注释!
body
padding 5px // 蛋疼的padding

多行注释

多行注释看起来有点像CSS的常规注释。然而,它们只有在compress选项未启用的时候才会被输出。

1
2
3
4
5
6
/*
* 给定数值合体
*/

add(a, b)
a + b

多行缓冲注释

跟多行注释类似,不同之处在于开始的时候,这里是/*!. 这个相当于告诉Stylus压缩的时候这段无视直接输出。

1
2
3
4
5
6
/*!
* 给定数值合体
*/

add(a, b)
a + b

Rest参数

Stylus 支持name…形式的其余参数。这些参数可以传递给 混入函数的参数们。这在处理浏览器私有属性,如-moz或-webkit的时候很管用。
下面这个例子中,所有的参数们(1px, 2px, …)都被一个args参数给简单处理了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args

#login
box-shadow 1px 2px 5px #eee

=>
#login {
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}
阅读全文 »

Stylue内置方法
red(color)
返回color中的红色比重

1
red(#c00)  => 204

green(color)
返回color中的绿色比重。

1
green(#c00)  => 204

blue(color)
返回color中的蓝色比重。

1
blue(#c00)  => 204

alpha(color)
返回color中的透明度比重

1
2
3
4
5
alpha(#fff)
// => 1

alpha(rgba(0,0,0,0.3))
// => 0.3

dark(color)
检查color是否是暗色。

1
2
3
4
5
6
7
8
dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false
阅读全文 »

使用运算符号
和其他语言一样 stylus 也有运算符号,
最常用的 + - * / % 等等
逻辑运算符号 !, ==, !=, >=, >, <=, <等等
stylus 中都可以使用。而且 stylus 提供很多新的运算符号。

阅读全文 »

使用变量
我们还是以举例开始学习

我们打开 themes/landscape/source/css 找到 _variables.styl 文件并打开
会发现很多如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// Fonts
font-sans = -apple-system, "Microsoft YaHei" BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em
阅读全文 »

stylus介绍

stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。比较年轻,其本质上做的事情与 SASS/LESS 等类似,应该是有很多借鉴,所以近似脚本的方式去写CSS代码。

.stylstylus 的文件扩展名,支持多样性的CSS语法。

参考文档
官方API

阅读全文 »