CSS预解决器Sass详解

2021-01-20 04:29 jianzhan

Sass 是1款强化 CSS 的輔助专用工具，它在 CSS 英语的语法的基本上提升了自变量 (variables)、嵌套循环 (nested rules)、混和 (mixins)、导入 (inline imports) 等高級作用，这些扩展令 CSS 更为强劲与雅致。应用 Sass 和 Sass 的款式库（如 Compass）有助于更好地机构管理方法款式文档，和更高效率地开发设计新项目。

1. 特点作用

彻底适配 CSS3
在 CSS 基本上提升自变量、嵌套循环 (nesting)、混和 (mixins) 等作用
根据涵数开展色调值与特性值的运算
出示操纵命令 (control directives)等高級作用
自定輸出文件格式

文档后缀名字：sass有两种后缀名文档，1种后缀名为sass，不应用大括号和分号；另外一种便是大家这里应用的scss文档，这类和大家平常写的css文档文件格式类似，应用大括号和分号。而本实例教程中所说的全部sass文档都指后缀名为scss的文档。在此也提议应用后缀名为scss的文档，以免sass后缀名的严苛文件格式规定出错。

//文档后缀名为sass的英语的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文档后缀名为scss的英语的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

2. Sass、Less英语的语法较为

2.1 Sass与Less不一样的地方

编译程序自然环境不1样——Sass根据Ruby等服务器端自然环境编译程序,Less既能够适用服务器端编译程序也可在顾客端（访问器自然环境）编译程序
自变量符不1样——Sass应用$标记申明自变量，Less应用@标记申明自变量
针对标准句子的适用不1样——Sass适用繁杂的标准句子（相近于if..else..），Less仅适用简易的标准句子(相近于if()..)
功效域——Sass部分改动自变量可危害全局性自变量，Less则只会在部分功效域起效。
引入外界CSS文档方法不一样——Sass默认设置引进.sass或.scss文档时可忽视后缀，Less则必须根据重要字配备来操纵引进文档怎样解决。

2.2 Sass与Less类似的地区

混入(Mixins)——相近于涵数或宏，而且能够传送主要参数；
嵌套循环标准——class中嵌套循环class，从而降低反复的编码；
运算——CSS中应用加减乘除测算各种各样标值和标识符串等；
色调作用——能够根据内嵌涵数编写色调；
取名室内空间(namespace)——排序款式，从而能够被启用；

3. Sass英语的语法关键作用详细介绍

3.1 CSS作用拓展

嵌套循环标准

Sass 容许将1套 CSS 款式嵌套循环进另外一套款式中，里层的款式将它外层的挑选器做为父挑选器，嵌套循环作用防止了反复键入父挑选器，并且令繁杂的 CSS 构造更容易于管理方法，比如：

//sass style or less style
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

//css style
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
  background-color: #ff0000;
  color: #000000; }

父挑选器 &

在嵌套循环 CSS 标准时，有时也必须立即应用嵌套循环外层的父挑选器，比如，当给某个元素设置 hover 款式时，或当 body 元素有某个 classname 时，能够用 & 意味着嵌套循环标准外层的父挑选器。

//sass style or less style
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

//css style
a {
font-weight: bold;
text-decoration: none; }
a:hover {
  text-decoration: underline; }
body.firefox a {
  font-weight: normal; }

特性嵌套循环

一些 CSS 特性遵照同样的取名室内空间 (namespace)，例如 font-family, font-size, font-weight 都以 font 做为特性的取名室内空间。以便便于管理方法这样的特性，另外也以便防止了反复键入，Sass 容许将特性嵌套循环在取名室内空间中，比如：

//sass style
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

//css style
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

取名室内空间还可以包括自身的特性值，比如：

//sass style
.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

//css style
.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

3.2导入

sass的导入(@import)标准和CSS的有一定的不一样，编译程序时会将@import的scss文档合拼进来只转化成1个CSS文档。可是假如你在sass文档中导入css文档如 @import ‘reset.css’，那实际效果跟一般CSS导入款式文档1样，导入的css文档不容易合拼到编译程序后的文档中，而是以 @import 方法存在。

全部的sass导入文档都可以以忽视后缀名.scss。1般来讲基本的文档取名方式以_开始，如_mixin.scss。这类文档在导入的情况下能够不写下划线，可写成@import “mixin”。

less的导入(@import)英语的语法：@import (keyword) “filename”;

好几个重要字 @import 是容许的，你务必应用逗号隔开重要字：example: @import (optional, reference) “foo.less”;

