曾经,我听说每个人的微信好友列表,都能找到一个昵称叫Serendipity的朋友。
当时年少轻狂的我,一直对此嗤之以鼻,搜完之后,好神奇啊!I'm so haipa!
你也快去试试,真的很神奇!
Serendipity不常见,但是寓意挺好的:意外的好运,也翻译做缘分天注定。
老外也默认这个单词可以做名字,这么独特,那就四舍五入等于高级,所以我就把这类名字搬运过来,有些名字如“芫荽香菜”“长生不老药”,高级到我大吃一斤!但我不创造英文名,我只是英文名的搬运工!所以,让我们一起欣赏吧!
目录:
男生名字
女生名字
男生名字
1 Acre 阿克里 含义:英亩
2 Aeolian 伊奥利亚 含义:风的,与风神有关的
3 Alnico 艾尔尼蔻 含义:铝镍钴合金
4 Alpenglow 阿尔彭洛 含义:德语,“高山上落日或旭日的玫瑰色光芒”彩霞
5 Ardent 阿登特 含义:燃烧;热情,充满激情
6 Auric 奥瑞克 含义:奥瑞克是伊恩·弗莱明的反英雄,更广为人知的名字是金手指。
7 Axiom 艾克西恩姆 含义:真理的陈述,公理
8 Bard 巴德 含义:吟游诗人
9 Bayou 八友 含义:河口,自然名称
10 Boreal 博瑞尔 含义:北方,北风之神
11 Bronco 博容叩 含义:野马
12 Calyx 卡烈克斯 含义:花萼、圣杯
13 Cambric 康博瑞客 含义:细亚麻布
14 Caraway 卡若唯 含义:香菜
15 Celsian 塞尔顺 含义:钡长石
16 Coriander 可瑞安德 含义:芫荽,香菜
17 Cormorant 可莫任特 含义:鸬鹚
18 Cosmic 可斯米克 含义:宇宙的
19 Denarius 德纳里 含义:银币
20 Dusk 达斯科 含义:黄昏
21 Elysian 埃利西安 含义:幸福的
22 Euphonious 优缶尼尔斯 含义:悦耳的
23 Fennel 法诺 含义:茴香
24 Fresco 弗瑞斯叩 含义:壁画
25 Glacier 格雷希儿 含义:冰川
26 Hanalei 哈纳雷 含义:夏威夷Kauaʻi岛上的一个城镇
27 Hickory 希可瑞 含义:山核桃
28 Jive 卓艾弗 含义:舞蹈
29 Julep 朱利普 含义:玫瑰水、冰镇薄荷酒
30 Lariat 拉瑞尔特 含义:套索
31 Meander 米安德 含义:河湾蜿蜒
32 Meridian 莫瑞迪恩 含义:子午线
33 Orison 奥里森 含义:祈祷
34 Obsidian 欧博西迪恩 含义:黑曜石
35 Paladin 帕拉丁 含义:圣骑士
36 Papyrus 珀派尔若斯 含义:造纸厂
37 Petrichor 彼得里奇 含义:干燥土地上新雨的泥土气息
38 Plateau 普拉透 含义:高原,平稳期
39 Pyrite 派若艾特 含义:火石,黄铁矿
40 Quartz KO兹 含义:石英
41 Radar 雷达 含义:雷达
42 Redeem 瑞蒂姆 含义:回购,赎回
43 Rondeau 隆多 含义:回旋诗
44 Russet 拉锡特 含义:微红
45 Sonder 桑德 含义:为2012年创造的新词晦涩悲伤词典旨在为目前缺乏词汇的情感提出新的术语
46 Spark 斯巴克 含义:“发光粒子”,火花
47 Spur 斯柏尔 含义:马刺,激励,鼓励
48 Tarragon 塔若根 含义:龙须草,龙蒿
49 Twilight 图艾莱特 含义:黄昏,暮色
50 Valiant 瓦蓝特 含义:勇敢
51 Wanderer 万德若 含义:漫游的人;漂泊者
52 Zeal 自由 含义:激情、热情
53 Zircon 哲儿康 含义:金色的锆石
女生名字
1 Adelite 阿德莉特 含义:砷钙镁石
2 Alacrity 埃莱可若缇 含义:乐意,美滋滋
3 Apricity 娥普希缇 含义:冬日暖阳
4 Arabesque 阿拉贝斯克 含义:华丽的设计
5 Aviatrix 艾薇艾翠可丝 含义:女飞行员
6 Brocade 波若凯德 含义:织锦
7 Caldera 卡尔德拉 含义:火山口
8 Camber 坎博 含义:弧形
9 Carefree 咖芙蕊 含义:悠然,无忧无虑
10 Cassava 可莎瓦 含义:木薯
11 Cleome 克莱姆 含义:蜘蛛花
12 Comet KO米特 含义:彗星
13 Conifer 空妮芙儿 含义:针叶树
14 Daystar 黛丝达 含义:晨星
15 Dittany 迪特妮 含义:薄荷花的一种
16 Dulcet 杜尔赛 含义:悦耳动听的
17 Egret 伊格若特 含义:白鹭
18 Elixir 伊莉克瑟 含义:长生不老药,仙丹
19 Enigma 伊妮格玛 含义:谜题,谜
20 Evanescence 伊凡塞斯 含义:消失,消失
21 Evensong 伊文颂 含义:晚祷
22 Everglade 埃芙儿格蕾德 含义:大沼泽地
23 Flair 芙莱儿 含义:天赋
24 Flourish 芙拉蕊什 含义:蓬勃发展
25 Freesia 弗瑞希雅 含义:一个罕见的,自由感受的花名,小苍兰
26 Glow 格洛 含义:洋溢,温柔地闪耀
27 Imagine 伊麦君 含义:想象
28 Ixia 伊克夏 含义:ixia家族的成员通常被称为玉米百合。
29 Jovial 若维亚尔 含义:愉快的,快乐的
30 Kindred 金德 含义:相似
31 Kismet 基兹麦特 含义:命运
32 Lazuli 拉祖莉 含义:天青石
33 Lullaby 拉乐百 含义:摇篮曲
34 Madrigal 麦卓瑞构 含义:牧歌
35 Mallow 马洛 含义:柔和、醇厚
36 Meridian 莫瑞迪恩 含义:子午线(男生也可用)
37 Minnow 米诺 含义:米诺鱼
38 Mirage 米拉什 含义:视错觉,海市蜃楼,幻影
39 Moonglade 穆格蕾德 含义:月光林地
40 Nebula 奈biu乐 含义:星云
41 Oasis 欧埃希斯 含义:沙漠中的沃土,绿洲
42 Orchard 奥彻德 含义:果园、花园庭院
43 Panacea 派讷希儿 含义:万能药
44 Penumbra 珀南博若 含义:部分阴影,半影
45 Pipistrelle 皮皮斯黛拉 含义:蝙蝠伏翼
46 Rivulet 瑞薇乐特 含义:小溪
47 Selkie 赛尔克 含义:海豹人
48 Serendipity 瑟伦蒂珀缇 含义:意外的好运,缘分天注定 【听说,每个人的朋友圈都有我】
49 Solstice 索尔丝缇丝 含义:当太阳静止不动; (夏或冬)至
50 Sonata 瑟娜塔 含义:奏鸣曲
51 Stanza 丝丹哲 含义:诗体
52 Tamarisk 泰莫蕊丝可 含义:盐雪松,暗示韧性和力量
53 Tenacity 特娜瑟缇 含义:固执,坚韧
54 Tourmaline 图莫灵 含义:彩色宝石精致闪亮,电气石
55 Triolet 初爱尔莉特 含义:八行两韵诗
56 Tundra 谭卓 含义:冰冷的苔原
57 Tuya 图雅 含义:平顶火山
58 Umbra 安博若 含义:影子,本影
59 Utopia 乌托邦 含义:想象中的完美之地
60 Velocity 芙洛瑟缇 含义:敏捷,速度
61 Velveteen 薇儿芙婷 含义:柔软的织物
62 Vespertine 维斯珀廷 含义:薄暮的
63 Vivid 薇薇德 含义:明亮,大胆,生动
64 Voyager 佛伊伊居儿 含义:旅行者
65 Whimsy 薇姆希 含义:奇思妙想
以上,希望有你喜欢的!
1、安装sass
1.安装ruby
因为sass是用ruby语言写的,所以需要安装ruby环境
打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径
Add Ruby executables to your PATH
安装完成之后继续下一步操作
2.安装sass
在cmd里通过gem安装sass
gem是ruby的包管理工具,类似于nodejs 的npm
gem install sass1这个时候如果不翻墙的话是会出问题的,因为:
由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了
$ gem sources --remove https://rubygems.org/$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass1234567
安装好之后执行sass -v就可以看到sass的版本了
实在实在不行,就安装离线文件吧,但是失败率也很高
gem install ./…/sass-3.4.22.gem
2、编译sass文件的方式
1.命令行编译
可以通过cmd命令行执行sass方法来编译
例如:
sass scss/a.scss:css/a.css1sass 后面写要编译的sass文件的路径,‘:’后面写的是
要输出的目录及名字
需要注意的是:必须有这个文件夹才能在里面生成css
这样的话写一句执行一次编译一次有些太麻烦
可以开启一个watch来监听文件变化来进行编译
sass --watch scss:css1–watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹
2.其他方式编译
除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的
考拉的方式就不多做介绍了,大家i自己去看一下
gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less
这里是网址,点击查看
3、sass四种风格
sass编译的格式
sass编译输出的css有四种格式
nested 嵌套
compact 紧凑
expanded 扩展
compressed 压缩
这些样式会影响输出的css的格式
简单介绍一下:
css默认输出的嵌套
ul{font-size:15px
li{
list-style:none
}
}123456
—》
ul {font-size: 15px}
ul li {
list-style: none}1234
紧凑compact
在编译的时候需要执行
sass --watch scss:css --style compact1这个时候输出的代码就是
ul { font-size: 15px}ul li { list-style: nonepadding: 5px}12
compressed 压缩
在编译的时候需要执行
sass --watch scss:css --style compressed1—>
ul{font-size:15px}ul li{list-style:noneanimation:all 0.4s}1expanded 扩展
更像是平时写的css一样
在编译的时候需要执行
sass --watch scss:css --style expanded1—>
ul {font-size: 15px
}
ul li {
list-style: none
animation: all 0.3s
}1234567
compressed 压缩
更像是平时写的css一样
在编译的时候需要执行
sass --watch scss:css --style compressed1—>
.a{width:100pxheight:100pxborder:1px solid red}.a .b{background:red}14、sass与scss
sass的两个语法版本
sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法
两个版本的区别
后缀名不同 .sass和.scss
语法不同,请看下面
新版:
/*新版本多行文本注释*/
//新版本
//单行文本注释
@import "base"
@mixin alert{
color:red
background:blue
}
.alert-warning{
@include alert
}
ul{
font-size:15px
li{
list-style:none
}
}123456789101112131415161718
老版本:
/*新版本多行文本注释
//新版本
单行文本注释
@import "base"
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none1234567891011121314
5、变量、嵌套、混合、继承拓展
变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护,更改方便
变量的使用
可以通过$来定义变量,在变量名字中可以使用-和_来作为连接,并且-和_是可以互通的,就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等,在变量里还可以使用其他变量,使用的时候直接写变量名就好了
例如
$primary-color:#ff6600$primary-border:1px solid $primary_color
div.box{
background:$primary-color
}
h1.page-header{
border:$primary-border
}12345678
—》
div.box {background: #ff6600
}
h1.page-header {
border: 1px solid #ff6600
}123456
嵌套的使用
合理的使用嵌套语法,可以使我们编写代码更为快捷
假设我们想写这样的css:
.nav {height: 100px
}
.nav ul {
margin: 0
}
.nav ul li {
float: left
list-style: none
padding: 5px
}1234567891011
在sass里我们可以这样写
.nav{height:100px
ul{
margin:0
li {
float:left
list-style:none
padding:5px
}
}
}1234567891011
大家会发现,写出来的代码父和子之间都有空格隔开,如果我们需要给a加上伪类的话我们这样写
.nav{height:100px
a{
color:#fff
:hover{
color:#ff6600
}
}
}123456789
在里面就会出现这样的情况
.nav a :hover {color: #ff6600
}123
我们发现在a和:hover之间有了空格,这样是不好的,所以我们需要在写的时候在:hover之前把a加上,这样就需要用到在之类里引用父类选择器的方式,我们可以用&符号代替父类
例如:
.nav{height:100px
a{
color:#fff
&:hover{
color:#ff6600
}
}
}123456789
这样就好了,下面来个完整的代码:
.nav{height:100px
ul{
margin:0
li{
float:left
list-style:none
padding:5px
}
a{
display:block
color:#000
&:hover{
color:#f60
background:red
}
}
}
&&-text{
font-size:15px
}
}12345678910111213141516171819202122
-----》
.nav {height: 100px
}
.nav ul {
margin: 0
}
.nav ul li {
float: left
list-style: none
padding: 5px
}
.nav ul a {
display: block
color: #000
}
.nav ul a:hover {
color: #f60
background: red
}
.nav .nav-text {
font-size: 15px
}12345678910111213141516171819202122
嵌套属性
我们可以把一些个复合属性的子属性来嵌套编写,加快编写速度,例如
body{font:{
family:Helvitica
size:15px
weight:bold
}
}
.nav{
border:1px solid red{
left:none
right:none
}
}
.page-next{
transition:{
property:all
delay:2s
}
}12345678910111213141516171819
-----》
body {font-family: Helvitica
font-size: 15px
font-weight: bold
}
.nav {
border: 1px solid red
border-left: none
border-right: none
}
.page-next {
transition-property: all
transition-delay: 2s
}1234567891011121314
mixin 混合
你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字,类似于js里的函数定义方法如下
@mixin 名字(参数1,参数2...){...
}123
使用方法是在其他选择器css样式里通过@include引入,其实就相当于将mixin里的代码写入到这个选择器的css里,如下:
@mixin alert {color:#f60
background-color:#f60
a{
color:pink
}
&-a{
color:red
}
}
.alert-warning{
@include alert
}12345678910111213
-----》
.alert-warning {color: #f60
background-color: #f60
}
.alert-warning a {
color: pink
}
.alert-warning-a {
color: red
}12345678910
刚才是没有参数的mixin,mixin也可以拥有参数,需要注意的是:
形参的名字前要加$
传参的时候只写值的话要按顺序传
传参的时候不想按顺序的话需要加上形参名字
例如:
@mixin alert($color,$background) {color:$color
background-color:$background
a{
color:darken($color,10%)//把颜色加深百分之十
}
}
.alert-warning{
@include alert(red,blue)
}
.alert-info{
@include alert($background:red,$color:blue)
}12345678910111213
------》
.alert-warning {color: red
background-color: blue
}
.alert-warning a {
color: #cc0000
}
.alert-info {
color: blue
background-color: red
}
.alert-info a {
color: #0000cc
}1234567891011121314
继承拓展 extend
如果我们有一个选择器想要拥有另一个选择所有的东西,不管是样式还是子元素等等,可以使用@extend来继承
大家需要注意的是,++b继承a的时候,a的子元素设置了样式,也会给b的子元素设置样式++,达到完全一样的情况,例如:
.alert {padding:5px
}
.alert a {
font:{
weight:bold
size:15px
}
}
.alert-info {
@extend .alert
backgournd:skyblue
}12345678910111213
----》
.alert, .alert-info {padding: 5px
}
.alert a, .alert-info a {
font-weight: bold
font-size: 15px
}
.alert-info {
backgournd: skyblue
}12345678910
partials
在以前咱们编写css的时候,一个css引入另一个css需要使用@import,其实这是不好的,会多发一次http请求,影响咱们站点的响应速度。
在sass里,咱们可以把小的sass文件分出去,叫做partials,在某个sass里通过@import ‘partials名’去引入,注意路径哟,这样的话就可以把partials里的代码引到咱们大的sass里一起编译
需要注意的是 partials的文件名前要加_
_base.sass :
body{margin:0
padding:0
}1234
style.sass :
@import "base".alert {
padding:5px
}
.alert a {
font:{
weight:bold
size:15px
}
}
.alert-info {
@extend .alert
backgournd:skyblue
}1234567891011121314
----------->
body {margin: 0
padding: 0
}
.alert, .alert-info {
padding: 5px
}
.alert a, .alert-info a {
font-weight: bold
font-size: 15px
}
.alert-info {
backgournd: skyblue
}1234567891011121314
这样的话我们就可以把模块化的思想引入到sass里了
comment注释
sass里的注释有三种
多行注释
单行注释
强制注释
多行注释:压缩后不会出现在css里 /* /
单行注释: 不会出现在css里 //
强制注释:压缩后也会出现在css里 /! */
6、数据类型与函数
数据类型
在sass里有数字、字符串、列表、颜色等类型
在cmd里 输入
sass -i1就会进入到交互模式,输入的计算可以马上得到结果
type-of()可以用来得到数据类型,如:
type-of(5) ->number1注意数字类型的可以包含单位,如:
type-of(5px) ->number1字符串类型:
type-of(hello) ->stringtype-of('hello') ->string12
list类型:
type-of(1px solid red) ->listtype-of(5px 10px) ->list12
颜色:
type-of(red) ->colortype-of(rgb(255,0,0) ->color
type-of(#333) ->color123
number 计算
2+9 -》102*8 -》16
(8/2) ->4 //除法要写括号123
也可以包含单位
5px + 5px ->10px5px -2 ->3px
5px *2 ->10px
5px * 2px ->10px*px //这样就不对了哟
(10px/2px) ->5//除法单位取消
3+2*5px->13px123456
好吧,都是一些小学的数学题,很简单对吧
处理数字的函数
绝对值
abs(10) ->10abs(10px) ->10px
abs(-10px) ->10px123
四舍五入相关
round(3.4)->3 //四舍五入round(3.6)->4
ceil(3.2)->4 //向上取整
ceil(3.6)->4
floor(3.2)->3 //向下取整
floor(3.9)->3
percentage(600px/1000px) ->65% //百分之
min(1,2,3) ->1 //最小值
max(2,3,4,5) ->5 //最大值123456789
字符串相关
//带引号和不带引号的字符串想加为带引号的字符串"a" + b ->"ab"
a + "b" ->"ab"
//字符串+数字
"ab" + 1 ->"ab1"
//字符串 - 和 / 字符串
"a" - b ->"a-b"
"a" / b ->"a/b"
//注意字符串不能相乘123456789
字符串函数
大写:
$word:"hello"to-upper-case($word) ->"HELLO"12
小写:
$word:"Hello"to-lower-case($word) ->"hello"12
得到length:
$word:"Hello"str-length($word) ->512
得到字符串在字符串里的位置:
$word:"Hello"str-index($word,"el") ->212
字符串中插入字符串:
$word:"Hello"str-insert($word,"aa",2) ->"Haaello"12
颜色相关
在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL
分别表示的是 色相 0-360(deg) 饱和度 0-100% 明度 0-100%
例如:
body {background-color:hsl(0,100%,50%)
}
-》
body {
background-color: red
}1234567
body {
background-color:hsl(60,100%,50%)
}
-》
body {
background-color: yellow
}1234567
也可以有透明哟
body {background-color:hsl(60,100%,50%,0.5)
}
-》
body {
background-color: rgba(255,255,0,0.5)
}1234567
颜色函数
lighten函数和darken函数可以把颜色加深或减淡,即调整明度,第一个参数为颜色,第二个参数为百分比,例如:
$color:#ff0000$light-color:lighten($color,30%)
$dark-color:darken($color,30%)
.a{
color:$color
background:$light-color
border-color:$dark-color
}12345678
—》
.a {color: #ff0000
background: #ff9999
border-color: #660000
}12345
saturate和desaturate函数可以调整颜色的纯度
$color:hsl(0,50%,50%)$saturate-color:saturate($color,50%)
$desaturate-color:desaturate($color,30%)
.a{
color:$color
background:$saturate-color
border-color:$desaturate-color
}12345678
–》
.a {color: #bf4040
background: red
border-color: #996666
}12345
用transparentize来让颜色更透明
用opatify来让颜色更不透明
$color:rgba(255,0,0,0.5)$opacify-color:opacify($color,0.3)
$transparentize-color:transparentize($color,0.3)
.a{
color:$color
background:$opacify-color
border-color:$transparentize-color
}12345678
—》
.a {color: rgba(255, 0, 0, 0.5)
background: rgba(255, 0, 0, 0.8)
border-color: rgba(255, 0, 0, 0.2)
}12345
列表类型
在sass里,用空格或者逗号隔开的值就是列表类型
如:
1px solid redCourier,microsoft yahei12
列表函数
sass里的列表类似与数组
获取列表的长度length(5px 10x) 2
获取列表中的第几个元素
nth(5px 10px,2) 10px
获取一个元素在一个列表里的下标
index(1px solid red,solid) 2
给列表里加入新的元素
append(5px 10px,5px) 5px 10px 5px
连接两个列表
join(5px 10px,5px 0) 5px 10px 5px 012345678910
map类型
sass里的map类型类似与js里的object
$map:(key1:value1,key2:value2,key3:value3)1map 函数
//定义一个map$color:(light:#ffffff,dark:#000000)
//获取map 的length
length($color) ->2
//得到map里key对应的值
map-get($color,dark) ->#000000
获取map里的所有键的列表
map-keys($color) ->("light","dark") //列表类型
获取map里的所有值的列表
map-values($color) ->("#ffffff","#000000") //列表类型
判断map里是否含有这个key
map-has-key($color,light) ->true
给map里添加键值对
map-merge($color,(light-gray:#cccccc))
->(light:#ffffff,dark:#000000,light-gray:#cccccc)
移除map里的某个键值对
map-remove($colors,light) ->(dark:#000000,light-gray:#cccccc)1234567891011121314151617
boolean类型
在sass里通过><比较得到的值就是布尔值 true 和false
5px>3px ->true5px<2px ->false12
在sass里也可以有或 且 非
且:
(5px >3px) and (5px <2px) ->false(5px >3px) and (5px >2px) ->true12
或:
(5px >3px) or (5px <2px) ->true(5px <3px) and (5px >2px) ->false12
非:
not(5px>3px) ->false1interpolation
在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值,例如
$name:"info"$attr:"border"
.alert-#{$name}{
#{$attr}-color:red
}12345
---->
.alert-info {border-color: red
}123
7、分支结构、循环结构、函数
分支结构
在sass里,可以使用@if让我们根据一些条件来应用特定的样式
结构:
@if 条件 {
}123
如果条件为真的话,括号里的代码就会释放出来
例如:
$use-refixes:true.rounded{
@if $use-refixes {
-webkit-border-radius:5px
-moz-border-radius:5px
-ms-border-radius:5px
-o-border-radius:5px
}
border-radius:5px
}12345678910
—>
.rounded {-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
}1234567
如果是另外一种情况
$use-refixes:false1—》
.rounded {border-radius: 5px
}123
if else在sass里的写法是:
body{@if $theme == dark {
background:black
} @else if $theme == light {
background:white
} @else {
background:gray
}
}123456789
for循环
在sass里的for循环是这样的
@for $var form <开始值>through <结束值>{...
}123
还有一种是
@for $var form <开始值>to <结束值>{...
}123
注意,开始值和结束值的关系可以是升序也可以是倒序,但是每次只能+1或者-1
这两种有什么区别呢?
区别就是 from 1 to 4 的话是执行三次,i的变化是 1 2 3
from 1 through 4 的话是执行四次,i的变化是 1 2 3 4
如:
from to
$columns:4@for $i from 1 to $columns{
.col-#{$i}{
width:100% / $columns * $i
}
}123456
—》
.col-1 {width: 25%
}
.col-2 {
width: 50%
}
.col-3 {
width: 75%
}123456789
from through
$columns:4@for $i from 1 through $columns{
.col-#{$i}{
width:100% / $columns * $i
}
}123456
—>
.col-1 {width: 25%
}
.col-2 {
width: 50%
}
.col-3 {
width: 75%
}
.col-4 {
width: 100%
}123456789101112
each 遍历list类型
在sass里可以利用each方法来遍历咱们的list类型的数据
list类型在js里类似于数组,那么each类似于for in遍历,结构如下:
@each $item in $list{...
}123
例如:
$colors:success error warning$map:(success:green,warning:yellow,error:red)
@each $color in $colors{
.bg-#{$color}{
background:map-get($map,$color)
}
}1234567
—>
.bg-success {background: green
}
.bg-error {
background: red
}
.bg-warning {
background: yellow
}123456789
@while 循环
在sass里,拥有@while循环,比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行,每次变化都是1,while设置循环结构的话更为灵活;
结构:
@while 条件{
}123
eq:
$i:6@while $i>0{
.item-#{$i}{
width:$i*5px
}
$i:$i - 2
}1234567
注意:$i - 2 需要用空格隔开哟
---------》
.item-6 {width: 30px
}
.item-4 {
width: 20px
}
.item-2 {
width: 10px
}123456789
自定义函数
在sass里也可以定义函数,并且也可以有返回值
结构:
@function 名称 (参数1,参数2){@return ...
}123
例如,我们做一个返回map里key对应的值的函数:
$colors:(light:#ffffff,dark:#000000,gray:#555555)@function color($key){
@return map-get($colors,$key)
}
body{
background:color(light)
color:color(dark)
border-color:color(gray)
}123456789
—》
body {background: #ffffff
color: #000000
border-color: #555555
}
微信上男性健康调理不要轻信网上的,现实中尚且有很多骗人的
你说的如果是这个人taiji6610,那就是真的,看了7个医生,唯一一个可以实时视频的老国医先生
.
打开IDLE,就是在开始,所有程序,python2.7或者3.2,idle python GUI。如果不用自带的idle,也可以用其他的文本编辑器,或者直接用dos窗口。
python编程模块函数
先用第一个格式,import 模块\n模块 函数。那个\n就是换行的意思,在Ruby语言会经常用到的。在math模块之中导出floor函数。输入
import math
math.floor(39.9)
python编程模块函数
输入了两行的代码,然后按回车键之后,输出了39.0.将39.9后面的小数去掉了,并且还保留了一个小数位,而不是四舍五入。这时floor函数用法,需要用import来导入,而不能直接使用,现在,还可以用其他的导入方法。
from math impotr floor
结果一样是39.0.这两个导入方法都是一样的,form 模块 import 函数这种方法直接可以使用函数,而不需要再加模块名。导入别的模块试下,输入代码
按回车键,输出的结果为3.0.解释器依然将数值保留了一位的小数,sqrt函数也是在math模块之中,需要用import命令来进行导入,这个sqrt是用来求一个数的平方根的,9的平方根就是3了。