Sass了解

作者: 平安喜乐698 | 来源:发表于2020-03-02 22:41 被阅读0次

目录
  1. 变量 (可以实现 通用样式复用)
  2. 嵌套
  3. @mixin 与 @include  混入
  4.  @extend 继承
  5.  内置函数

Sass（Syntactically Awesome Stylesheets）
最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
浏览器并不支持 Sass 代码。因此，需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

前言：Sass的作用（为什么产生Sass）

CSS 无法实现复用，不方便维护（例如：对于通用样式，需要变动时得一个一个找出来并修改）。

Sass 引入样式复用机制，并对CSS进行了扩展（增加了 变量、嵌套、混入、继承、内置函数等特性）。

Sass安装

安装
npm install -g sass

查看版本
sass --version

将scss文件转换为css文件
sass a.scss test.css

例（Sass 文件后缀为 .scss）

======================= scss
/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}
======================= css
@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

/*# sourceMappingURL=test.css.map */

1. 语法

变量 (可以实现通用样式复用)

$variablename: value;

Sass变量的作用域
    只能在当前的层级上有效果(在某个花括号内部改变后，仅在该花括号内该处以下生效)
    !global关键词可以将变量设置为全局（一般定义所有的全局变量在同一个文件_globals.scss，使用 @include包含该文件）

Sass变量可以存储
    1. 字符串
    2. 数字
    3. 颜色值
    4. 布尔值
    5. 列表
    6. null 值

例1

======================= scss
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}
======================= css
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

/*# sourceMappingURL=test.css.map */

例2（作用域）

======================= scss
$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}
======================= css
h1 {
  color: green;
}

p {
  color: red;
}

/*# sourceMappingURL=test.css.map */

例3 （!global）

======================= scss
$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}
======================= css
h1 {
  color: green;
}

p {
  color: green;
}

/*# sourceMappingURL=test.css.map */

嵌套规则

类似于html的
<a>
  <p></p>
</a>
嵌套

嵌套属性

很多CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight
SCSS可以这样写
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

例1

======================= scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
======================= css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/*# sourceMappingURL=test.css.map */

例2（嵌套属性）

======================= scss
p{
    font: {
      family: Helvetica, sans-serif;
      size: 18px;
      weight: bold;
    }

    text: {
      align: center;
      transform: lowercase;
      overflow: hidden;
    }
}
======================= css
p {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-transform: lowercase;
  text-overflow: hidden;
}

/*# sourceMappingURL=test.css.map */

@import 导入文件

@import filename;    
Sass的@import指令会将文件包含在 CSS 中，不需要额外的 HTTP 请求。


通常需要创建以下几个文件
  1. 颜色文件（存放 通用的颜色）
  2. 字体文件（存放 通用的字体）
  3. 间距文件（存放 通用的间距）
  4. 全局变量文件
  
如果不希望将一个 Sass 的代码文件编译到一个 CSS 文件，可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。但是，在导入该文件时不需要添加下划线。(此处有疑问)

注意：
  1. 包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。
  2. 不要将带下划线与不带下划线的同名文件放置在同一个目录下，会忽略带下划线的文件

例1

======================= scss （reset.scss文件）
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
======================= scss （test.scss文件）
@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
======================= css
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

/*# sourceMappingURL=test.css.map */

@mixin 与 @include

@mixin 指令定义一个混入（可以在整个样式表中重复使用的样式）。
@include 指令引入混入。


@mixin mixin-name { 
  property: value; 
  property: value; 
  ... 
} 
selector {
  @include mixin-name;
}

注意：
  1. Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
  2. 混入中也可以包含混入

例1

======================= scss
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
.danger {
  @include important-text;
  background-color: green;
}
======================= css
.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

/*# sourceMappingURL=test.css.map */

例2（向混入传递变量）

======================= scss
/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}
======================= css
@charset "UTF-8";
/* 混入接收两个参数 */
.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

/*# sourceMappingURL=test.css.map */

例3（混入传递变量，并设置默认值）

======================= scss
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
======================= css
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

/*# sourceMappingURL=test.css.map */

例4（混入传递变量，参数个数可变）

======================= scss
@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
======================= css
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

/*# sourceMappingURL=test.css.map */

例5（浏览器前缀使用混入）

======================= scss
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}
======================= css
.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

/*# sourceMappingURL=test.css.map */

@extend 继承

@extend 父样式;

例1

======================= scss
.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}
======================= css
.button-basic, .button-submit, .button-report {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  background-color: red;
}

.button-submit {
  background-color: green;
  color: white;
}

/*# sourceMappingURL=test.css.map */

内置函数