reference: 应用该less文档可是不輸出它
inline: 包含在源文档中輸出，可是不作解决
less: 将该文档视作less文档，不管其拓展名为何
css: 将文档视作css文档，不管拓展名为何
once: 该文档仅可导入1次 (默认设置)
multiple: 该文档能够数次导入
optional: 当沒有发现文档时依然编译程序

导入文档编码示例：

/*被导入sass文档a.scss，less文档a.less：*/

//a.scss or a.less
//-------------------------------
body {
  background: #eee;
}

/*必须导入款式的sass文档b.scss，less文档b.less：*/

@import "reset.css";
@import "a";
p{
  background: #0982c1;
}   

/*转译出来的b.css款式：*/

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

依据上面的编码能够看出，b.scss编译程序后，reset.css再次维持import的方法，而a.scss则被整合进来了。同理，less中也是这样解决的。

3.3 注解 /* */ 与 //

Sass 适用规范的 CSS 多行注解 /* */，和单行注解 //，前者会被详细輸出到编译程序后的 CSS 文档中，然后者则不容易。Less中无需担忧这1点，Less中多行注解 /* */，和单行注解 //都可以以随便应用，都会在编译程序全过程中被保存。比如：

//sass style
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

//css style
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }
a {
  color: green; }

3.4 SassScript

自变量 $

Sass的自变量务必是$开始，后边紧跟自变量名，假如值后边再加!default则表明默认设置值。Less的自变量与Sass相近，只是应用标记不一样，Less中选用的是@

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}  
//less style
//-------------------------------
@fontSize: 12px;
body{
    font-size:@fontSize;
}
//css style
//-------------------------------
body{
    font-size:12px;
}

自变量默认设置值

sass的默认设置自变量1般是用来设定默认设置值，随后依据要求来遮盖的，遮盖的方法也很简易，只必须在应用默认设置自变量以前再次申明下自变量便可；默认设置自变量的使用价值在开展组件化开发设计的情况下会十分有效。

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

//css style
//-------------------------------
body{
    line-height:1.5;
}

/*遮盖默认设置值*/
//sass style
//-------------------------------
$baseLineHeight:  2;
$baseLineHeight:  1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

自变量 #{} 的应用方式

1般大家界定的自变量都为特性值，可立即应用，可是假如自变量做为特性或在一些独特状况下等则务必要以#{$variables}方式应用。

//sass style
//-------------------------------
$borderDirection:    top !default; 
$baseFontSize:       12px !default;
$baseLineHeight:     1.5 !default;

//运用于class和特性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//运用于繁杂的特性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值自变量 list

简易来讲list种类有点像js中的数字能量数组。list数据信息可根据空格，逗号或小括号隔开好几个值，能用nth($var,$index)赋值。

有关list数据信息实际操作也有许多别的涵数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

界定：

//1维数据信息
$px: 5px 10px 20px 30px;

//2维数据信息，非常于js中的2维数字能量数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

应用方式：

//sass style
//-------------------------------
$linkColor:  #08c #333 !default;//第1个值为默认设置值，第2个电脑鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

多值自变量 map

简易来讲map种类有点像es6英语的语法中的map数据信息构造。map数据信息以key和value成对出現，在其中value又能够是list。

文件格式为：$map: (key1: value1, key2: value2, key3: value3);可根据map-get($map,$key)赋值。有关map数据信息也有许多别的涵数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

界定：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

应用方式：

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

自变量功效域

Sass和Less中的自变量功效域各自相近与javascript中的两种自变量声明方法，下面1段编码能够比照出自变量申明时的不一样解决方法。

Sass中的自变量取值立即改动全局性自变量，Less中的自变量取值可只在部分起效。

//Sass style
$color:red; 
p{ 
  $color:blue; 
  color:$color;//blue 
} 
a{ 
  color:$color;//blue 
}
//Less style
@color:red; 
p{ 
  @color:blue; 
  color:@color;//blue 
} 
a{ 
  color:@color;//red 
}

3.5 混和(mixin)

sass中应用@mixin申明混和，能够传送主要参数，还可以给主要参数设定默认设置值。申明的@mixin根据@include来启用；在less中只必须将界定好的class用相近涵数的方法立即引入。

无主要参数 mixin

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//less style
.center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    .center-block;
}

//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

有主要参数 mixin

//sass style
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity⑻0{
  @include opacity(80); //传送主要参数
}
//less style
.opacity(@opacity:50) {
  opacity: @opacity / 100;
  filter: alpha(opacity=@opacity);
}
.opacity⑻0{
  .opacity(80); //传送主要参数
}
//css style
.opacity⑻0{
  opacity: .8;
  filter: alpha(opacity=80);
}

好几个主要参数 mixin

