关于前端CSS预处理器Sass的小知识！

时间 2019-11-09

标签关于前端 css 预处理 sass 知识栏目 CSS 繁體版

原文原文链接

前面的话

"CSS预处理器"(css preprocessor)的基本思想是，用一种专门的编程语言，进行网页样式设计，而后再编译成正常的CSS文件。SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。本文将详细介绍sass的使用javascript

定义

Sass是一门高于CSS的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通CSS更增强大的功能。
Sass可以提供更简洁、更优雅的语法，同时提供多种功能来建立可维护和管理的样式表php

【SASS和SCSS】css

Sass和SCSS实际上是同一种东西，咱们平时都称之为Sass，二者之间不一样之处有如下两点：一、文件扩展名不一样，Sass是以 “.sass”后缀为扩展名，而SCSS是以“.scss”后缀为扩展名；二、语法书写方式不一样，Sass是以严格的缩进式语法规则来书写，不带大括号 ({})和分号(;)，而SCSS的语法书写和咱们的CSS语法书写方式很是相似html

下面为Sass语法java

$font-stack: Helvetica, sans-serif  //定义变量 $primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-color

下面为SCSS语法python

$font-stack: Helvetica, sans-serif;
$primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

编译出来的CSS为nginx

body { font: 100% Helvetica, sans-serif; color: #333; }

安装

在Windows平台下安装Ruby须要先有Ruby安装包。Ruby安装文件
下载好后，能够按应用软件安装步骤进行安装Rubygit

在安装过程当中选择第二个选项(若不选中，就会出现编译时找不到Ruby环境的状况)，以下图所示github

Ruby安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command控制面板(Start Command Prompt with Ruby)web

安装好Ruby以后，接下来就能够安装Sass了。打开电脑的命令终端，输入下面的命令：

gem install sass

【更新Sass】

在命令终端执行下列命令，能够将sass升级到最高版本

gem update sass

【卸载Sass】

在命令终端执行下列命令，能够卸载sass

gem uninstall sass

编译

Sass的编译包括如下几种方法：命令编译、GUI工具编译和自动化编译

[注意]在编译sass时，常见的两个错误是字符编码错误(不支持gbk编码)和路径错误(不支持中文)

一、命令编译

命令编译是指使用电脑中的命令终端，经过输入Sass指令来编译Sass。这种编译方式是最直接也是最简单的一种方式

【单文件编译】

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

【多文件编译】

下面的命令表示将项目中“sass”文件夹中全部“.scss”(“.sass”)文件编译成“.css”文件，而且将这些CSS文件都放在项目中“css”文件夹中

sass sass/:css/

在实际编译过程当中，会发现上面的命令只能一次性编译。每次保存“.scss”文件以后，都得从新执行一次这样的命令。如此操做太麻烦，其实还有一种方法，就是在编译Sass时，开启“watch”功能，这样只要代码进行任何修改，都能自动监测到代码的变化，而且直接编译出来：

[注意]冒号的左右两侧必定不要留空格

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css sass --watch sass/test.scss:css/test.css

调试

使用chrome浏览器的sourcemap功能能够将本地的文件和服务器上的文件关联起来。这样，经过chrome的开发者工具调试网页(如更改一个css属性值)时，本地文件的内容也会相应地发生变化并保存。若是再使用sass的watch命令，在调试sass文件时，就能够实时保存文件并经过浏览器看到效果

以下图所示，点击map to network resource，把本地文件关联到服务器上相应文件。浏览器会智能地把项目目录下的其余css文件和html文件和服务器上对应的文件都关联起来

编译风格

SASS提供四个编译风格的选项：

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。 compressed：压缩后的css代码。

生产环境当中，通常使用最后一个选项

sass --style compressed test.sass test.css

二、GUI编译

通常地，使用koala编译器来对sass进行编译

三、自动化编译

使用grunt或gulp能够配置sass的编译

下面以grunt为例，首先须要安装sass插件

npm install grunt-contrib-sass --save-dev

而后，初始化grunt配置

grunt.initConfig({
  sass: { // Task dist: { // Target options: { // Target options style: 'expanded' }, files: { // Dictionary of files 'main.css': 'main.scss', // 'destination': 'source' 'widgets.css': 'widgets.scss' } } } });

接下来，告诉grunt将使用该插件

grunt.loadNpmTasks('grunt-contrib-sass');

最后，告诉grunt当咱们在终端中输入grunt时须要作些什么

grunt.registerTask('default', ['sass']);

语法

数据类型

SassScript 支持六种主要的数据类型：

一、数字(例如 1.二、1三、10px)

二、文本字符串，不管是否有引号(例如 "foo"、'bar'、baz)

三、颜色(例如 blue、#04a3f九、rgba(255, 0, 0, 0.5))

四、布尔值(例如 true、false)

五、空值(例如 null)

六、值列表，用空格或逗号分隔(例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif)

Sass还支持全部其余CSS属性值类型，例如Unicode范围和!important声明。然而，它不会对这些类型作特殊处理。它们只会被当作不带引号的字符串看待

注释

sass有两种注释方式，一种是标准的css注释方式/* */，另外一种则是//双斜杆形式的单行注释，不过这种单行注释不会输入到CSS中

/* *多行注释 */ body{  padding:5px; } //单行注释 body{  padding:5px; //5px }

变量

SASS的变量用法相似于php与css语法的结合，全部变量以$变量，变量名和变量值之间用冒号隔开。定义以后能够在全局范围内使用

$blue : #1875e7;　 div { color : $blue; }

若是变量须要镶嵌在字符串之中，就必须须要写在#{}之中

$side : left;
.rounded {
　　border-#{$side}-radius: 5px; }

【默认变量】

sass的默认变量仅须要在值后面加上!default便可。sass的默认变量通常用来设置默认值，而后根据需求来覆盖。覆盖的方式也很简单，只须要在默认变量以前从新声明变量便可

//sass style //------------------------------- $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style //------------------------------- body{ line-height:2; }

【特殊变量】

通常咱们定义的变量都为属性值，可直接使用，可是若是变量做为属性或在某些特殊状况下(如嵌套在字符串中)等则必需要以#{$variables}形式使用

$borderDirection:       top !default; $baseFontSize: 12px !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; }

【全局及局部变量】

在选择器、函数、混合宏...的里面定义的变量叫局部变量，它们的外面定义的变量为全局变量

//scss $color: orange; .block {  color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a {  color: $color;//调用局部变量 } } span {  color: $color;//调用全局变量 } //CSS .block {  color: orange; } em a {  color: red; } span {  color: orange; }

嵌套

选择器嵌套提供了一个经过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为两种：一、选择器嵌套；二、属性嵌套

【选择器嵌套】

[注意]在sass嵌套嵌套中，可使用&表示父元素选择器

#top_nav{  line-height: 40px; li{  float:left; } a{  display: block;  padding: 0 10px;  color: #fff; &:hover{  color:#ddd; } } } //css style //------------------------------- #top_nav{  line-height: 40px; } #top_nav li{  float:left; } #top_nav a{  display: block;  padding: 0 10px;  color: #fff; } #top_nav a:hover{  color:#ddd; }

【属性嵌套】

CSS有一些属性前缀相同，只是后缀不同，好比：border-top/border-right，与这个相似的还有 margin、padding、font等

[注意]border后面必须有冒号

//css .box { border-top: 1px solid red; border-bottom: 1px solid green; } //scss .box {  border: {  top: 1px solid red;  bottom: 1px solid green; } }

混合宏

混合宏是能够重用的代码块

在Sass中，使用“@mixin”来声明一个混合宏

@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }

可使用@include命令，来调用混合宏mixin

button {
 @include border-radius; }

mixin指定参数和缺省值

@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } div{ @include border-radius(10px); }

Sass中的混合宏还提供更为复杂的状况，能够在大括号里面带有逻辑关系

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }

Sass在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一块儿。这也是 Sass的混合宏最大的不足之处

【占位符】

占位符是介于混合宏和变量之间的一个功能

//SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .block { @extend %mt5; span { @extend %pt5; } } //CSS .block { margin-top: 5px; } .block span { padding-top: 5px; }

继承

SASS容许一个选择器，继承另外一个选择器。好比，现有class1

.class1{ border: 1px solid black; }

class2要继承class1，就要使用@extend命令

.class2{
  @extend .class1; font-size:120%; }

Sass中的继承，能够继承类样式块中全部样式代码，并且编译出来的CSS会将选择器合并在一块儿，造成组合选择器

//SCSS .btn {  border: 1px solid #ccc;  padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; @extend .btn; } .btn-second { background-color: orange; @extend .btn; } //CSS .btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; } .btn-second { background-clor: orange; }

运算

SASS容许在代码中使用算式

【注意事项】

一、100px * 2px会报错，乘法应该写成100px * 2

二、由于除号/在CSS中在特殊的含义，因此为了不除法不生效，须要在外面添加一个小括号

三、相似于javascript，sass中的加法也有字符串链接的做用

$num: '1' + '1'; body{  top: 10px + 10px;//20  left: 10px - 10px;//0  right: 100px *2;//200  bottom: (100px/2);//50  width: $num;//11 }

语句

【条件语句】

@if指令是一个SassScript，它能够根据条件来处理样式块，若是条件为true返回一个样式块，反之false返回另外一个样式块。在Sass中除了@if，还能够配合@else if或@else一块儿使用

//scss @mixin blockOrHidden($boolean:true) { @if $boolean {  display: block; } @else {  display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); } //CSS: .block {  display: block; } .hidden {  display: none; }

【循环语句】

for循环

Sass中的for循环有两种方式

@for $i from <start> through <end> @for $i from <start> to <end>

这两个的区别是关键字through表示包括end，而to则不包括end

//scss @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css .item-1 {  width: 2em; } .item-2 {  width: 4em; } .item-3 {  width: 6em; }

while循环

//SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; } //css .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }

each循环

//scss $list: adam john wynn mason kuroir; @mixin author-images { @each $author in $list { .photo-#{$author} {  background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; } //css .author-bio .photo-adam {  background: url("/images/avatars/adam.png") no-repeat; } .author-bio .photo-john {  background: url("/images/avatars/john.png") no-repeat; } .author-bio .photo-wynn {  background: url("/images/avatars/wynn.png") no-repeat; } .author-bio .photo-mason {  background: url("/images/avatars/mason.png") no-repeat; } .author-bio .photo-kuroir {  background: url("/images/avatars/kuroir.png") no-repeat; }

函数

在命令终端开启sass -i这个命令，至关于开启Sass的函数计算

sass -i

【字符串函数】

unquote($string)：删除字符串中的引号

//SCSS .test1 { content: unquote('Hello Sass!') ; } .test3 { content: unquote("I'm Web Designer"); } .test5 { content: unquote('"Hello Sass!"'); } //css .test1 { content: Hello Sass!; } .test3 { content: I'm Web Designer; } .test5 { content: "Hello Sass!"; }

quote($string)：给字符串添加引号，若是字符串自身带有引号会统一换成双引号""

//SCSS .test1 { content: quote('Hello Sass!'); } .test2 { content: quote("Hello Sass!"); } .test3 { content: quote(ImWebDesigner); } .test4 { content: quote(' '); } //CSS .test1 { content: "Hello Sass!"; } .test2 { content: "Hello Sass!"; } .test3 { content: "ImWebDesigner"; } .test4 { content: ""; }

To-upper-case()：将字符串小写字母转换成大写字母

//SCSS .test {  text: to-upper-case(aaaaa);  text: to-upper-case(aA-aAAA-aaa); } //CSS .test {  text: AAAAA;  text: AA-AAAA-AAA; }

To-lower-case()：将字符串转换成小写字母

//SCSS .test {  text: to-lower-case(AAAAA);  text: to-lower-case(aA-aAAA-aaa); } //CSS .test {  text: aaaaa;  text: aa-aaaa-aaa; }

【数字函数】

percentage($value)：将一个不带单位的数转换成百分比值

//scss .footer{ width : percentage(.2) } //css .footer{ width : 20% }

round()将一个数四舍五入为一个最接近的整数

//scss .footer1 {  width:round(15.8px) } .footer2 {  width:round(3.4em) } //css .footer1 {  width:16px } .footer2 {  width:3em }

ceil()向上取整

//scss .footer1 {  width:ceil(15.8px) } .footer2 {  width:ceil(3.4em) } //css .footer1 {  width:16px } .footer2 {  width:4em }

floor()向下取整

//scss .footer1 {  width:floor(15.8px) } .footer2 {  width:floor(3.4em) } //css .footer1 {  width:15px } .footer2 {  width:3em }

abs()取绝对值

//scss .footer1 {  width:abs(-15.8px) } .footer2 {  width:abs(3.4em) } //css .footer1 {  width:15.7px } .footer2 {  width:3.4em }

min()取最小值，max()取最大值

[注意]min()和max()都只能够比较相同单位的数值，不然会报错

//scss div{  height:max(10px,23px);  width:min(10px,23px); } //css div{  height:23px;  width:10px; }

random()用来获取一个随机数

//scss div{  color: rgba(200, 150, 40, random()); } //css div {  color: rgba(200, 150, 40, 0.57236); }

【列表函数】

length()用来返回一个列表中有几个值。length()函数中的列表参数之间使用空格隔开，不能使用逗号，不然函数将会出错

>> length(10px) 1 >> length(10px 20px (border 1px solid) 2em) 4 >> length(border 1px solid) 3

nth($list,$n)用来指定列表中某个位置的值，nth()函数的起始值为1

>> nth(10px 20px 30px,1) 10px >> nth((Helvetica,Arial,sans-serif),2) "Arial" >> nth((1px solid red) border-top green,1) (1px "solid" #ff0000)

join()用来将两个列表链接合并成一个列表。不过join()只能将两个列表链接成一个列表，若是直接链接两个以上的列表将会报错

>> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((blue,red),(#abc,#def)) (#0000ff, #ff0000, #aabbcc, #ddeeff) >> join((blue,red),(#abc #def)) (#0000ff, #ff0000, #aabbcc, #ddeeff)

append()用来将某个值插入到列表中，而且处于最末位

>> append(10px 20px ,30px) (10px 20px 30px) >> append((10px,20px),30px) (10px, 20px, 30px) >> append(green,red) (#008000 #ff0000) >> append(red,(green,blue)) (#ff0000 (#008000, #0000ff))

zip()用于将多个列表值转成一个多维的列表。在使用zip()函数时，每一个单一的列表个数值必须是相同的，不然将会出错

>> zip(1px 2px 3px,solid dashed dotted,green blue red) ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index()相似于索引同样，用来找出某个值在列表中所处的位置。起始值是1，不是0

>> index(1px solid red, 1px) 1 >> index(1px solid red, solid) 2 >> index(1px solid red, red) 3

type-of()主要用来判断一个值是属于什么类型

number为数值型，string为字符串型，bool为布尔型，color为颜色型

>> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "string" >> type-of(true) "bool" >> type-of(false) "bool" >> type-of(#fff) "color" >> type-of(blue) "color" >> type-of(1 / 2 = 1) "string"

unit()用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算获得一个“多单位组合”的值，不过只容许乘、除运算

>> unit(100) "" >> unit(100px) "px" >> unit(20%) "%" >> unit(1em) "em" >> unit(10px * 3em) "em*px" >> unit(10px / 3em) "px/em" >> unit(10px * 2em / 3cm / 1rem) "em/rem"

unitless()用来判断一个值是否带有单位，若是不带单位返回的值为 true，带单位返回的值为 false

>> unitless(100) true >> unitless(100px) false >> unitless(100em) false >> unitless(100%) false >> unitless(1 /2 ) true >> unitless(1 /2 + 2 ) true >> unitless(1px /2 + 2 ) false

comparable()用来判断两个数是否能够进行“加，减”以及“合并”。若是能够返回值为true，若是不能够返回值是false

>> comparable(2px,1%) false >> comparable(2px,1em) false >> comparable(2rem,1em) false >> comparable(2px,1cm) true >> comparable(2px,1mm) true

Miscellaneous()称为三元条件函数。该函数有两个值，当条件成立返回一种值，当条件不成立时返回另外一种值

if($condition,$if-true,$if-false) >> if(true,1px,2px) 1px >> if(false,1px,2px) 2px

【颜色函数】

RGB颜色函数

rgb($red,$green,$blue)根据红、绿、蓝三个值建立一个颜色

rgba($red,$green,$blue,$alpha)根据红、绿、蓝和透明度值建立一个颜色

除了与CSS相同的rgba()格式外，sass中的rgba()还支持rgba(

.overlayout{ background-color:rgba(#773,0.5); }

red($color)从一个颜色中获取其中红色值

green($color)从一个颜色中获取其中绿色值

blue($color)从一个颜色中获取其中蓝色值

mix($color-1,$color-2,[$weight])把两种颜色混合在一块儿。$color-1和$color-2指须要合并的颜色，颜色能够是任何表达式，也能够是颜色变量

$weight为第一个颜色合并所占的比例(权重)，默认值为50%，其取值范围是0~1之间。它是由每一个RGB的百分比来衡量的，固然透明度也会有必定的权重。默认的比例是50%，这意味着两个颜色各占一半，若是指定的比例是25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%

mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

HSL颜色函数

hsl($hue,$saturation,$lightness)经过色相(hue)、饱和度(saturation)和亮度(lightness)的值建立一个颜色

hsla($hue,$saturation,$lightness,$alpha)经过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值建立一个颜色

hue($color)从一个颜色中获取色相(hue)值

saturation($color)从一个颜色中获取饱和度(saturation)值

lightness($color)从一个颜色中获取亮度(lightness)值

adjust-hue($color,$degrees)经过改变一个颜色的色相值，建立一个新的颜色。色相是色彩的首要特征，是区别各类不一样色彩的最准确的标准。事实上任何黑白灰之外的颜色都有色相的属性，而色相也就是由原色、间色和复色来构成的

darken($color,$amount)经过改变颜色的亮度值，让颜色变暗，建立一个新的颜色

lighten($color,$amount)经过改变颜色的亮度值，让颜色变亮，建立一个新的颜色

lighten()和darken()两个函数都是围绕颜色的亮度值作调整的，其中lighten()函数会让颜色变得更亮，与之相反的darken()函数会让颜色变得更暗。这个亮度值能够是0~1之间，不过经常使用的通常都在3%~20%之间

[注意]当颜色亮度值接近或大于100%，颜色会变成白色；反之颜色亮度值接近或小于0时，颜色会变成黑色

//SCSS $baseColor: #ad141e; .lighten {  background: lighten($baseColor,10%); } .darken{  background: darken($baseColor,10%); } //CSS .lighten {  background: #db1926; } .darken {  background: #7f0f16; }

saturate($color,$amount)经过改变颜色的饱和度值，让颜色更饱和，从而建立一个新的颜色。饱和度是指色彩的鲜艳程度，也称色彩的纯度

desaturate($color,$amount)经过改变颜色的饱和度值，让颜色更少的饱和，从而建立出一个新的颜色

saturate()、desaturate()这两个函数是经过改变颜色的饱和度来获得一个新的颜色，他们和前面介绍的修改亮度获得新颜色的方法很是类似

grayscale($color)函数会颜色的饱和度值直接调至0%，因此此函数与desaturate($color,100%)所起的功能是同样的。通常这个函数能将彩色颜色转换成不一样程度的灰色将一个颜色变成灰色

//SCSS $baseColor: #ad141e; .grayscale {  background: grayscale($baseColor); } .desaturate {  background: desaturate($baseColor,100%); } //CSS .grayscale {  background: #616161; } .desaturate {  background: #616161; }

complement($color)返回一个补充色，至关于adjust-hue($color,180deg)

invert($color)返回一个反相色，红、绿、蓝色值倒过来，而透明度不变

>> hsl(200,30%,60%) //经过h200,s30%，l60%建立一个颜色 #7aa3b8 >> hsla(200,30%,60%,.8)//经过h200,s30%，l60%,a80%建立一个颜色 rgba(122, 163, 184, 0.8) >> hue(#7ab)//获得#7ab颜色的色相值 195deg >> saturation(#7ab)//获得#7ab颜色的饱和度值 33.33333% >> lightness(#7ab)//获得#7ab颜色的亮度值 60% >> adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg #33ff66 >> lighten(#f36,50%) //把#f36颜色亮度提升50% #ffffff >> darken(#f36,50%) //把#f36颜色亮度下降50% #33000d >> saturate(#f36,50%) //把#f36颜色饱和度提升50% #ff3366 >> desaturate(#f36,50%) //把#f36颜色饱和度下降50% #cc667f >> grayscale(#f36) //把#f36颜色变成灰色 #999999 >> complement(#f36) #33ffcc

透明度颜色函数

在CSS中除了可使用rgba、hsla和transform来控制颜色透明度以外，还可使用opacity来控制，只不过前二者只是针对颜色上的透明通道作处理，然后者是控制整个元素的透明度

alphpa()和opacity()很简单，与前面介绍的red()、green()等函数很相似。函数的主要功能是用来获取一个颜色的透明度值。若是颜色没有特别指定透明度，那么这两个函数获得的值都会是1

>> alpha(red) 1 >> alpha(rgba(red,.8)) 0.8 >> opacity(red) 1 >> opacity(rgba(red,.8)) 0.8

opacify()和fade-in()是用来对已有颜色的透明度作一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是须要增长的透明度值，其取值范围主要是在0~1之间。当透明度值增长到大于1时，会以1计算，表示颜色不具备任何透明度

>> opacify(rgba(22,34,235,.6),.2) rgba(22, 34, 235, 0.8) >> opacify(rgba(22,34,235,.6),.5) #1622eb >> opacify(hsla(22,34%,23%,.6),.15) rgba(79, 53, 39, 0.75) >> opacify(hsla(22,34%,23%,.6),.415) #4f3527 >> opacify(red,.15) #ff0000 >> opacify(#89adde,.15) #89adde >> fade-in(rgba(23,34,34,.5),.15) rgba(23, 34, 34, 0.65) >> fade-in(rgba(23,34,34,.5),.615) #172222

transparentize()和fade-out()所起做用恰好与opacify()和fade-in()函数相反，让颜色更加的透明。这两个函数会让透明值作减法运算，当计算出来的结果小于0时会以0计算，表示全透明

>> transparentize(red,.5) rgba(255, 0, 0, 0.5) >> transparentize(#fde,.9) rgba(255, 221, 238, 0.1) >> transparentize(rgba(98,233,124,.3),.11) rgba(98, 233, 124, 0.19) >> transparentize(rgba(98,233,124,.3),.51) rgba(98, 233, 124, 0) >> fade-out(red,.9) rgba(255, 0, 0, 0.1) >> fade-out(hsla(98,6%,23%,.5),.1) rgba(58, 62, 55, 0.4) >> fade-out(hsla(98,6%,23%,.5),.6) rgba(58, 62, 55, 0)

数组

Sass的map经常被称为数据地图，也有人称其为数组，由于它老是以key:value成对的出现，但其更像是一个JSON数据

$map: (
 key1: value1,  key2: value2,  key3: value3 )

首先有一个相似于Sass的变量同样，用个$加上命名空间来声明map。后面紧接是一个小括号()，将数据以key:value的形式赋予，其中key和value是成对出现，而且每对之间使用逗号(,)分隔，其中最后一组后面没有逗号。其中键key是用来查找相关联的值value。使用map 能够很容易收集键的值和动态插入

在Sass中经常使用下面的方式定义变量

$default-color: #fff !default; $primary-color: #22ae39 !default;

使用map能够更好的进行管理

$color: (
 default: #fff,  primary: #22ae39 );

若是哪天须要新增长颜色变量值，在map中能够很是方便的添加

$color: (
 default: #fff,  primary: #22ae39,  negative: #d9534f );

对于map，还可让map嵌套map。其实就是map的某一个key当成map，里面能够继续放一对或者多对key:value

$map: (
 key1: value1,  key2: (  key-1: value-1,  key-2: value-2, ),  key3: value3 );

map嵌套的实用性强，在换肤项目中，每一套皮肤对应的颜色蛮多的，使用map嵌套来管理颜色的变量就很是的有条理性，便于维护与管理

$theme-color: (
 default: (  bgcolor: #fff,  text-color: #444,  link-color: #39f ),  primary:(  bgcolor: #000,  text-color:#fff,  link-color: #93f ),  negative: (  bgcolor: #f36,  text-color: #fefefe,  link-color: #d4e ) );

为了方便的操做map，在Sass中map自身带了七个函数

map-get($map,$key)用来根据$key参数，返回$key在$map中对应的value值。若是$key不存在$map中，将返回null值。该函数包含两个参数：$map表示定义好的map；$key表示须要遍历的key

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); .btn-dribble{  color: map-get($social-colors,facebook); } //css .btn-dribble {  color: #3b5998; }

若是是多重数组，能够嵌套使用map-get()函数来获取值

//scss
$theme-color: (
 default: (  bgcolor: #fff,  text-color: #444,  link-color: #39f ),  primary:(  bgcolor: #000,  text-color:#fff,  link-color: #93f ),  negative: (  bgcolor: #f36,  text-color: #fefefe,  link-color: #d4e ) ); h1{  color:map-get(map-get($theme-color,default),text-color); } //css h1 {  color: #444; }

map-has-key($map,$key)用来判断map中是否存在参数中的key，若是存在则返回true，不然返回false

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @if map-has-key($social-colors,facebook){ .btn-facebook {  color: map-get($social-colors,facebook); } } @else { @warn "No color found for faceboo in $social-colors map. Property ommitted." } //css .btn-fackbook{  color: #3b5998; }

若是使用上面的写法，每获取一个key都须要写一个if语句，其实能够自定义函数来解决这个问题

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @function colors($color){ @if not map-has-key($social-colors,$color){ @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; } @return map-get($social-colors,$color); } .btn-dribble {  color: colors(dribble); } .btn-facebook {  color: colors(facebook); } .btn-github {  color: colors(github); } .btn-google {  color: colors(google); } .btn-twitter {  color: colors(twitter); } .btn-weibo {  color: colors(weibo); } //css .btn-dribble {  color: #ea4c89; } .btn-facebook {  color: #3b5998; } .btn-github {  color: #171515; } .btn-google {  color: #db4437; } .btn-twitter {  color: #55acee; }

用each()循环来减小重复

@each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } }

map-keys($map)将返回$map中的全部key。这些值赋予给一个变量，就是一个列表

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @each $i in map-keys($social-colors){ .c-#{$i}{  color: map-get($social-colors,$i); } }; //css .c-dribble {  color: #ea4c89; } .c-facebook {  color: #3b5998; } .c-github {  color: #171515; } .c-google {  color: #db4437; } .c-twitter {  color: #55acee; }

map-values($map)相似于map-keys($map)功能，不一样的是，map-values($map)获得的是键值，而map-keys($map)获得的是键名

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @each $val in map-values($social-colors){ .c-#{$val}{  color: $val; } }; //css .c-dribble {  color: #ea4c89; } .c-facebook {  color: #3b5998; } .c-github {  color: #171515; } .c-google {  color: #db4437; } .c-twitter {  color: #55acee; }

map-merge($map1,$map2)用于将$map1和$map2合并，而后获得一个新的$map。若是$map1和$map2中有相同的$key名，那么将$map2中的$key会取代$map1中的$key

$color: (
 text: #f36,  link: #f63,  border: #ddd,  backround: #fff ); $typo:(  font-size: 12px,  line-height: 1.6,  border: #ccc,  background: #000 ); $newmap: map-merge($color,$typo); $newmap:(  text: #f36,  link: #f63,  font-size: 12px,  line-height: 1.6,  border: #ccc,  background: #000 );

map-remove($map,$key)用来删除当前map中的某一个key，从而获得一个新的map。其返回的值仍是一个map。他并不能直接从一个map中删除另外一个map，仅能经过删除map中的某个key获得新map。若是删除的key并不存在于map中，那么map-remove()函数返回的新map和之前的map同样

$social-colors: (
 dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); $map:map-remove($social-colors,dribble); $map:(  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee );

keywords($args)是一个动态建立map的函数。能够经过混合宏或函数的参数变建立map。参数也是成对出现，其中$args变成key(会自动去掉$符号)，而$args对应的值就是value

@mixin map($args...){ @debug keywords($args); } @include map( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee ); 在命令终端能够看到一个@debug信息： DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

指令

Sass支持全部CSS3的@规则，以及一些Sass专属的规则，也被称为“指令(directives)”

【@import】

Sass扩展了CSS的@import规则，让它可以引入SCSS和Sass文件。全部引入的SCSS和Sass文件都会被合并并输出一个单一的CSS文件。另外，被导入的文件中所定义的变量或mixins均可以在主文件中使用

Sass会在当前目录下寻找其余Sass文件，若是是Rack、Rails或Merb环境中则是Sass文件目录。也能够经过:load_paths选项或者在命令行中使用--load-path选项来指定额外的搜索目录

@import根据文件名引入。默认状况下，它会寻找Sass文件并直接引入，可是，在少数几种状况下，它会被编译成CSS的@import规则，包括如下几种状况：若是文件的扩展名是.css；若是文件名以http://开头；若是文件名是url()；若是@import包含了任何媒体查询(mediaqueries)

若是上述状况都没有出现，而且扩展名是.scss或.sass，该名称的Sass或SCSS文件就会被引入。若是没有扩展名，Sass将试着找出具备.scss或.sass扩展名的同名文件并将其引入

【@media】

Sass中的@media指令和CSS的使用规则同样的简单，但它有另一个功能，能够嵌套在CSS规则中。有点相似JS的冒泡功能同样，若是在样式中使用@media指令，它将冒泡到外面

//scss .sidebar {  width: 300px; @media screen and (orientation: landscape) {  width: 500px; } } //css .sidebar {  width: 300px; } @media screen and (orientation: landscape) { .sidebar {  width: 500px; } }

【@extend】

Sass中的@extend是用来扩展选择器或占位符

//scss .error {  border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; } //css .error, .seriousError {  border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; }

【@at-root】

@at-root从字面上解释就是跳出根元素。当选择器嵌套多层以后，想让某个选择器跳出，此时就可使用@at-root

//scss .a {  color: red; .b {  color: orange; .c {  color: yellow; @at-root .d {  color: green; } } } } //css .a {  color: red; } .a .b {  color: orange; } .a .b .c {  color: yellow; } .d {  color: green; }

【@debug】

@debug在Sass中是用来调试的，当在Sass的源码中使用了@debug指令以后，Sass代码在编译出错时，在命令终端会输出设置的提示Bug:

@debug 10em + 12em; 会输出： Line 1 DEBUG: 22em

【@error、@warn】

@error和@warn、@debug功能相似，可类比于javascript中的console.error()、console.warn()和console.debug()

实例

下面来使用SCSS来实现一个七色卡片的效果，以下图所示

首先，要了解颜色模式除了RGB模式，还有HSL模式

h:色调(hue)能够为任意整数。0(或360或-360)表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红(当h值大于360时，实际的值等于该值模360后的值)

s:饱和度(saturation)，就是指颜色的深浅度和鲜艳程度。取0-100%范围的值，其中0表示灰度(没有该颜色)，100%表示饱和度最高(颜色最鲜艳)

l:亮度(lightness)，取0-100%范围的值，其中0表示最暗(黑色)，100%表示最亮(白色)

[注意]关于CSS中HSL模式的详细信息移步至此

因为对色彩知识并无深刻的了解，就以图片表观上从左到右亮度逐渐变小为依据，来写CSS

下面来分析图片，从上到下分别是红、橙、黄、蓝、绿、紫、黑七种颜色，共7行。每行都有21列，从左到右，亮度逐渐变小。最左列为纯白，最右列为纯黑。因此，能够以最中心列的颜色为起点，向左10列，每列亮度增长10%，最左列亮度为100%。向右10列，每列亮度减少10%，最右列亮度为0%

使用量图工具，量得每一行中心列的颜色值从上到下分别为：#e0274四、#ec8a00、#fae200、#91de00、#47c9f二、#a500fe、#848484

下面要使用SASS中关于亮度改变的函数：darken()让颜色变暗和lighten()让颜色变亮

在lighten()函数中，参数amount为50%，则为全白。因此，第1到第10列的参数amount为从50%到5%；相似地，在darken()函数中，参数amount为50%，则为全黑。因此，第12到第21列的参数amount为从5%到50%

【HTML代码】

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <div class="box"> <ul class="red"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="orange"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="yellow"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="green"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="blue"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="purple"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="grey"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div> </body> </html>

【SASS代码】

body{margin: 0} ul{margin: 0;padding: 0;list-style:none;overflow: hidden} li{float:left;height: 30px;width: 20px;} //定义colorMap用于储存每一行中间列的颜色值 $colorMap: ( red: #e02744, orange: #ec8a00, yellow: #fae200, green: #91de00, blue: #47c9f2, purple: #a500fe, grey: #848484 ); //为一行中的每一个元素设置背景颜色 @mixin changelightness($color){ @for $index from 1 through 21 { //从第一列到第十列，亮度增大值由50%变化到5% @if($index < 11){ //amount表示当前列的亮度 $amount: percentage((11-$index)/20); li:nth-child(#{$index}) { background-color: lighten($color,$amount); } } //第十一列为中心列，以测量值赋值 @if($index == 11){ li:nth-child(#{$index}){ background-color: $color; } } //从第十二列到第二十一列，亮度减少值由5%变化到50% @if($index > 11){ $amount: percentage(($index - 11)/20); li:nth-child(#{$index}){ background-color: darken($color,$amount); } } } } //经过forEach循环为每一行(也就是HTML结构中的每个ul)添加样式 @each $index in map-keys($colorMap){ .#{$index}{ @include changelightness(map-get($colorMap,$index)); } }

【实际效果】

-转载