字符串函数	说明	举例
quote(string)	给字符串添加引号	quote(cx) 结果: "cx"
str-index(string, substring)	返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。	str-index(abcd, a) 结果： 1 （注意：Sass 字符串的起始索引值从 1 开始）
str-insert(string, insertStr, index)	在字符串 string 中 index 位置插入 insertStr	str-insert("Hello world!", " cx", 6) 结果: "Hello cx world!"
str-length(string)	返回字符串的长度	str-length("cx") 结果: 2
str-slice(string, start, end)	从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾。	str-slice("abcd", 2) 结果 "bcd" str-slice("abcd", 2, -2) 结果 "bc"
to-lower-case(string)	将字符串转成大写	to-upper-case("cx") 结果: "CX"
unique-id()	返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
unique-id() 结果: uad053b1c
unquote(string)	移除字符串的引号	unquote("cx") 结果: cx

数字函数	说明	举例
abs(number)	返回一个数值的绝对值	abs(-15) 结果: 15
ceil(number)	向上取整	ceil(15.20) 结果: 16
comparable(num1, num2)	返回一个布尔值，判断 num1 与 num2 是否可以进行比较	comparable(35px, 2em) 结果: false comparable(20mm, 1cm) 结果: true
floor(number)	向下取整	floor(15.80) 结果: 15
max(number...)	返回最大值	max(5, 7, 9, 0, -3, -7) 结果: 9
min(number...)	返回最大值	min(5, 7, 9, 0, -3, -7) 结果: -7
percentage(number)	将数字转化为百分比的表达形式	percentage(1.2) 结果: 120
random()	返回 0-1 区间内的小数	random() 结果: 0.65673
random(number)	返回 1 至 number 之间的整数，包括 1 和 limit。	random(6) 结果: 4
round(number)	返回最接近该数的一个整数，四舍五入	round(15.20) 结果: 15

列表(List)函数	说明	举例
Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。	列表的起始索引值为 1
append(list, value, [separator])	将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。	append((a b c), (d), comma) 结果: a, b, c, d
index(list, value)	返回元素 value 在列表中的索引位置，找不到返回null。	index(a b c, b) 结果: 2
is-bracketed(list)	判断列表中是否有中括号	is-bracketed([a b c]) 结果: true
join(list1, list2, [separator, bracketed])	合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。	join(a b c, d e f) 结果: a b c d e f join((a b c), (d e f), comma) 结果: a, b, c, d, e, f join(a b c, d e f, $bracketed: true) 结果: [a b c d e f]
length(list)	返回列表的长度	length(a b c) 结果: 3
list-separator(list)	返回一列表的分隔符类型。可以是空格或逗号。	list-separator(a b c) 结果: "space"
nth(list, n)	获取第 n 项的值。	nth(a b c, 3) 结果: c
set-nth(list, n, value)	设置列表第 n 项的值为 value。	set-nth(a b c, 2, x) 结果: a x c
zip(lists)	将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。	zip(1px 2px 3px, solid dashed dotted, red green blue) 结果: 1px solid red, 2px dashed green, 3px dotted blue

Map(映射)函数	说明	举例
Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。
map-get(map, key)	返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。	$font-sizes:("small": 12px, "normal": 18px, "large": 24px) map-get($ font-sizes, "small") 结果: 12px
map-has-key(map, key)	判断 map 是否有对应的 key，存在返回 true，否则返回 false。	$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-has-key($ font-sizes, "big") 结果: false
map-keys(map)	返回 map 中所有的 key 组成的队列。	$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)map-keys($ font-sizes) 结果: "small", "normal, "large"
map-merge(map1, map2)	合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部	$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)$ font-sizes2: ("x-large": 30px, "xx-large": 36px) map-merge( $font-sizes,$ font-sizes2) 结果: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
map-remove(map, keys...)	移除 map 中的 keys，多个 key 使用逗号隔开。	$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-remove($ font-sizes, "small") 结果: ("normal": 18px, "large": 24px)
map-values(map)	返回 map 中所有的 value 并生成一个队列。	$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-values($ font-sizes) 结果: 12px, 18px, 24px

选择器函数	说明	举例
is-superselector(super, sub)	比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false。	is-superselector("div", "div.myInput") 结果: true
selector-append(selectors)	将第二个 (也可以有多个) 添加到第一个选择器的后面。 selector.	selector-append("div", ".myInput") 结果: div.myInput
selector-extend(selector, extendee, extender)
selector-nest(selectors)	返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。	selector-nest("ul", "li") 结果: ul li
selector-parse(selector)	将字符串的选择符 selector 转换成选择器队列。	selector-parse("h1 .myInput .warning") 结果: ('h1' '.myInput' '.warning')
selector-unify(selector1, selector2)	将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值。	selector-unify("myInput", ".disabled") 结果: myInput.disabled
simple-selectors(selectors)	将合成选择器拆为单个选择器。	simple-selectors("div.myInput") 结果: div, .myInput

