简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  CSS預處理器Sass實例詳解

CSS預處理器Sass實例詳解

小云云
小云云原創
2018-01-15 09:51:581672瀏覽

本文主要介紹了CSS預處理器Sass詳解的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

Sass 是一款強化CSS 的輔助工具，它在CSS 語法的基礎上增加了變數(variables)、嵌套(nested rules)、混合(mixins)、導入(inline imports) 等高階功能，這些拓展令CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更有效率地開發專案。

1. 特色功能

  1. 完全相容CSS3

  2. 在CSS 基礎上增加變數、嵌套(nesting)、混合(mixins) 等功能

  3. 透過函數進行顏色值與屬性值的運算

  4. 提供控制指令( control directives)等進階功能

  5. 自訂輸出格式

#檔案字尾名稱：sass有兩種字尾名文件，一種後綴名為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既可以支援伺服器端編譯也可在客戶端（瀏覽器環境）編譯

  2. 變數符不一樣－Sass使用$符號宣告變量，Less使用@符號宣告變數

  3. #對於條件語句的支援不一樣－Sass支援複雜的條件語句（類似if..else..），Less只支援簡單的條件語句(類似if()..)

  4. 作用域－Sass局部修改變數可影響全域變量，Less則只會在局部作用域生效。

  5. 引用外部CSS檔案方式不同－Sass預設引入.sass或.scss檔案時可忽略後綴，Less則需要透過關鍵字配置來控制引入檔案如何處理。

2.2 Sass與Less相似的地方

  1. #混入(Mixins)－類似於函數或巨集，並且可以傳遞參數；

  2. 嵌套規則－class中嵌套class，從而減少重複的程式碼；

  3. ##運算－CSS中運用加減乘除計算各種數值以及字串等；

  4. 顏色功能－可以透過內建函數編輯顏色；

  5. 命名空間(namespace)－分組樣式，因此可以被呼叫；


#3.Sass語法主要功能介紹

3.1 CSS功能擴充

巢狀規則

Sass 允許將一套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檔合併進來只產生一個CSS檔。但如果你在sass檔中導入css檔如@import 'reset.css'，效果跟普通CSS導入樣式檔一樣，導入的css檔不會合併到編譯後的檔中，但會以@import 方式存在。

所有的sass導入檔案都可以忽略後綴名.scss。一般來說基礎的檔案命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import “mixin”。

less的導入(@import)語法：@import (keyword) “filename”;

多個關鍵字@import 是允許的，你必須使用逗號分隔關鍵字：example: @import (optional, reference) “foo.less”;

  1. reference: 使用該less檔但是不輸出它

  2. inline: 包括在來源檔案中輸出，但是不作處理

  3. less: 将该文件视为less文件，无论其扩展名为什么

  4. css: 将文件视为css文件，无论扩展名为什么

  5. once: 该文件仅可导入一次 (默认)

  6. multiple: 该文件可以多次导入

  7. 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中不用担心这一点，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的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在使用默认变量之前重新声明下变量即可；默认变量的价值在进行组件化开发的时候会非常有用。


//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;
}

变量 #{} 的使用形式

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$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])等

定义：


//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用方法：


//sass style
//-------------------------------
$linkColor:  #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
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中的两种变量申明方式，下面一段代码可以对比出变量声明时的不同处理方式。

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-80{
  @include opacity(80); //传递参数
}
//less style
.opacity(@opacity:50) {
  opacity: @opacity / 100;
  filter: alpha(opacity=@opacity);
}
.opacity-80{
  .opacity(80); //传递参数
}
//css style
.opacity-80{
  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中如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$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(如：数字、颜色、变量、字符串等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。


//计算数值、变量
$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 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (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 5151abf5f2f2896f3332f558b89cf20a through 55ce3cce52a8c4396e1d2f10875a095a，或者 @for $var from 5151abf5f2f2896f3332f558b89cf20a to 55ce3cce52a8c4396e1d2f10875a095a，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 5151abf5f2f2896f3332f558b89cf20a 与 55ce3cce52a8c4396e1d2f10875a095a 的值，而使用 to 时条件范围只包含 5151abf5f2f2896f3332f558b89cf20a 的值不包含 55ce3cce52a8c4396e1d2f10875a095a 的值。另外，$var 可以是任何变量，比如 $i；5151abf5f2f2896f3332f558b89cf20a 和 55ce3cce52a8c4396e1d2f10875a095a 必须是整数值。


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

//css style
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

语法为：@each $var in 318243e94be5423f7ba05ee6944632b7。其中$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(&#39;/images/#{$animal}.png&#39;);
  }
}

//css style
.puma-icon {
  background-image: url(&#39;/images/puma.png&#39;); 
}
.sea-slug-icon {
  background-image: url(&#39;/images/sea-slug.png&#39;); 
}
.egret-icon {
  background-image: url(&#39;/images/egret.png&#39;); 
}
.salamander-icon {
  background-image: url(&#39;/images/salamander.png&#39;); 
}

多个字段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(&#39;/images/#{$animal}.png&#39;);
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url(&#39;/images/puma.png&#39;);
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url(&#39;/images/sea-slug.png&#39;);
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url(&#39;/images/egret.png&#39;);
  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 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。

Sass 函数允许使用关键词参数，上面的例子也可以写成：


//关键词参数调用形式
#sidebar { width: grid-width($n: 5); }

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

相关推荐：

vue-cli + sass 的正确打开方式

如何解决webstrom sass注释中文出错问题

详解node-sass安装失败的原因与解决方法

以上是CSS預處理器Sass實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript ruby css css3 less scss es6 sass 运算符 if for 命名空间 include Error 全局变量 字符串 预处理器 变量作用域 循环 数据结构 接口 class 值参数 Length Namespace var append map JS 作用域 default 选择器 transition
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jQuerylayui常用方法實例分享下一篇：jQuerylayui常用方法實例分享

相關文章

看更多