北京营销网站建设,昆山网站建设培训,企业网站建设空间,企石镇网站仿做把每个点最简单的部分记录一下#xff0c;方便自己查找
官方文档链接 Sass 笔记 1. 父选择器#xff0c;编译后为父选择器2. : 嵌套属性3. $ 变量3.1 数据类型3.2 变量赋值3.3. 数组3.4. map 4. 算数运算符5. #{}插值语法5.1 可以在选择器或属性名中使用变量5.2 将有引…把每个点最简单的部分记录一下方便自己查找
官方文档链接 Sass 笔记 1. 父选择器编译后为父选择器2. : 嵌套属性3. $ 变量3.1 数据类型3.2 变量赋值3.3. 数组3.4. map 4. 算数运算符5. #{}插值语法5.1 可以在选择器或属性名中使用变量5.2 将有引号的字符串编译为无引号 6. import7. media8. extend : 延申感觉像继承9. 控制指令9.1 if else if else9.2 for9.3 each9.3.1 遍历一维数组9.3.2 遍历mapkey : value9.3.3 遍历二维数组 9.4 while 10 mixin 混合指令10.1 定义样式并引用10.2 带参数的混合并且有默认值 11. function 函数指令 return 返回 1. 父选择器编译后为父选择器
a {font-weight: bold;text-decoration: none;:hover { text-decoration: underline; }body.firefox { font-weight: normal; }
}编译为
a {font-weight: bold;text-decoration: none; }a:hover {text-decoration: underline; }body.firefox a {font-weight: normal; }2. : 嵌套属性
.funky {font: 20px/24px {family: fantasy;weight: bold;}
}编译为
.funky {font: 20px/24px;font-family: fantasy;font-weight: bold; }3. $ 变量
#main {$width: 5em !global; // !global声明为全局变量可在作用域外使用width: $width;
}
#sidebar {width: $width;
}编译为
#main {width: 5em;
}
#sidebar {width: 5em;
}3.1 数据类型
数字1, 2, 13, 10px字符串有引号字符串与无引号字符串foo, bar, baz颜色blue, #04a3f9, rgba(255,0,0,0.5)布尔型true, false空值null数组 (list)用空格或逗号作分隔符1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object(key1: value1, key2: value2)
3.2 变量赋值
$i: 6;
$i: $i - 2;
$name: jack;3.3. 数组
数组之间的元素可以用,隔开也可以不用
margin: 10px 15px 0 0
font-face: Helvetica, Arial, sans-serifnth 函数可以直接访问数组中的某一项 join 函数可以将多个数组连接在一起 append 函数可以在数组中添加新值 each 指令能够遍历数组中的每一项。
3.4. map
(key1 : value1,key2 : value2)
4. 算数运算符 - * / !/有两个作用除法分隔数字具体怎么用看文档也用作字符串连接计算结果以左侧的字符串为准
左侧右侧连接后有引号有引号有引号无引号无引号无引号有引号无引号有引号无引号有引号无引号
5. #{}插值语法
5.1 可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}编译为
p.foo {border-color: blue; }5.2 将有引号的字符串编译为无引号
mixin firefox-message($selector) {body.firefox #{$selector}:before {content: Hi, Firefox users!;}
}
include firefox-message(.header);编译为
body.firefox .header:before {content: Hi, Firefox users!; }6. import
导入的是scss文件可以只写文件名import ‘foo’在vue中使用一般情况import url(../xxxx/xxx.css)可以在嵌套进css中使用这样引入的内容就只能在引入的局部使用
7. media
8. extend : 延申感觉像继承
属性重复谁在后面执行谁有优先权
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {extend .error;border-width: 3px;
}编译后
.error .seriousError{border: 1px #f00;background-color: #fdd;
}
.seriousError {border-width: 3px;
}9. 控制指令
9.1 if else if else
$type: monster;
p {if $type ocean {color: blue;} else if $type matador {color: red;} else if $type monster {color: green;} else {color: black;}
}编译后
p{color: green
}9.2 for
for $var from start through end 包含start和end的值 for $var from start to end 不包含start的值包含end的值
for $i from 1through 3 {.item-#{$i} { width : 2em * $i }
}编译后
.item-1 { width: 2em }
.item-2 { width: 4em }
.itme-3 { width: 6em }9.3 each
each $var in list list可以是一连串的字符串、数组、map
9.3.1 遍历一维数组
each $animal in puma, sea-slug, etret, salamander {.#{$animal}-icon{background-image: url(/images/#{$animal}.png);}
}编译后
.puma-icon { background-image: url(/images/puma.png); }
.sea-slug-icon { background-image: url(/images/sea-slug-icon.png); }
.etret-icon { background-image: url(/images/etret.png); }
.salamander-icon { background-image: url(/images/salamander.png); }9.3.2 遍历mapkey : value
each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {font-size: $size;}
}编译后
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }9.3.3 遍历二维数组
each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {.#{$animal}-icon {background-image: url(/images/#{$animal}.png);border: 2px solid $color;cursor: $cursor;}
}编译后
.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; }9.4 while
$i: 6;
while $i 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}编译后
.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }10 mixin 混合指令
mixin 像定义只是存放数据的函数但是必须用include调用
10.1 定义样式并引用
定义font使用了嵌套属性
mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;
}在语句内引用
.page-title {include large-text;.padding: 4px;margin-top: 10px;
}编译后
.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px; }如果在最外层调用没有其他语句包裹
mixin silly-links {a {color: blue;background-color: red;}
}
include silly-links;编译后 a {color: blue;background-color: red;}10.2 带参数的混合并且有默认值
mixin sexy-border($color, $width: 1in) {border: {color: $color;width: $width;style: dashed;}
}p { include sexy-border(blue); }
或者
p { include sexy-border($color: blue); }编译后
p{border-color: blue;border-width: 1in;border-style: dashed;
}11. function 函数指令 return 返回
$grid-width: 40px;
$gutter-width: 10px;function grid-width($n) {return $n * $grid-width ($n - 1) * $gutter-width;
}#sidebar { width: grid-width(5); }编译为
#sidebar {width: 240px; }