Sass启用时可立即传入值，如@include传入主要参数的个数小于@mixin界定主要参数的个数，则依照次序表明，后边不够的应用默认设置值，如不够的沒有默认设置值则出错。除此以外还能够挑选性的传入主要参数，应用主要参数名与值另外传入；Less中应用方式相近。

//sass style   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
//less style
.horizontal-line(@border:1px dashed #ccc, @padding:10px){
    border-bottom:@border;
    padding-top:@padding;
    padding-bottom:@padding;  
}
.imgtext-h li{
    .horizontal-line(1px solid #ccc);
}
//css style
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}

多组值主要参数 mixin

Sass中假如1个主要参数能够有多组值，如box-shadow、transition等，那末主要参数则必须在自变量后加3个点表明，如$variables…；Less表明不确定主要参数时能够立即应用 … 表明，并用@arguments表明全部主要参数

//sass style   
//box-shadow能够有多组值，因此在自变量主要参数后边加上...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//less style
.box-shadow(...) {
  -webkit-box-shadow:@arguments;
  box-shadow:@arguments;
}
.box{
  border:1px solid #ccc;
  .box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

3.6 运算

sass具备运算的特点，能够对标值型的Value(如：数据、色调、自变量、标识符串等)开展加减乘除4则运算。请留意运算符前后左右请留1个空格，要不然会错误。

//测算标值、自变量
$baseFontSize:          14px !default;
$baseLineHeight:        2 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default; // => 28px
$halfBaseGap:           $baseGap / 4  !default; // => 7px
$samllFontSize:         $baseFontSize - 2px  !default; // => 12px

$_columns:              12 !default;  
$_column-width:         60px !default;  
$_gutter:               20px !default;     
$_gridsystem-width:     $_columns * ($_column-width + $_gutter); // => 960px

//测算色调
p {
  color: #010203 + #040506; // => #050709
}

//测算标识符串
p:before {
  content: "Foo " + Bar; // => "Foo Bar"
  font-family: sans- + "serif"; // => sans-serif
}

3.7 操纵命令

SassScript 出示了1些基本的操纵命令，例如在考虑1定标准时引入款式，或设置范畴反复輸出文件格式。操纵命令是1种高級作用，平常撰写全过程中其实不常见到，关键与混和命令 (mixin) 相互配合应用。

@if

//sass style
p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
//css style
p {
border: 1px solid; }

//sass style
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//less style
@type: monster;
p (@type) when (@type = ocean){color: blue;}
p (@type) when (@type = matador){color: red;}
p (@type) when (@type = monster){color: green;}
p (@type) when (@type = dark){color: black;}

//css style
p {
color: green; }

@for

@for 命令包括两种文件格式：@for $var from <start> through <end>，或 @for $var from <start> to <end>，差别在于 through 与 to 的含意：当应用 through 时，标准范畴包括 <start> 与 <end> 的值，而应用 to 时标准范畴只包括 <start> 的值不包括 <end> 的值。此外，$var 能够是任何自变量，例如 $i；<start> 和 <end> 务必是整数金额值。

//sass style
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
.item⑴ {
  width: 2em; }
.item⑵ {
  width: 4em; }
.item⑶ {
  width: 6em; }

@each

英语的语法为：@each $var in <list or map>。在其中$var表明自变量，而list和map表明list种类数据信息和map种类数据信息。

单独字段list数据信息循环系统：

//sass style
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
.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'); 
}

好几个字段list数据信息循环系统：

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.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; 
}

好几个字段map数据信息循环系统：

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

@extend

@extend 的功效是将反复应用的款式 (.error) 拓宽 (extend) 给必须包括这个款式的独特款式（.seriousError），事例：

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

//css style
//-------------------------------
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

3.8 涵数命令

Sass 适用自定涵数，并能在任何特性值或 Sass script 中应用：

//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
//css style
//-------------------------------
#sidebar {
  width: 240px; }

与 mixin 同样，还可以传送若干个全局性自变量给涵数做为主要参数。1个涵数能够含有好几条句子，必须启用 @return 輸出結果。

Sass 涵数容许应用重要词主要参数，上面的事例还可以写成：

//重要词主要参数启用方式
#sidebar { width: grid-width($n: 5); }

尽管不足简要，可是阅读文章起来会更便捷。重要词主要参数给涵数出示了更灵便的插口，和非常容易启用的主要参数。重要词主要参数能够打乱次序应用，假如应用默认设置值还可以省缺，此外，主要参数名被视作自变量名，下划线、短横线能够交换应用。

参照参考文献：Sass汉语文本文档 — https://www.sass.hk/docs/

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

CSS预解决器Sass详解

为您推荐