SASS学习
之前的ui使用less书写,但是到后面太过于复杂,所以打算换为sass
1、安装配置
"easysass.compileAfterSave": true,
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "css/"
2、语法介绍
1、注释
-
Sass 支持标准的 CSS 多行注释
/* */
,以及单行注释//
,前者会被完整输出到编译后的 CSS 文件中,而后者则不会 -
将
!
作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中,通常用于添加版权信息
// 我是只会在scss文件出现的注释
/*
我是会在css文件中出现的注释
*/
/*!
我是的会在压缩文件中出现的注释
*/
*,
*:before,
*:after {
box-sizing: inherit;
}
2、变量
变量是由作用域的,跨作用域需要使用!global
$color: #ff9400;
body{
background-color: $color;
}
3、数据类型
为了严谨和不出现奇怪的问题,使用的时候尽量符合定义规范
- 数字,
1, 2, 13, 10px
(单位会和数字当成一个整体) - 字符串,有引号字符串与无引号字符串,
"foo", 'bar'
- 颜色,
blue, #04a3f9, rgba(255,0,0,0.5), rgba(#04a3f9,0.5)
- 布尔型,
true, false
- 空值,
null
- 数组 (list),用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
判断数据类型的方式:type-of($value)
4、运算
4.1、数字运算符
-
- 纯数字:结果为数字
- 一方带单位:结果带单位
- 都带单位:结果带单位
-
- 纯数字:结果为数字
- 一方带单位:结果带单位
- 都带单位:结果带单位
-
- 纯数字:结果为数字
- 一方带单位:结果带单位
- 都带单位:编译报错!
- /:不会四舍五入,精确到小数点后5位
- 纯数字:结果为数字
- 一方带单位:结果带单位
- 都带单位:结果带单位
- %
- 值与"%"之间必须要有空格,否则会被看做字符串
4.2、关系运算符
- >
- <
- >=
- <=
4.3、相等运算符
- ==
- !=
前部分为不带引号数字时,对比的仅仅是数字部分;反之,忽略引号,要求字符一一对应
5、嵌套
div{
span{
color: #333;
}
a{
color: blue;
}
}
6、插值语法
$color: red;
$attr: border;
p.#{$color} {
#{$attr}-color: $color;
}
7、默认值
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
8、@指令
8.1、@import
文件的拓展名是 .scss
或 .sass
@import "foo.scss";
@import "foo";
8.2、@extend
.red{
color: red;
}
.bgblue{
@extend .red;
background-color: blue;
}
9、三目运算符
if(expression, value1, value2)
p { color: if(1 + 1 = 2, green, yellow);}
10、if
p { @if 1 + 1 == 2 { color: red; }}// compile:p { color: red;}
p { @if 1 + 1 != 2 { color: red; } @else { color: blue; }}// compile:p { color: blue;}
$age: 19;p { @if $age == 18 { color: red; } @else if $age == 19 { color: blue; } @else { color: green; }}// compile:p { color: blue;}
11、for
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}// compile:.item-1 { width: 2em;}.item-2 { width: 4em;}.item-3 { width: 6em;}
@for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; }}// compile:.item-1 { width: 2em;}.item-2 { width: 4em;}
12、while
$i: 6;@while $i>0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}// compile:.item-6 { width: 12em;}.item-4 { width: 8em;}.item-2 { width: 4em;}
13、each
$animals:puma,sea-slug,egret,salamander;@each $animal in $animals { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}// compile:.puma-icon { background-image: url("/images/puma.png");}.sea-slug-icon { background-image: url("/images/sea-slug.png");}.egret-icon { background-image: url("/images/egret.png");}.salamander-icon { background-image: url("/images/salamander.png");}
$lists: (puma, black, default), (sea-slug, blue, pointer), (egret, white, move);@each $animal,$color,$cursor in $lists { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; }}// compile:.puma-icon { background-image: url("/images/puma.png"); border: 2px solid black; cursor: default;}.sea-slug-icon { background-image: url("/images/sea-slug.png"); border: 2px solid blue; cursor: pointer;}.egret-icon { background-image: url("/images/egret.png"); border: 2px solid white; cursor: move;}
$h:(h1: 2em, h2: 1.5em, h3: 1.2em);@each $header,$size in $h { #{$header} { font-size: $size; }}// compile:h1 { font-size: 2em;}h2 { font-size: 1.5em;}h3 { font-size: 1.2em;}
14、混合
14.1、基础混合
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}p { @include large-text;}
14.2、参数
位置传参
@mixin mp($width) { margin: $width;}body { @include mp(300px);}
变量传参
@mixin mp($width) { margin: $width;}body { @include mp($width: 300px);}
默认值
@mixin mp($width: 500px) { margin: $width;}body { @include mp($width: 300px); // or @include mp(300px); @include mp();}
不定参数
@mixin mar($value...) { margin: $value;}body { @include mar(1px,2px,3px,4px);}
混合样式中导入内容
@mixin example { html { @content; }}@include example { background-color: red; .logo { width: 600px; }}// compile:html { background-color: red;}html .logo { width: 600px;}
15、函数指令
15.1、字符串函数
函数名和参数类型 | 函数作用 |
---|---|
to-lower-case($string) | 变为小写 |
to-upper-case($string) | 变为大写 |
str-length($string) | 返回$string的长度(汉字算一个) |
str-insert($string, $insert, $index) | 在 s t r i n g 的 string的 string的index处插入$insert |
str-slice($string, $start-at, $end-at) | 截取 s t r i n g 的 string的 string的start-at和$end-at之间的字符串 |
15.2、数字函数
函数名和参数类型 | 函数作用 |
---|---|
percentage($number) | 转换为百分比形式 |
round($number) | 四舍五入为整数 |
ceil($number) | 数值向上取整 |
floor($number) | 数值向下取整 |
abs($number) | 获取绝对值 |
min($number…) | 获取最小值 |
max($number…) | 获取最大值 |
random($number?:number) | 不传入值:获得0-1的随机数;传入正整数n:获得0-n的随机整数(左开右闭) |
15.3、数组函数
函数名和参数类型 | 函数作用 |
---|---|
length($list) | 获取数组长度 |
nth($list, n) | 获取指定下标的元素 |
15.4、映射函数
函数名和参数类型 | 函数作用 |
---|---|
map-get($map, $key) | 获取 m a p 中 map中 map中key对应的$value |
map-merge($map1, $map2) | 合并 m a p 1 和 map1和 map1和map2,返回一个新$map |
map-remove($map, $key) | 从 m a p 中 删 除 map中删除 map中删除key,返回一个新$map |
map-keys($map) | 返回 m a p 所 有 的 map所有的 map所有的key |
map-values($map) | 返回 m a p 所 有 的 map所有的 map所有的value |
map-has-key($map, $key) | 判断 m a p 中 是 否 存 在 map中是否存在 map中是否存在key,返回对应的布尔值 |
15.5、颜色函数
函数名和参数类型 | 函数作用 |
---|---|
rgb($red, $green, $blue) | 返回一个16进制颜色值 |
rgba( r e d , red, red,green, b l u e , blue, blue,alpha) | 返回一个rgba; r e d , red, red,green和$blue可被当作一个整体以颜色单词、hsl、rgb或16进制形式传入 |
red($color) | 从$color中获取其中红色值 |
green($color) | 从$color中获取其中绿色值 |
blue($color) | 从$color中获取其中蓝色值 |
mix( c o l o r 1 , color1, color1,color2,$weight?) | 按照 w e i g h t 比 例 , 将 weight比例,将 weight比例,将color1和$color2混合为一个新颜色 |
alpha( c o l o r ) / o p a c i t y ( color)/opacity( color)/opacity(color) | 获取颜色透明度值 |
---|---|
rgba( c o l o r , color, color,alpha) | 改变颜色的透明度 |
opacify($color, a m o u n t ) / f a d e − i n ( amount) / fade-in( amount)/fade−in(color, $amount) | 使颜色更不透明 |
transparentize($color, a m o u n t ) / f a d e − o u t ( amount) / fade-out( amount)/fade−out(color, $amount) | 使颜色更加透明 |
15.6、内省函数
函数名和参数类型 | 函数作用 |
---|---|
type-of($value) | 返回$value的类型 |
unit($number) | 返回$number的单位 |
unitless($number) | 判断$number是否带单位,返回对应的布尔值 |
comparable($number1, $number2) | 判断 n u m b e r 1 和 number1和 number1和number2是否可以做加、减和合并,返回对应的布尔值 |
16、自定义函数
@function f($params...) { @return nth($params, 2);}p { height: f(1px,2px);}// compiled:p { height: 2px;}