L3F.WIN

Github及Hexo的使用

0%

URL()

内联Data URI图像
Stylus捆绑了一个可选函数,名叫url(),其替换了字面上的url()调用(且使用base64 Data URIs有条件地内联它们)。

示例

通过require(‘stylus’).url该函数本身是可用的,其接受一个options对象,当看到url()时候,返回Stylus内部调用的函数。
.define(name, callback)方法指定了一个可被调用的JavaScript函数。在这种情况下,因为我们图片在./css/images中,我们可以忽视paths选项(默认情况下,会查找相关要呈现的图像文件)。如果愿意,该行为时可以改变的。

1
2
3
4
5
6
stylus(str)
.set('filename', __dirname + '/css/test.styl')
.define('url', stylus.url())
.render(function(err, css){

});
阅读全文 »

@BLOCK

您可以将Stylus中的任何代码块分配给一个变量,然后调用它,作为参数传递或以任何其他方式重用。
要定义一个块,可以在分配符号之后用增加的缩进记下它:

1
2
3
foo =
width: 20px
height: 20px

或者在@block关键字中使用花括号语法:

1
2
3
4
foo = @block {
width: 20px
height: 20px
}

如果你想在任何地方渲染这个块,你可以在插值中调用这个变量,所以

1
2
3
4
5
6
7
.icon
{foo}
=>
.icon {
width: 20px;
height: 20px;
}

顺便说一句,你也可以使用传递给块mixin的块的方式相同。
现在,您只能将该变量作为其他变量传递并在插值内呈现。 将来我们会提供更多的处理方法。

继承 @EXTEND

Stylus的@extend指令受SASS实现的启发,基本一致,除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。
混入的“继承”
尽管你可以使用混入实现类似效果,但会导致重复的CSS. 典型的模式式定义如下的几个类名,然后归结到一个元素中,例如”warning message”.
该技术实现是没什么问题,但是维护就比较麻烦了。

1
2
3
4
5
6
7
8
9
message,
.warning {
padding: 10px;
border: 1px solid #eee;
}

.warning {
color: #E2E21E;
}
阅读全文 »

其他 @-RULES

stylus对大多数CSS @规则都有支持,比如@viewport,@page,@host,@supports和其他:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@viewport
color: #00f

@supports (display: flex)
div
display: flex

@page :blank
@top-center
content: none
=>
@viewport {
color: #00f;
}
@supports (display: flex) {
div {
display: flex;
}
}
@page :blank {
@top-center {
content: none;
}
}
阅读全文 »

@KEYFRAMES

Stylus支持@keyframes规则,当编译的时候转换成@-webkit-keyframes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$keyframe-name = pulse
@keyframes {$keyframe-name}
for i in 0..10
{10% * i}
opacity (i/10)

=>
@keyframes pulse {
0% {
opacity: 0;
}
20% {
opacity: 0.2;
}
40% {
opacity: 0.4;
}
60% {
opacity: 0.6;
}
80% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
阅读全文 »

@FONT-FACE

@font-face跟其在CSS中作用表现一样,在后面简单地添加个块状属性即可,类似下面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@font-face
font-family Geo
font-style normal
src url(fonts/geo_sans_light/GensansLight.ttf)

.ingeo
font-family Geo

=>
@font-face {
font-family: Geo;
font-style: normal;
src: url("fonts/geo_sans_light/GensansLight.ttf");
}
.ingeo {
font-family: Geo;
}

学习修改Landscape模板

本次修改需有一定的前端技术能力, 我们将以Landscape模板作为基础,修改成其他样式的模板。

1. 头部修改

目标: 将Logo 置于页面的左上角,缩小头部的高度。

首先将Logo,移动到 header-inner 下的 main-nav里面
打开landscape目录下的layout/_partial/header.ejs文件

1
<a href="<%- url_for() %>" id="logo" class="main-nav-link"><%= config.title %></a>

复制到

1
<nav id="main-nav">

阅读全文 »

@MEDIA

@media工作原理和在常规CSS中一样,但是,要使用Stylus的块状符号。

1
2
3
4
5
6
7
8
9
10
11
@media print
#header
#footer
display none
=>
@media print {
#header,
#footer {
display: none;
}
}
阅读全文 »

@IMPORT 和 @REQUIRE

Stylus 支持CSS的关键字@import,以及动态导入其他Stylus表。

关键字CSS

任何.css扩展的文件名将作为关键字的值。例如:

1
2
3
@import "reset.css"
=>
@import "reset.css"

导入Stylus

免责声明:在@import所有的地方都使用stylus,也可以使用@require
当使用不带.css扩展名的@import时,它被假定使用stylus(例如@import”mixins/border-radius”)。
@import可以通过遍历目录来工作,并检查这个文件是否存在于其中任何一个目录中(类似于node的require.paths)。 此数组默认为单个路径,该路径是从文件名选项的dirname派生的。 因此,如果您的文件名是/tmp/testing/stylus/main.styl,那么导入将会在/tmp/testing/stylus/中查找。
@import也支持索引样式。 这意味着当你@import blueprint,它将解析成blueprint.styl或blueprint/index.styl。 这对于想要公开其所有功能的库非常有用,同时仍允许导入功能子集。
例如,一个常见的库结构:

1
2
3
4
5
./tablet
|-- index.styl
|-- vendor.styl
|-- buttons.styl
|-- images.styl
阅读全文 »