〆 sass [manage your css]

⚠ I never really noticed that I had to decide, to play someone’s game or live my own life.

manage your css by sass 使用SASS管理自己的css。

[主要语言] sass

install sass

命令行方式

关于sass的使用,通常有图形化界面和命令行两种方式,作为一个有轻微技术情怀的少年,我选择使用命令行的方式

sass 安装

首先你需要安装node环境,至于安装方式这里不再赘述,我们的内容从nodejs安装完成后的sass安装开始:

npm install -g sass (anywhere)
choco install sass (windows)
brew install sass/sass/sass (mac)

sass 关键字

缩进控制层级关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

$自定义变量

1
2
3
4
5
6
7
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

@import 关键字 拆分css

优点:单个css更小,整体更便于层级管理和后期维护
缺点:每次import都需要一次request请求

1
2
3
4
5
6
7
8
9
// _reset.scss

html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
1
2
3
4
5
6
7
8
// base.scss

@import 'reset';

body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

@mixin and @include

多用于批量前缀或者后缀等重复性工作的处理

1
2
3
4
5
6
7
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}

.box { @include transform(rotate(30deg)); }

@extend 关键字

主要用于:单个选择器的样式批量添加

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
28
29
30
31
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}

// This CSS will print because %message-shared is extended.
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.message {
@extend %message-shared;
}

.success {
@extend %message-shared;
border-color: green;
}

.error {
@extend %message-shared;
border-color: red;
}

.warning {
@extend %message-shared;
border-color: yellow;
}

混合运算

在sass里,css可以进行数据相关混合运算

1
2
3
4
5
6
7
.container { width: 100%; }


article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
真孒今将命


此致: 敬礼!

送赵法师还蜀因名山奠简

作者: 李隆基

摘自: 《全唐诗》

道家奠灵简, 自昔仰神仙

真孒今将命, 苍生福可传

江山寻故国, 城郭信依然

二室遥相望, 云回洞里天

座右铭: 进化是形成我们的身体形状和我们内在本能的主要力量, 他赋予我们大脑和学习机制,使我们可以根据经验实现自我更新。我们还需要终生学习,以改变我们的行为,从而适应包括进化论还不能预测的和可预测的各种环境。
Evolution is the major force that defines our bodily shape as well as our built-in instincts and reflexes. We also learn to change our behavior during our lifetime. This helps us cope with changes in the environment that cannot be predicted by evolution. Organisms that have a short life in a well-defined environment may have all their behavior built-in, but instead of hardwiring into us all sorts of behavior for any circumstance that we could encounter in our life, evolution gave us a large brain and a mechanism to learn, such that we could update ourselves with experience and adapt to different environments.