一、sass 安装
sass 的安装依赖ruby 包管理工具，安装sass之前，应先安装ruby
1、ruby 安装
windows 下官网下载地址https://rubyinstaller.org/downloads/
安装完成后 查看版本 ruby -v
2、sass 安装
使用ruby 的包管理工具安装 gem install sass
查看sass 版本 sass -v
二、sass 编译
1、sass 的文件扩展名
.sass 和 .scss 两种，sass文件为sass最开始使用的缩进式语法，在sass3.0版本中的新的语法为sass css 文件扩展名为.scss 这种方式更接近于css
2、命令编译
sass sass/style.scss:css:/style.css
sass [.scss文件]:[编译后css输出文件]
3、添加监听器监听scss文件变化自动编译
sass --watch [scss文件目录]:[css输出目录]
sass --watch [scss文件目录]:[css输出目录] --style 输出格式
sass -i 进入sass的一个命令行交互模式
4、编译输出格式
编译输出有4中格式
-
nested 嵌套 【默认编译输出格式】
-
compact 紧凑
-
expanded 扩展
-
compressed 压缩
ul { font-size: 15px; li { list-style:none; } } ==》 嵌套 ul { font-size: 15px; } ul li { list-style: none; } 紧凑 ul { font-size: 15px; } ul li { list-style: none; } 扩展 ul { font-size: 15px; } ul li { list-style: none; } 压缩 ul{font-size:15px}ul li{list-style:none}
三、sass 使用
1、变量的使用
关键字符’$’, 变量名称可以使用下划线’_ ‘中杠’-'连字符, 变量可以嵌套使用
$custom-font-size: 15px;
$custom-border: 1px solid $custom-font-size;
ul {
font-size: $custom-font-size;
li {
border: 1px solid $custom-border;
list-style:none;
}
}
Interpolation 取值
$version:"0.0.1";
/* 项目版本#{$version}*/
$name:"info";
.alert-#{$name} {
#{$name}-color:#eee;
}
2、嵌套
Nesting
-
可以使用嵌套的写法简化 scss样式编写
源文件scss 编译后css ul {
font-size: 15px;
li {
list-style:none;
}
}ul {
font-size: 15px;
}
ul li {
list-style: none;
} -
嵌套时调用父选择器&
引用父选择器 关键字符 ‘&’，&代表父选择器，多次调用父选择器简化写法
| 源文件scss | 编译后css |
|---|---|
| ul { font-size: $custom-font-size; a { display:block; color: #000; padding:5px; &:hover { background-color:none; } } & &-text { color: #000; } } | ul { font-size: 15px; } ul a { display: block; color: #000; padding: 5px; } ul a:hover { background-color: none; } ul ul-text { color: #000; } |
-
嵌套属性｛｝
scss改写 scss 改写后 body {
font-family: ‘Open Sans’;
font-size: 14px;
font-weight: bold;
font-style: normal;
}body {
font: {
family: ‘Open Sans’;
size: 14px;
weight: bold;
style: normal;
}
}可以将一组属性用｛｝包起来
3、混合-Mixins
用于使用变量名字 定义引用的样式，使用时直接导入名称
定义
@Mixins 名字(参数1, 参数2...) {
...
}
使用
@include 名字
| 源scss | 编译后css |
|---|---|
| @mixin alert { color: #fff; background-color: #000; a { color: #fff; } } .alert-warning { @include alert; } | .alert-warning { color: #fff; background-color: #000; } .alert-warning a { color: #fff; } |
添加参数写法
| 源scss | css |
|---|---|
| @mixin alert($alert-color, $alert-bg-color){ color: $alert-color; background-color: KaTeX parse error: Expected '}', got 'EOF' at end of input: … color: darken(alert-color, 10%); } } .alert-warning { @include alert(#fff, #000); } .alert-warning { @include alert($alert-bg-color:#fff, $alert-color:#000); } | .alert-warning { color: #fff; background-color: #000; } .alert-warning a { color: #e6e6e6; } |
使用变量的方式定义颜色传参，darken 为sass的颜色函数，darken() 函数会让颜色变得更暗10%返回新颜色
同样的函数有：lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和invert()
冒号表示当前元素本身的属性 空格表示当前元素的下一级元素（子元素）
| element,element | div,p | 选择所有
元素和所有
元素。 |
|---|---|---|
| element element | div p | 选择
元素内部的所有
元素。 |
| element>element | div>p | 选择父元素为
元素的所有
元素。 |
| element+element | div+p | 选择紧接在
元素之后的所有
元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
4、Partails 与 @import
Partails 的文件是以下划线_开头：__bootstrap-variables.scss
其他scss 文件引入Prartail ,将scss查分为多个小部分 ，每个partail 就是个scss文件
使用@import 导入 @import __bootstrap-variables.scss
5.sass中注释
三种注释：单行注释和多行注释、强制注释
单行注释不会出现在编译之后的css文件中
// one row 不会出现在css中
/*
multiple rows 而在压缩类型的css中会去掉
*/
/*！ force multiple rows 一直出现在css文件中*/
.alert-warning {
@include alert($alert-bg-color:#fff, $alert-color:#000);
}
6、数据类型
number/list/color/string
测试 sass -i 在交互模式下
type-of()
>> type-of(5)
"number"
>> type-of(5px)
"number"
>> type-of(xiaoxi)
"string"
>> type-of('xiaoxi')
"string"
>> type-of(1px solid #000) 这种类型中间用空格隔开
"list"
>> type-of(#fff)
"color"
数字类型 数学运算
注意括号()
>> 2 + 2
4
>> 2 * 2
4
>> (8 / 2 )
4
>> (8px / 2 )
4px
>> (8px - 2 )
6px
>> (8px - 2px )
6px
>> (8px * 2px )
16px*px
>> (8px * 2 )
16px
>> (8px / 2px )
4
>> (8px / 2 )
4px
>> 3 + 2 * 4px
11px
>> (3 + 2) * 4px
20px
数字函数
abs()绝对值round()4舍5入 ceil()向上取整 floor() 向下取整 percentage() 百分比 min()最小值 max() 最大值
10px
>> abs(-10px)
10px
>> abs(-10.2px)
10.2px
>> round(3.5)
4
>> round(3)
3
>> round(3.2)
3
>> ceil(3.2)
4
>> floor(3.8)
3
>> percentage(650 / 1000)
65%
>> percentage(650px / 1000px)
65%
7、字符串
字符串连接
字符串连接注意 引号 带引号与不带引号，带引号的字符串中间可以加空格
>> "xiao" + xi
"xiaoxi"
>> xiao + xi
"xiaoxi"
>> xiao + "xi"
"xiaoxi"
>> xiao - xi
"xiao-xi"
函数
to-upper-case() 将字符串转大写to-lower-case() 将字符串转小写
str-length() 取长度 str-index() 获取位置 str-instert()向指定位置插入字符
8、颜色
颜色表色:
颜色单词 、RGB(255,0,0)->red green blue 、16进制 #fff #000、hsl(色相, 饱和度%, 明度%)
颜色函数
- rgb(红,绿,蓝) 与rgba(红,绿,蓝,透明度)
- hsl(色相, 饱和度%, 明度%) 与hsl(色相, 饱和度%, 明度%,不透明度[0-1])
- adjust-hue(颜色，123deg) degrade降低
- lighten(颜色，20%) 增加颜色明度20% 与darken(颜色，20%) j降低颜色明度20%
- saturate(颜色，20%) 增加颜色饱和度20% 与desaturate(颜色，20%) j降低颜色饱和度20%
- opacify(颜色，0~1) 增加颜色不透明度20% 与transparentize(颜色，0~1) j降低颜色不透明度20%
- rotate()函数能够旋转元素，它主要是在二维空间内进行操作，通过一个角度参数值，来设定旋转的幅度。rotate(-45deg) 角度值deg，弧度值rad，梯度gard，转/圈turn
- rotate3d()函数可以实现一个3维空间内的旋
9、列表
list
列表表示属性的一串值使用逗号/空格、括号分隔
border: 1px solid #fff 空格
font-family: Courier, "lucida console", monspace 逗号
padding: 5px 10px, 5px 0 两个列表使用逗号分隔
padding: (5px 10px)(5px 0) 两个列表使用逗号分隔
函数 length() 列表长度
nth(list,index) 获取列表指定index的项
index(list,项) 获取项在列表中的位置
append(list, 项) 向列表添加项
join(list1,list2,分隔符[comma逗号]) 列表拼接使用指定分隔符
map
定义 $map:(key1:value2,key2:value2)
$colors:(light:#ffffff,dark:#000000)
函数 length() ; map-get(map,dark) 取map指定的key值
map-keys(map) 获取map的所有key
map-values(map) 获取map的所有value
map-has-key(map, lightkey) 判断map中是否包含指定key
map-merge(map1,map2) 将2个map合并返回新map
map-remove(map,key1,key2…) 移除map中指定的key,可以移除多个
10、布尔值
逻辑运算 >, < ,and ,() ,not
11、控制指令 control directives
-
@if @else @else if
@if 条件{...} $show: true; .rounded { @if $show { font-size: 15px; } @else { font-size: 10px; } color: red; @if $show { font-size: 15px; } @else if $show == true { padding:5px 0 } } -
@for
@for $var from <开始值> to[不包含结束值]/through[包含结束值] <结束值> {} $columns:4 @for $i from to/through $columns { .col-#{$i}{ width: 100%/ $columns * $i } } -
@each
@each $var in $List {} $icons: success error warning @each $icon in $icons { .icon-#{$icon} { background-color:$icon; } } -
@while
@while 条件 {} $i: 6; @while $i >0 { .item-#{$i} { width: 5px * $i; } $i = $i -2; }
12、自定义函数及错误警告
@function 名称(参数1,参数2) {}
$colors:(ligth:#fff,dark: #000)
@function color($key) {
@if not map-has-key($colors,$key) {
@warn "在 $color 中没有找到#{$key}这个key"
@error "在 $color 中没有找到#{$key}这个key"
}
@return map-get($colors, $key);
}
body {
background-color:color(light)
}
13、警告与错误
@function 名称(参数1,参数2) {}
$colors:(ligth:#fff,dark: #000)
@function color($key) {
@return map-get($colors, $key);
}
body {
background-color:color(light)
}
14、css3 规则
@keyframes animationname {keyframes-selector {css-styles;}}
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite[无限的];
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