颜色函数	说明	举例
rgb(red, green, blue)	创建一个 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示红色，而 G 是 "green" 绿色，B 是 "blue" 蓝色。	rgb(0, 0, 255);
rgba(red, green, blue, alpha)	根据红、绿、蓝和透明度值创建一个颜色。	rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness)	通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。	hsl(120, 100%, 50%); // 绿色
hsla(hue, saturation, lightness, alpha)	通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。	hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
grayscale(color)	将一个颜色变成灰色，相当于 desaturate( color,100%)。	grayscale(#7fffd4);结果: #c6c6c6
complement(color)	返回一个补充色，相当于adjust-hue($color,180deg)	complement(#7fffd4); 结果: #ff7faa
invert(color, weight)	返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。	invert(white); 结果: black
red(color)	从一个颜色中获取其中红色值（0-255）。	red(#7fffd4); 结果: 127
green(color)	从一个颜色中获取其中绿色值（0-255）。	green(#7fffd4); 结果: 255
blue(color)	从一个颜色中获取其中蓝色值（0-255）。	blue(#7fffd4); 结果: 212
hue(color)	获取一个颜色的饱和度值(0% - 100%)。	saturation(#7fffd4); 结果: 100%
lightness(color)	获取一个颜色的亮度值(0% - 100%)。	lightness(#7fffd4); 结果: 74.9%
alpha(color)	透明度（0-1）	alpha(#7fffd4); 结果: 1
opacity(color)	获取颜色透明度值(0-1)。	opacity(rgba(127, 255, 212, 0.5); 结果: 0.5
mix(color1, color2, weight)	把两种颜色混合起来。 weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
adjust-hue(color, degrees)	通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。	adjust-hue(#7fffd4, 80deg); 结果: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)	这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。	adjust-color(#7fffd4, blue: 25);
change-color(color, red, green, blue, hue, saturation, lightness, alpha)	跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。	change-color(#7fffd4, red: 255); 结果: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha)	另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。	举个例子，一个颜色的亮度 lightness 取值在 0% ~ 100% 之间，假如执行 scale-color( $color,$ lightness: 40%)，表明该颜色的亮度将有 (100 - 原始值) × 40% 的增幅。另一个例子，执行 scale-color( $color,$ lightness: -40%)，表明这个颜色的亮度将减少 (原始值 - 0) × 40% 这么多的值。所有传参的取值范围都在 0% ~ 100% 之间，并且 RGB 同 HSL 的传参不能冲突。scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%) scale-color(rgb(200, 150, 170),$ green: -40%, $blue: 70%) => rgb(200, 90, 229) scale-color(hsl(200, 70%, 80%),$ saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha)	根据红、绿、蓝和透明度值创建一个颜色。	rgba(#7fffd4, 30%); 结果: rgba(127, 255, 212, 0.3)
lighten(color, amount)	通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
darken(color, amount)	通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
saturate(color, amount)	提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
desaturate(color, amount)	调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
opacify(color, amount)	降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
fade-in(color, amount)	降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
transparentize(color, amount)	提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
fade-out(color, amount)	提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)

Introspection 函数	说明（用于调试）	举例
call(function, arguments...)	函数的动态调用，即调用函数 function，参数为 arguments，并返回结果。
content-exists()	查看当前的混入是否传递 @content 块。
feature-exists(feature)	检查当前的 Sass 实现是否支持该特性。	feature-exists("at-error"); 结果: true
function-exists(functionname)	检测指定的函数是否存在	function-exists("nonsense") 结果: false
get-function(functionname, css: false)	返回指定函数。如果 css 为 true，则返回纯 CSS 函数。
global-variable-exists(variablename)	检测某个全局变量是否定义。	variable-exists(a) 结果: true
inspect(value)	返回一个字符串的表示形式，value 是一个 sass 表达式。
mixin-exists(mixinname)	检测指定混入 (mixinname) 是否存在。	mixin-exists("important-text") 结果: true
type-of(value)	返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist。	type-of(15px) 结果: number type-of(#ff0000) 结果: color
unit(number)	返回传入数字的单位（或复合单位）。	unit(15px) 结果: px
unitless(number)	返回一个布尔值，判断传入的数字是否带有单位。	unitless(15px) 结果: false
variable-exists(variablename)	判断变量是否在当前的作用域下。	variable-exists(b) 结果: true

Sass了解

1. 语法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

跨平台